AJAX 异步交互 GET与POST

1.1 XMLHttpRequest 是 AJAX 的基础。

在web中异步访问是通过XMLHttpRequest对象来实现的。

XMLHttpRequest 对象（即：异步对象）

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象的属性和方法

属性/方法	说明
abort()	取消请求
getAllResponseHeaders()	获取响应的所有http头
getResponseHeader()	获取指定httpt头
open(method,url)	创建请求，method指定请求类型，如Get,Post等
send()	发送请求
setRequestHeader()	指定请求的http头
onreadystatechange	发生任何状态变化时的事件控制对象
readyState	请求状态 0：尚未初始化 1：正在发送请求 2：请求完成 3：请求成功，正接收数据 4：数据接收成功
responseText	服务器返回的文本
responseXML	服务器返回的XML，可以当作DOM处理
status	服务器返回的http请求响应值，常用的有： 200：请求成功 202：请求被接收，但处理未完成 400：错误的请求 404：资源未找到 500：内部服务器错误，如aspx代码错误

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 请求异步处理（未发送请求数据）：

 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject;

//创建XMLHttpRequest对象
function createXMLHttpRequest()
{
     var xmlhttp;
    if (window.XMLHttpRequest)
   {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
   }
  else if(window. ActiveXObject)
   {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
}
 
function startRequest(){
    createXMLHttpRequest();
    xmlHttp.open("GET","9-2.aspx"，true); //建立请求
    xmlHttp.onreadystatechange=function(){ //捕捉属性是否改变，如果改变了，就会触发onreadystatechange事件
        if(xmlHttp.readyState==4 && xmlHttp.status==200)   //判断请求状态和服务器返回的响应状态
        {
              alert("服务器返回:"+xmlHttp.responseText);   
            //返回结果通常有两种形式，一种是文本形式，存储在responseText中；另外一种是XML格式，存储在responseXML中。可以对前者进行字符串的处理，对后者进行DOM相关的处理。
        }
        xmlHttp.send(null);//发送请求
   }
}        
 
<input type="button" value="异步测试通信"  onclick="startRequest()"/>

　　

 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

　

方法	描述
open(method,url,async，user,password)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） user：可选的用户名 password：可选的密码
send(string)	将请求发送到服务器。 string：向服务器发送的数据（请求参数），用于POST, GET请求直接xmlHttp.sned(null) or  xmlHttp.sned()

 

1.2 GET和POST模式

在上面的实例中除了请求异步处理之外，并没有向服务器发送额外的数据。通常在HTML请求中有GET和POST两种模式，这两种模式都可以作为异步请求发送数据的方式。

如果是GET请求，则直接把数据放在异步请求的url地址中，而send()方法不发送任何数据

var queryString="firstName=isaac&birthday=0624";
var url="9-2.aspx?"+queryString+"&time="+new.Date().getTime();
xmlHttp.open("GET",url);
xmlHttp.send();　

 

如果是POST模式则是将数据统一在send()方法中发送，请求地址没有任何信息，并必须设置请求文件头（HTTP头）。

var queryString="firstName=isaac&birthday=0624";
var url="9-2.aspx";
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);　

 

 

值得注意的是：

xmlHttp.responseText    
如果返回数据有中文，会出现中文乱码的情况，那是因为异步对象xmlhttp在处理返回的responseText的时候，是按UTF-8编码的。
通常解决方法就是 用escape()对发送的数据进行编码，然后在返回的responseText上使用unescape()进行解码。
但在JS编程中通常不推荐使用escape()和unescape()，而推荐使用encodeURL()编码和decodeURL() 解码。

xmlHttp.send(encodeURL(encodeURL(queryString)));　//对发生的数据两次编码解决中文乱码问题

decodeURL(xmlHttp.responseText) //返回数据的时候解码