異步訪問技術Ajax(XMLHttpRequest)

時間 2019-11-12

標籤異步訪問技術 ajax xmlhttprequest 欄目 Ajax 简体版

原文原文鏈接

目錄javascript

AJAXhtml

XMLHttpRequest java

Ajax向服務器發送請求node

Ajax接收服務器響應jquery

AJAX - onreadystatechange 事件 ajax

使用 Callback 函數編程

一次Ajax請求過程瀏覽器

使用JQuery的AJAX獲取返回頭服務器

如下是基於原生javascript的ajax異步

AJAX

AJAX(Asynchronous JavaScript and XML) 異步的 JavaScript 和 XML，AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 是與服務器交換數據並更新部分網頁的技術，在不從新加載整個頁面的狀況下，更新網頁的部份內容。

傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個頁面。

在AJAX技術中，主要利用 JavaScript 的 XMLHttpRequest 對象來傳遞用戶界面上的數據到服務端並返回結果。XMLHttpRequest 對象用來傳遞經過HTTP傳遞的數據，一旦數據返回到客戶端就能夠馬上使用DOM技術來操做數據並顯示到網頁上。AJAX的最終目的是建立更好更快以及交互性更強的 Web 應用程序。

XMLHttpRequest

XMLHttpRequest 對象是 AJAX 的基礎。全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

建立XMLHttpRequest對象

var xmlhttp = new XMLHttpRequest();   //for ie6 以上

var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest){        // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else {                            // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Ajax向服務器發送請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和send() 方法

#GET請求
xmlhttp.open( "GET" , url , true/false );      #true表明異步，false表明同步
xmlhttp.send(); 


#POST請求
xmlhttp.open( "POST" , url , true/false );
xmlhttp.send(uname='admin'&pawd='pass');          #當是post請求是，send函數內填post提交的數據

Ajax接收服務器響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。

例：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

##################################################################

xmlDoc=xmlhttp.responseXML;          #得到服務器端響應的xml格式的數據
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

AJAX - onreadystatechange 事件

當請求被髮送到服務器，服務器對咱們的請求響應時，咱們須要執行一些基於響應的任務。也就是每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化

使用 Callback 函數

callback 回調函數是一種以參數形式傳遞函數給另外一個函數的函數。

若是你的網站上存在多個 AJAX 任務，那麼你應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，而後每一個ajax任務再編寫不一樣的執行成功後的回調函數callback。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc){             //標準的ajax函數
    if (window.XMLHttpRequest){            // IE7+, Firefox, Chrome, Opera, Safari 代碼
      xmlhttp=new XMLHttpRequest();
    }else{                                // IE6, IE5 代碼
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=cfunc;    //狀態改變時執行的函數
}
function myFunction()                   //callback回調函數
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
<body>
    <div id="myDiv"><h2>使用 AJAX 修改文本內容</h2></div>
    <button type="button" οnclick="myFunction()">修改內容</button>
</body>
</html>

一次Ajax請求過程

使用Ajax技術讀取服務器端的數據，並顯示在頁面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript">
        function foo(){
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.open("GET","1.txt",true);   #讀取本路徑下的1.txt文件
            xmlhttp.send();
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("my").innerHTML=xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <button id="btn" οnclick="foo()">肯定</button>
    <p id="my">hello,word!</p>
</body>
</html>

1.txt文件內容

AJAX

點擊肯定按鈕

使用JQuery的AJAX獲取返回頭

$.ajax({
    'url': 'xxx',
     success: function(data, status, xhr) { 
        console.log("Success:"+xhr.status+": "+xhr.statusText);
        console.log("############################");
        console.log(xhr.getAllResponseHeaders());
        console.log("############################");
        console.log(xhr.getResponseHeader("Content-Type"));
    }
});

參考文章：AJAX教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。