AJAX——核心XMLHttpRequest對象

時間 2020-01-10

原文原文鏈接

AJAX你們已經都知道了，是爲了實現異步通信，提升用戶體驗度，而將不少舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）從新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中。這篇博客重點總結一下這個對象的使用。固然仍是按照經典的五步法來學習，之後在實踐中有更多更好的想法，會拿出來分享的！javascript

首先，須要先了解這個對象的屬性和方法：java

屬性ajax	說明跨域
readyState瀏覽器	表示XMLHttpRequest對象的狀態：0：未初始化。對象已建立，未調用open；緩存 1：open方法成功調用，但Sendf方法未調用；服務器 2：send方法已經調用，還沒有開始接受數據；app 3：正在接受數據。Http響應頭信息已經接受，但還沒有接收完成；框架 4：完成，即響應數據接受完成。dom
Onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼。200表示「成功」，404表示「未找到」，500表示「服務器內部錯誤」等。
statusText	服務器返回狀態的文本信息。

方法	說明
Open(string method,string url,boolean asynch, String username,string password)	指定和服務器端交互的HTTP方法，URL地址，即其餘請求信息； Method:表示http請求方法，通常使用"GET","POST". url：表示請求的服務器的地址； asynch：表示是否採用異步方法，true爲異步，false爲同步；後邊兩個能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼。
Send(content)	向服務器發出請求，若是採用異步方式，該方法會當即返回。 content能夠指定爲null表示不發送數據，其內容能夠是DOM對象，輸入流或字符串。
SetRequestHeader(String header,String Value)	設置HTTP請求中的指定頭部header的值爲value. 此方法需在open方法之後調用，通常在post方式中使用。
getAllResponseHeaders()	返回包含Http的全部響應頭信息，其中相應頭包括Content-length,date,uri等內容。返回值是一個字符串，包含全部頭信息，其中每一個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！
getResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	中止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。

對這個對象有了靜態了了解，知道它長的什麼樣子，有什麼功能了，下邊該咱們使用它了，固然這裏我也用五步法寫出代碼來：

第一步：建立XMLHttpRuquest對象：

[javascript] view plain copy print?

var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(xmlhttprequest==undefined || xmlhttprequest==null){
alert("XMLHttpRequest對象建立失敗！！");
}else{
this.xmlhttp=xmlhttprequest;
}

第二步：註冊回調方法

[javascript] view plain copy print?

xmlhttp.onreadystatechange=callback;

第三步：設置和服務器交互的相應參數

[javascript] view plain copy print?

xmlhttp.open("GET","ajax?name=" +userName,true);

第四步：設置向服務器端發送的數據，啓動和服務器端的交互

[javascript] view plain copy print?

xmlhttp.send(null);

第五步：判斷和服務器端的交互是否完成，還要判斷服務器端是否返回正確的數據

[javascript] view plain copy print?

//根基實際條件寫callback的功能代碼
function callback(){
if（xmlhttp.readState==4）{
//表示服務器的相應代碼是200；正確返回了數據
if(xmlhttp.status==200){
//純文本數據的接受方法
var message=xmlhttp.responseText;
//使用的前提是，服務器端須要設置content-type爲text/xml
//var domXml=xmlhttp.responseXML;
//其它代碼
}
}
}

經過這五步XMLHttpRequest基本上就建立好，能夠正常使用了，可是這是須要很是多的代碼的，總不能每次建立都寫這麼多吧？固然不是了，咱們學習了面向對象，咱們將其必要相同的部分都抽象出來，使之成爲一個獨立類，別的直接調用便可，在網上看了一個，感受寫的挺好：

[javascript] view plain copy print?

//類的構建定義，主要職責就是新建XMLHttpRequest對象
var MyXMLHttpRequest=function(){
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(xmlhttprequest == undefined || xmlhttprequest == null){
alert("XMLHttpRequest對象建立失敗！！");
}else{
this.xmlhttp=xmlhttprequest;
}
//用戶發送請求的方法
MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){
if(this.xmlhttp!=undefined && this.xmlhttp!=null){
method=method.toUpperCase();
if(method!="GET" && method!="POST"){
alert("HTTP的請求方法必須爲GET或POST!!!");
return;
}
if(url==null || url==undefined){
alert("HTTP的請求地址必須設置！");
return ;
}
var tempxmlhttp=this.xmlhttp;
this.xmlhttp.onreadystatechange=function(){
if(tempxmlhttp.readyState==4){
if(temxmlhttp.status==200){
var responseText=temxmlhttp.responseText;
var responseXML=temxmlhttp.reponseXML;
if(callback==undefined || callback==null){
alert("沒有設置處理數據正確返回的方法");
alert("返回的數據：" + responseText);
}else{
callback(responseText,responseXML);
}
}else{
if(failback==undefined ||failback==null){
alert("沒有設置處理數據返回失敗的處理方法！");
alert("HTTP的響應碼：" + tempxmlhttp.status + ",響應碼的文本信息：" + tempxmlhttp.statusText);
}else{
failback(tempxmlhttp.status,tempxmlhttp.statusText);
}
}
}
}
//解決緩存的轉換
if(url.indexOf("?")>=0){
url=url + "&t=" + (new Date()).valueOf();
}else{
url=url+"?+="+(new Date()).valueOf();
}
//解決跨域的問題
if(url.indexOf("http://")>=0){
url.replace("?","&");
url="Proxy?url=" +url;
}
this.xmlhttp.open(method,url,true);
//若是是POST方式，須要設置請求頭
if(method=="POST"){
this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");
}
this.xmlhttp.send(data);
}else{
alert("XMLHttpRequest對象建立失敗，沒法發送數據！");
}
MyXMLHttpRequest.prototype.abort=function(){
this.xmlhttp.abort();
}
}
}