Ajax概述與實現

這次帶給大家Ajax概述與實現，Ajax概述與實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

Ajax是Asynchronous JavaScript XML的簡寫，不是新技術，而是對現有技術的綜合利用。本文詳細介紹了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=value2）

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請求的區別：

★get不需要設定請求頭，而post需要設定請求頭

★get的資料傳遞透過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中封裝的ajax

 $.ajax({
 type: 请求方式(get/post),
 url: "register.php",
 data: 发送请求数据,
 beforeSend:function(){返回false可以取消本次ajax请求},
 success:function(result){ 成功响应后调用 },
 error:function(err){ 错误响应时调用 },
 complete:function(){ 响应完成时调用(包括成功和失败) }
 });

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

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

#三、回應

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

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

2)    readystate：回應狀態，返回XMLHTTP請求的目前狀態

readyState 狀態	狀態說明
(0)未初始化	#此階段確認XMLHttpRequest物件是否創建，並為呼叫open()方法進行未初始化作好準備。值為0表示物件已經存在，否則瀏覽器會報錯－物件不存在。
(1)載入	#此階段對XMLHttpRequest物件進行初始化，即呼叫open()方法，根據參數(method,url,true)完成物件狀態的設定。並呼叫send()方法開始向服務端發送請求。值為1表示正在傳送請求至服務端。
(2)載入完成	此階段接收伺服器端的回應資料。但獲得的還只是服務端回應的原始數據，並不能直接在客戶端使用。值為2表示已接收完全部響應資料。並為下一階段對資料解析作好準備。
(3)互動	#此階段解析接收到的伺服器端回應資料。即根據伺服器端回應頭部回傳的MIME類型把資料轉換成能透過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。狀態3表示正在解析資料。
(4)完成	#此階段確認全部資料都已解析為客戶端可用的格式，解析已經完成。值為4表示資料解析完畢，可透過XMLHttpRequest物件的對應屬性取得資料。

3)    status：伺服器的回應碼

常見回應碼：200—伺服器成功回網頁

            404#            404#            404#       請求網頁不存在

            503—服務不可用

關於伺服器回應碼，詳情請看——網路傳輸協定（http協定）

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ajax登入功能的實作

Ajax實作非同步載入

以上是Ajax概述與實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！