Ajax的概述與實作過程

一、ajax概述

1、Ajax是Asynchronous（[ə'sɪŋkrənəs） JavaScript XML的簡寫，不是新技術，而是對現有技術的綜合利用。這項技術能夠向伺服器請求額外資料而無需刷新頁面，帶來了更好的使用者體驗

2、Ajax技術的核心是XMLHttpRequest物件（簡稱XHR），這是由微軟首先引入的特性。在XHR出現之前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的框架或內嵌框架。

3、XHR為向伺服器發送請求和解析伺服器回應提供了流暢的介面。能夠以非同步的方式從伺服器取得更多的信息，意味著使用者點擊後，可以不必刷新頁面也能獲取新資料。也就是說可以使用XHR物件取得新數據，然後再透過DOM將新數據插入頁面中

4、雖然Ajax名字中有XML的成分，但是呢，Ajax通訊與數據格式無關，這種技術就是無須刷新頁面即可從伺服器取得數據，但不一定是XML資料

二、操作：原生ajax和jQuery中封裝的ajax

1、原生ajax：

ajax作用：發送請求（設定請求setRequest） 接收回應(getResponse)

A、ajax原生方式發送請求：

Ajax中最重要也是最固定的部分就是http請求。

1)建立連線：（IE7以上版本都支援XMLHttpRequest）

var xhr = new XMLHttpRequest(); //建立非同步請求物件

2)Get請求：格式必須是（url?name1=value1&name2=value32 )

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

   

3)Post請求

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

   

4)get和post發送請求的區別：

4)get和post發送請求的區別：需要設定值的頭，而需要傳遞透過url進行，而post的資料在send方法中傳遞

B、ajax原生方式接收回應：

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

   

C、處理回應資料

/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};

   

jQuery中提供了專門的方法來序列化表單：

 $('form').serialize():   //序列化表單(即格式化key=val & key=val);

三、回應

我們需要監聽伺服器的回應狀態，然後對從伺服器取得的資料做相對應的處理。

1)    onreadystatechange是JavaScript事件中的一種，用於監控XMLHttpRequest的狀態

2)    readystate：回應狀態，返回XMLHTTP回應碼：200—伺服器成功返回網頁

            404—請求網頁上不存在