完整的Ajax实例
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
写在前面的话:
用了很久的 Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了.
以前记的也不怎么清楚,这次就重新完整的学习一遍吧,也为了自己以后能找个完整的地方来复习.
什么是Ajax
Ajax的全称是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成. HTML用于建立Web表单
Javascript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信
DHTML用于动态更新表单
DOM用于处理HTML结构和服务器返回的XML
时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.
优点
通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验.
实例
get.htm页面HTML代码如下:
姓名:
年龄:
js代码如下:
function btn_click() {
//创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//获取值
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
//配置XMLHttpRequest对象
xmlHttp.open("get", "Get.aspx?username=" + username
+ "&age=" + age);
//设置回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求
xmlHttp.send(null);
}
新建Get.aspx页,Get.aspx.cs代码如下:
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
string username = Request.QueryString["username"];
string age = Request.QueryString["age"];
Response.Write("姓名:'" + username + "'
年龄:" + age + "
时间:'" + DateTime.Now.ToString() + "'");
Response.End();
}
结果:
输入姓名和年龄,点击Get按钮,就会从服务器获取到数据.
小结:
今天暂时写一个完整的例子来显示Ajax的调用过程,此例中存在许多问题:
1. 如何创建在大部分浏览器中都能运行的XMLHttpRequest对象.
2. 使用get请求时存在缓存问题
3. 中文乱码问题
针对这些已经出现的问题,我们在随后的例子中会一一解决.
对于其他的疑问,比方说:
1. 如何使用post传递数据
2. post和get有什么区别
3. 如何使用传输和使用json数据
4. 如何传输和使用xml数据(毕竟,Ajax最后的一个字母x指的是XML) 对于这些疑问,我们在随后的文章里也会一一解决的.