/*
* Ajax的核心操作對象是xmlHttpRequest
* 簡化操作步驟：實例化一個xmlHttpRequest對象 ==> 發送請求 ==> 接受響應 ==> 執行回調
*/
實例化對象
考慮到兼容問題,非IE5/IE6 使用 => new XMLHttpRequest();
IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP); ☯神吶，請帶走IE吧！
發送請求
使用 XMLHttpRequest 對象的 open('GET',url,async) 和 send() 方法：
❶ open() 有三個參數：
分別為http請求方式(get/post) ==》與 POST 相比，GET 更簡單也更快，POST 沒有數據量限制，不會緩存，相對安全
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) {
//非IE5、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這類具有內置服務器的編輯器，直接運行即可
當然我們可以用瀏覽器提供的調試工具，搞清楚 阿賈克斯 的一舉一動，還是
