標籤：success change 顯示 ext 情況 zhang div obj 封裝
ajax：Asynchronous JavaScript + XML的簡寫。使用者只要觸發某一個事件，在不重新整理整個網頁的情況下，非同步求伺服器端，補救伺服器上的最新資料。 XMLHttpRequest對象，是ajax技術的核心對象在使用XHR對象時： A:先必須調用open()方法，open()方法中有三個參數，第一個是請求方式，第二個uRL，第三個是，同步或一部方式。open()方法是準備發送請求。 B:在調用send()方法。發送請求。 C:當請求發送到伺服器端，伺服器端做出響應，將響應的資料自動填滿到XHR對象。 D:接收到響應之後，第一步檢查status屬性值，確定響應已經成功返回。1.get請求的非同步、同步模式，get請求時的參數放在URL後邊。 (1)建立XMLHttpRequest對象var xhr = new XMLHttpRequest(); (2).開啟請求，設定這一次的請求xhr.open(請求方式,請求地址,是否非同步); 請求方式：get/post 請求地址：url 是否非同步：true(非同步)/false(同步) (3).發送請求xhr.send(null); 參數： post請求時，將攜帶的參數放入send方法中 get請求時，將攜帶的參數放在url的後面 (4).處理請求結果 同步處理結果： if(xhr.status == 200) {//成功 alert(xhr.responseText); }else{//失敗 alert("請求失敗，狀態代碼：" + xhr.status + "，狀態資訊：" + xhr.statusText); } 非同步處理結果：通過onreadystatechange事件監聽readyState屬性的變化 xhr.onreadystatechange = function () { //判斷readyState屬性是否為4，4表示完成了請求 if(xhr.readyState == 4) { //判斷是否成功 if(xhr.status == 200) { alert(xhr.responseText); }else{//失敗 alert("請求失敗，狀態代碼：" + xhr.status + "，狀態資訊：" +xhr.statusText); } } }2.post請求的非同步、同步模式，post請求時參數放在send方法中。 (1)建立XMLHttpRequest對象 var xhr = new XMLHttpRequest(); (2)開啟請求 xhr.open("post","ajax",true); (3).佈建要求頭，類比表單進行提交 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); (4)發送請求 xhr.send("username=zhang&password=123456"); (5)處理返回結果 同步處理結果： if(xhr.status == 200) {//成功 alert(xhr.responseText); }else{//失敗 alert("請求失敗，狀態代碼：" + xhr.status + "，狀態資訊：" + xhr.statusText); } 非同步處理結果：通過onreadystatechange事件監聽readyState屬性的變化 xhr.onreadystatechange = function () { //判斷readyState屬性是否為4，4表示完成了請求 if(xhr.readyState == 4) { //判斷是否成功 if(xhr.status == 200) { alert(xhr.responseText); }else{//失敗 alert("請求失敗，狀態代碼：" + xhr.status + "，狀態資訊：" +xhr.statusText); } } }3.封裝ajax<body> <div id="div1"></div></body><script> /* method : 請求方式：get/post url : 請求地址：url param : 請求參數：param asynch : 同步非同步:asynch success:處理成功返回結果的函數 */ function ajax (obj) { //建立對象 var xhr = new XMLHttpRequest(); //判斷，若是get請求，將參數拼接在url後面 if(obj.method == ‘get‘) { //ajax?username=zhang&password=123456 //url本身可能已經攜帶了一部分參數：ajax?username=zhang& obj.url += obj.url.indexOf("?") == -1 ? "?" : "&"; obj.url += obj.param; } //開啟請求：若是get請求，參數要放在url後面，所以先判斷是哪種請求 xhr.open(obj.method , obj.url , obj.asynch); //發送請求：若是post請求，則將參數放入send方法中，而且在發送請求之前要佈建要求頭 if(obj.method == "post"){ xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(obj.param); }else { xhr.send(); } //處理結果：若是非同步，先判斷readyState屬性的狀態 if(obj.asynch){//非同步 xhr.onreadystatechange = function () { if(xhr.readyState == 4) { callback(); } } }else { callback(); } //將處理代碼封裝到單獨函數中 function callback() { if(xhr.status == 200) { obj.success(xhr.responseText); }else { alert("請求失敗，狀態代碼：" + xhr.status + "，狀態資訊："+xhr.statusText); } } } /* 將設定ajax請求的參數，放入一個json對象中，這樣就不必必須對應參數的位置 */ var obj = { method : "get", url : "ajax", asynch : true, param : "username=zhang&password=123456", success : function (res) {//形參：用來接收請求成功以後的結果 alert(res);//返回一個字串,json串 //將資料以下拉框的形式顯示在頁面上 //將json串轉為json對象 var resObj = eval("(" + res + ")"); console.log(resObj); //擷取所有的下拉選項值 var cuisines = resObj.cuisines; console.log(cuisines); //擷取div元素 var div = document.getElementById("div1"); //建立一個select var sel = document.createElement("select"); //sel.appendChild(new Option("--請選擇--" , "-1")); //通過給options傳入下標，來設定選項 sel.options[0] = new Option("--請選擇--" , "-1"); //遍曆數組 for(var i=0; i<=cuisines.length-1; i++) { sel.appendChild(new Option(cuisines[i],cuisines[i])); } //將select放入div中 div.appendChild(sel); } }; ajax(obj)；</script>Ajax學習總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
