ajax数据请求的理解

一，请求

发送请求有两种方式：get 跟 post 。

1.get仅请求数据，不需要服务端做处理，最后会返回指定的资源。

2.post可以提交数据，服务端根据提交的数据做处理，再返回数据。

二，创建XMLHttpRequest对象

要想发起一个ajax请求，首先要创建一个请求对象，该对象提供发起请求所需要的方法，并用于装载返回的数据。

创建对象的代码如下：

/*

* 创建XMLHttpRequest的方法

* @function createXMLHttpRequest

* @return XMLHttpRequest对象

*/

function createXMLHttpRequest(){

if (window.ActiveXObject){

return new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

return new XMLHttpRequest();

}

}

三，处理监听或者数据请求和返回的状态

XMLHTTPRequest对象的readyState属性是指返回XMLHTTP请求的当前状态。

而当XMLHTTPRequest对象的readyState属性改变时，需要调用HandleStateChange函数，代码如下：

xmlHttp.onreadystatechange= HandleStateChange;

function HandleStateChange(){

if (xmlHttp.readyState == 4){

alert(xmlHttp.responseText);

}

}

注意：

readyState属性表示返回XMLHTTP请求的当前状态。

各状态值意义如下：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

每一个状态的改变都会触发onreadystatechange，需要进行判断，当状态码为4时，说明数据接收完毕，可以开始进行数据处理。

四，创建请求时设置数据传输的方法和路径

创建请求时设置数据传输，有两种get和post方式。

1，get请求：

           xmlHttp.open('GET','ajax.txt',true);

        第一个参数为请求的方式，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

        第二个参数为请求的地址，可以为绝对地址也可以为相对地址。

        第三个参数为布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。

        后面还可以再附带两个参数，仅在服务器要求验证时才提供，分别为用户名及密码。

2，post请求：

           POST请求，通常会提交数据到一个后台脚本页面，如asp、php、jsp等等，页面脚本处理完成后会返回数据。如：

           xmlHttp.open('POST','ajax.php',true);

        注意，POST请求需要设置请求头，且请求头必须在open方法之后设置，设置请求头的方法是setRequestHeader，传递两个参数，第一个是请求头字段名，第二个参数是该字段的值，根据实际情况设置不同的值。通常会设置如下：

          xmlHttp.setRequestHeader('CONTENT-TYPE','application/x-www-form-urlencoded');

五，发送请求

发送请求，方法是send()。对于GET请求，该方法不需要提供参数，如果是POST请求，则将提交的数据作为参数发送，通常是JSON格式。

下面代码表示通过send发送一个请求：

xmlHttp.send();

如果是POST数据，如发送名/值对{foo:'bar'}到服务器，可以这样写：xmlHttp.send('{"foo":"bar"}');

如果只是简单的字符串，则将整个字符串作为参数传递即可，如传递"a=b"：xmlHttp.send('a=b');

六，总结

基本步骤就是：

1、创建XMLHTTPRequest对象。

2、定义状态变化时的处理函数。

3、创建请求。

4、发送请求。

巴特西

ajax数据请求的理解

最新文章

热门文章