Ajax用法
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 style="border:1px solid red;width:200px;height:200px;" id="mydiv"></div> <input type="button" onclick="Ajax()" 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 請求一樣
轉載于:https://www.cnblogs.com/123hll/p/6902997.html
總結
- 上一篇： QT 5 安装 vs2017 后，出现找
- 下一篇： Linux基础知识part3