Ajax的学习——get和post请求

要点：

1、AJAX的简单介绍
2、传统网页请求响应模式和AJAX模式的对比
3、AJAX的优点和缺点
4、AJAX的基本使用

[b]AJAX的简单介绍[/b]

AJAX（ Asynchronous JavaScript and XML）AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。本质上是一种浏览端的技术。

[b]传统网页请求响应模式和AJAX模式的对比[/b]

传统网页请求响应模式



AJAX请求模式



对比：在传统模式下，用户一旦向服务器发送了请求，则用户在界面不能进行其他操作，必须等服务器把数据处理完，返回给浏览器，才能进行其他的操作，非常影响用户体验。但是在AJAX的请求模式下，向服务器发送了请求，而用户可以继续留在当前页面进行操作，不影响用户的使用，体验比传统模式下有较大的提升。

[b]AJAX的优点和缺点[/b]

1、Ajax在本质上是一个浏览器端的技术

2、Ajax技术之主要目的在于局部交换客户端及服务器间之数据

3、Ajax主要依靠XMLHttpRequest 的特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)

4、与服务器之间的沟通，完全是透过Javascript 来实行

5、使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序

6、AJAX 就是运用Javascript 在后台去跟服务器请求资料，最后再由Javascript 或DOM 来呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，对于用户来说，体验会更加好。

[b]AJAX的基本使用[/b]



注意：

为XMLHttpRequest对象设置请求参数

1.GET方式

xhr.open(“GET”, “url?id=12&name=hello”, true);//使用异步传输

xhr.open(“GET”, “url?data”, false);//不使用异步传输

xhr.setRequestHeader(“If-Modified-Since”, “0”); //请求可以设置浏览器不使用缓存

2.POST方式：

xhr.open(“POST”, “url”, true);//使用异步传输

xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);//添加请求头

xhr.send(“id=1&num=123”);//POST方式

异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件. 在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。 如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。 如果已经准备好，就继续往下执行；

前台JS代码

//AJAX的Get请求
document.getElementById("GetDateTime").onclick = function()
{
var xhr;
if(XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else {
//旧版本IE的创建方法
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "GetDate.ashx?name=123", true);
xhr.send();

xhr.onreadystatechange=function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
alert(xhr.responseText);//在GetDate.ashx中返回当前时间
}

}

}
//AJAX的post请求
document.getElementById("PostQuery").onclick = function () {
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
//旧版本IE的创建方法
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", "GetName.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=tom&pwd=456465");
xhr.onreadystatechange = function ()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
alert(xhr.responseText);//在GetName.ashx中返回传过去的name
}
}
}
}

XMLHTTPRequest常用方法



异步对象常用属性



readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；

1：已打开。对象已经创建并初始化，但还未调用send方法；

2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；

3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；

4：已加载。所有数据接收完毕

PS:博文中如有什么不对的地方恳请大家指出，谢谢~