溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、什么是 Ajax?
Ajax，英文名 Asynchronous JavaScript and XML，也就是異步的 JavaScript 和 XML。它不是一門新的語言，而是一種使用現有標準的新方法，可以在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁內容，而且不需要任何瀏覽器插件，只需要用戶允許 JavaScript 在瀏覽器上執行。
2、Ajax 的工作原理
由上圖我們可以看到，瀏覽器首先 創建一個 XMLHttpRequest 對象，然后將這個對象發送給服務器；服務器響應并封裝一些數據回傳給瀏覽器；瀏覽器接收到服務器的響應數據，根據數據做出相應的操作，比如更新頁面內容等操作。
3、如何使用 Ajax?
①、創建 XMLHttpRequest 對象
②、編寫狀態響應函數
③、調用 open() 方法
④、發送請求 send()
下面我們通過一個簡單的例子來模擬 通過 Ajax 來更新頁面上的內容
第一步：首先新建一個 AjaxTest.html 文件
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/AjaxTest.js"></script>//這里引用了 AjaxTest.js 文件 </head> <body> <div id="mydiv"></div> <input type="button" value="發送Ajax 請求改變內容" /> //定義點擊事件 Ajax() </body> </html> |
頁面顯示效果如下：
第二步：新建一個 formInfo.json 文件，里面存放將要更新的內容
1 2 3 4 | { "name":"ys", "age":24 } |
第三步：新建一個 AjaxTest.js 文件，編寫 Ajax 代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | function Ajax(){ var xhr = null; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xhr=new XMLHttpRequest(); }else{ // IE6, IE5 瀏覽器執行代碼 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function(){ if (xhr.readyState==0 && xhr.status==200) { alert("請求未初始化"); } if (xhr.readyState==1 && xhr.status==200) { alert("服務器連接已建立"); } if (xhr.readyState==2 && xhr.status==200) { alert("請求已接收"); } if (xhr.readyState==3 && xhr.status==200) { alert("請求處理中"); } if (xhr.readyState==4 && xhr.status==200) { alert("請求已完成，且響應已就緒"); document.getElementById("mydiv").innerHTML=xhr.responseText; } } xhr.open("GET","../json/fromInfo.json",true); xhr.send(); } |
當我們點擊按鈕，界面會更新為：
4、對 Ajax 各個步驟的解析
①、創建 XMLHttpRequest 對象
通常來說，所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。所以創建 XMLHttpRequest 對象可以直接這樣
1 | var xhr=new XMLHttpRequest(); |
但是老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象，并不支持 XMLHttpRequest 對象。所以我們這樣創建：
1 | var xhr=new ActiveXObject("Microsoft.XMLHTTP"); |
那么綜合起來，創建 XMLHttpRequest 對象的方法為：
1 2 3 4 5 6 7 8 | var xhr = null; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xhr=new XMLHttpRequest(); }else{ // IE6, IE5 瀏覽器執行代碼 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } |
該對象的屬性為：
上面的例子我們可以看到 XMLHttpRequest 對象為：
②、編寫狀態響應函數
狀態響應函數也就是 onreadystatechange 事件
常見的 status 響應狀態碼：
③、調用 open() 方法
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()
send(content)
向服務器發出請求，如果采用異步方式，該方法會立即返回。content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串。
實際開發中，有很多開源的庫已經給我們封裝好了，我們直接用就行了。
1、jQuery 的 Ajax 請求：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $.ajax({ type : "post", //請求方式 url : "../json/fromInfo.json", //請求路徑 data : "", //傳輸到服務器的數據 cache : false, //是否有緩存 async : false, //同步和異步，false 表示異步 dataType : "json", //預期的服務器響應數據類型 beforeSend:function(xhr){ alert(xhr); alert('發送前'); }, success:function(data,textStatus,jqXHR){ alert(data); //json 文件中的數據，是一個 object 對象 alert(textStatus); //值為 success，表示成功狀態碼 alert(jqXHR); //這第三個參數封裝響應的一些信息 document.getElementById("mydiv").innerHTML=jqXHR.responseText; }, error:function(xhr,textStatus){ alert('錯誤'); alert(xhr); alert(textStatus); }, complete:function(){ alert('結束'); } }); |
對上面相應參數的解析：
2、jQuery 的 get 請求
$.get(url,data,success(response,status,xhr),dataType)
說明：url為請求地址，data為請求數據的列表，callback為請求成功后的回調函數，dataType 為服務器返回數據類型。第四個參數 dataType，如果不寫，默認返回字符串
1 2 3 4 5 6 7 8 | $.get( "../json/fromInfo.json", "", function(response,status,xhr){ alert(xhr.responseText); }, "json" ); |
3、jQuery 的 post 請求
$.post(url,data,success(response,status,xhr),dataType)
參數和 get 請求一樣
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
