/*
* Ajax的核心操做對象是xmlHttpRequest
* 簡化操做步驟:實例化一個xmlHttpRequest對象 ==> 發送請求 ==> 接受響應 ==> 執行回調
*/javascript
實例化對象php
考慮到兼容問題,非IE5/IE6 使用 => new XMLHttpRequest();html
IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP); ☯神吶,請帶走IE吧!java
發送請求jquery
使用 XMLHttpRequest 對象的 open('GET',url,async) 和 send() 方法:ajax
❶ open() 有三個參數:chrome
分別爲http請求方式(get/post) ==》與 POST 相比,GET 更簡單也更快,POST 沒有數據量限制,不會緩存,相對安全json
http請求地址 ==》url(統一資源定位符)文件所在服務器的地址瀏覽器
async:true(異步)或 false(同步)緩存
❷send(string) string:僅用於 POST 請求
接受響應,執行回調
當readyState的值發生改變時,觸發readystatechange事件,事件中就能夠隨心所欲了
readyState==4 =>請求加載完成 / http的狀態爲200 =>響應成功
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>異步操做集合啦</title> <script type="text/javascript"> /* * Ajax的核心操做對象是xmlHttpRequest * 簡化操做步驟:實例化一個xmlHttpRequest對象 ==> 發送請求 ==> 接受響應 ==> 執行回調 */ var jsAjax = function() { var xmlHttpR = null; if(window.ActiveXObject) { //IE5/IE6把xmlHttpRequest封裝在window的子對象ActiveXObject中 xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP); } else if(window.XMLHttpRequest) { //非IE五、IE6 xmlHttpR = new XMLHttpRequest(); } if(xmlHttpR) { xmlHttpR.open("GET", "ajax.xml", true); xmlHttpR.onreadystatechange = function(e) { if(xmlHttpR.readyState == 4) { if(xmlHttpR.status == 200) { console.log(xmlHttpR.responseText); } } } xmlHttpR.send(null); } } </script> </head> <body> </body> </html>
<?xml version="1.0" encoding="utf-8"?> <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
/*
* js就是這麼複雜,一套行雲流水的操做下來,瀏覽器F5,哎,咋沒效果,不行,修改代碼,再刷,還有bug等着你! (∪。∪)。。。zzz 敲兩行jQuery放鬆一下!
* jQuery操做ajax用一個封裝的函數 $.ajax() 就能夠搞定,操做步驟及其簡化!!!
*/
經常使用參數
type:"get", //http請求方式,值爲 get/post 默認值爲get
url:"", //統一資源定位符 !!!重要參數
async:true, //值爲 true/false 默認值爲true,爲異步,ajax發送請求後,在等待server端返回的這個過程當中,會繼續執行ajax塊後面的腳本(異步思想),直到server端返回正確的結果纔會去執行success
dataType:"xml", //返回數據的類型 ,值爲 xml/html/script/json/jsonp/text
data:obj, //傳給sever的數據 能夠是字符串也能夠是對象(好比登錄時傳用戶名密碼)
cache:true, //默認爲true(當dataType爲script時,默認爲false),設置爲false將不會從瀏覽器緩存中加載請求信息
complete:function(){}, //請求完成後調用的回調函數(請求成功或失敗時均調用)
success:function(res){}, //成功時調用回調函數 !!!重要回調
error: function (err) {} //發生錯誤時調用回調函數
jquery封裝了 "jquery.ajax()" "jquery.post()" "jquery.get() " "jquery(selector).load()" "jquery.getJson()" "jquery.getScript()"
其實弄懂$.ajax()就行了,別的都是它延伸出來,具備某種特異功能,$.ajax是大一統,霸天下,廢話很少說,直接上實例,看註釋
$(".loadDom").load("ajax.html", function(responseText, textStatus, xmlHttpRequest) { /* * 經常使用與把某段文本(如 :html文檔) 嵌入當前文檔中,更逆天的是能夠把某文檔的某片斷加載進來 如$(".loadDom").load("load.htm div.test"). * load() 有四個參數: * ① url:能夠加入querystring ==》'login.php?uname="wbx_2018@qq.com"&pwd="jiubugaosuni"',很明顯這已然是get請求 * ② data:附帶參數就會轉換爲post請求,基本會省略 * ③ function:回調函數 ↙☜下左繼續分析 * * 回調函數也能夠攜帶三個參數: * ① responseText 服務端返回的文本 * ② textStatus 值爲success或error * ③ xmlHttpRequest 這對象就很少說了,原生的 */ console.log(responseText); }) $.get("ajax.json", { para1: "val1", para2: "val2" }, function(data, textStatus) { console.log(data); }, "json") //$.post("ajax.php",{ // para1: "val1", // para2: "val2" //}, function(data, textStatus) { // console.log(data); //},"json") $.getScript('ajax.js', function(data) { console.log(data); }); $.getJSON('ajax.json', function(data) { console.log(data); });
$.ajax({ type: "get", async: true, url: "ajax.xml", dataType: "xml", complete: function(data) { console.log(data); }, success: function(res) { //遍歷xml文檔 dom操做 var books=$(res).find("bookstore book"), $this, $htm=[]; $.each(books, function(index) { $this=$(this); $htm.push("第"+(index+1)+"本書: 《"+$this.find("title").text()+"》 --- "); $htm.push($this.find("author").text()); $htm.push(" ("+$this.find("year").text()+")<br>"); }); $("#test").append($htm.join("")); } });
注:在進行ajax訪問時也許會遇到頁面無效果或是報錯---XMLHttpRequest cannot load,出現這種狀況通常是瀏覽器禁止ajax本地訪問(chrome)。把文件部署到服務器不會出現該問題。解決方法:
1.可在 Chrome 快捷方式中添加啓動參數: --allow-file-access-from-files(前面加空格)
2.用HBuilder這類具備內置服務器的編輯器,直接運行便可
固然咱們能夠用瀏覽器提供的調試工具,搞清楚 阿賈克斯 的一舉一動,仍是