Ajax概述與實現
- php中世界最好的语言原創
- 2018-04-24 15:47:001345瀏覽
這次帶給大家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概述與實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！