AJAX学习之路（一）——异步，XMLHttpRequest

一。简介

AJAX是异步Javascript和XML技术。

AJAX原理：通过XMLHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后通过JS操作DOM节点来更新页面数据。（即网页的部分更新）

PS：：异步：进程不需要一直等待下去，而是直接执行下面的操作，不管其他进程的状态，当有消息返回时就会通知进程进行处理。      ————>  好处：提高执行效率.（因为在请求动作结束后，接下来的程序执行不依赖从服务器请求的数据）

反之，如果应用程序往下执行时一来从服务器请求的数据，则使用同步（因为必须等待这个数据返回）。

总结：何时使用异步、何时使用同步，取决于请求的数据是否是程序继续执行必须依赖的数据。

二。XMLHttpRequest对象

1.创建

var xmlhttp = null;
if(window.XMLHttpRequest){
    //创建所有主流浏览器支持的XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
    //创建IE5和IE6支持的XMLHttpRequest对象
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
    

2. 方法

比较常用的有 open() ，send() 。

open()       初始化HTTP请求参数，如URL和HTTP方法，但是并不发送请求

open(method,url,asunc,username,password)

参数:

1, method:用于指定请求的类型  "GET"或者"POST"

2, url:用于请求的地址, 可相对可绝对

3, asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步

PS:: 在调用open()方法时，readyState状态值会被设置成1。

 

open的get 和 post 的两个实例：

//首先创建XMLHttpRequest对象
var xmlhttp = null;
if(window.XMLHttpRequest){
    //创建所有主流浏览器支持的XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
    //创建IE5和IE6支持的XMLHttpRequest对象
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//初始化请求参数，设置请求信息
xmlhttp.open("get","http://hao123.com",""true);
//发送请求
xmlhttp.send();

//首先创建XMLHttpRequest对象
var xmlhttp = null;
if(window.XMLHttpRequest){
    //创建所有主流浏览器支持的XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
    //创建IE5和IE6支持的XMLHttpRequest对象
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//初始化请求参数，设置请求信息
xmlhttp.open("post","http://hao123.com",""true);
//设置请求头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xmlhttp.send("name=Tom");

 注意，post和get请求的头信息是不一样的。每种请求应该有不同的请求头信息。

send()      发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体

不常用的有abort()， getAllResponseHeaders() , getResponseHeader() , setRequestHeader()  。 但这些方法并不常用，大家可以自行百度了解，这里就不一一说明了。

abort()------>终止一切活动

getAllResponseHeaders()——————>获取响应头（ 字符串形式），每行用换行符隔开

getResponseHeader()————>获取头信息的值（即返回值），参数忽略大小写。

三。属性

1.onreadystatechange    在设置回调函数的时候经常用到, 所有的状态改变的时候都会触发这个事件处理器。当readyState状态值为3时，是一个持续接受数据的过程。

2.readyState    通过返回的代码是多少来判断当前的状态是什么情况   返回值 0 1 2 3 4

3.responseText    从服务器接收到的响应体。当readyState状态值为3时，说明值接收到头信息，响应体就是空字符串；如果为4，说明全部数据接收完成。

4.status           返回Http状态码——200:表示成功; 202:表示请求被接受, 但尚未成功; 400:错误的请求; 404:文件未找到; 500:内部服务器错误

5.statusText       返回Http状态码的文本信息