//原生方法 Ajax

　　封裝：整理一段代碼塊，把變化的東西抽取為參數（形參）

請求方式（get post）

請求的路徑(url)

參數條件 參數名=值&參數名=值

是否異步 true false

異步請求的目的：拿到數據

處理數據的方式（會話失敗） success 函數定義 都有一個形參 數據

會話失敗 error 函數定義 都有一個形參 會話的狀態 404 500

參數：對象 o={

method:"get" //"post" 請求方式 string

url:"http://xxx.xxx.xx:80/xxx.php" string

isAsyc:true //false boolean

//data: "參數名&值"

data:{參數名:值,參數名:值,參數名:值,參數名:值} 參數名&值

success:function(a){ a就代表將來所接收到的數據

//

}，

error:function(b){ b就帶表 404 500 3...

//

}

}

　　form表單提交表單項始終都是 同步

　　action 把表單元素要提交給服務端的地址

　　method 提交的方式 get或post（默認為get提交）

　　對於所要提交的表單項 要設置name屬性 name屬性就相當於參數的名字

　　 <form action="http://xxxxxxxxxxxxx.php" method="post"></form>

//原生方法 Ajax的封裝

function ajax(o) { //第一步:創建工具 var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); //標準 } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6 } //第二步和第三步 /*get請求可能會產生緩存，導致不能夠及時更新數據 原因： get請求會把第一次請求的地址記錄下來，若再次訪問時，地址若是一模一樣， 則會把第一次記錄下來的地址所緩存的結果返回。 解決get請求所產生的緩存：保證每次請求的的地址不一樣。若使用Math.random()有可能產生同一個數，故用

var parmater = HandlerData(o.data) //參數名=值&參數名=值&參數名&值 下面封裝的函數 if(o.method.toLowerCase() == "get") { xhr.open("get", o.url + "?new=" + time + "&" + parmater, o.isAsyc); //第二步（地址？（？起連接作用，後面為動態網址）參數名=參數值 &參數名=參數值 ） xhr.send(); //get請求不需要傳實參（第三步） } else { xhr.open("post", o.url, o.isAsyc); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //模擬表單體的方式提交（第二步） xhr.send(parmater); //post請求，若有提交的數據則傳（第三步） } //第四步 if(o.isAsyc) { //異步 xhr.onreadystatechange = function() { //xhr.onreadystatechange 事件（若異步則註冊該事件） if(xhr.readyState == 4) { //服務器數據完全接收，但不一定成功（讀取完成（並不是成功）） if(xhr.status == 200) { //訪問正常 會話成功（狀態碼 代表成功） o.success(xhr.responseText); //服務端返回的內容（得到響應的內容） } else { //會話失敗 o.error(xhr.status); //返回失敗狀態碼 } } } } else { //同步 if(xhr.readyState == 4) { if(xhr.status == 200) { //成功狀態碼 o.success(xhr.responseText); //服務端返回的內容（得到響應的內容） } else { o.error(xhr.status); //返回失敗狀態碼 404 500...... } } } } // data:{參數名:值,參數名:值,參數名:值,參數名:值} => "參數名=值&參數名=值..." function HandlerData(data) { var arr = []; for(var key in data) { //key 是參數名 //data[key] 值 var item = key + "=" + data[key] //"參數名=值" arr.push(item); } //return arr.join("&"); //參數名=值&參數名=值&參數名=值&參數名=值&參數名=值 var str = arr.join("&") return str; }

//for example

ajax({ method: "get/post", url: url, isAsyc: true, success: function(data){ var arr = JSON.parse(data); 　　fn(arr); }, error: function(mes){ alert("數據獲取錯誤") } })

JSON.stringify(): 將對象序列化為JSON字符串； JSON.parse(): 將JSON字符串解析為JavaScript對象。 xhr.readyState: 請求狀態； readyState是一個只讀屬性，用一個整數和對應的常量表示XMLHttpRequest請求當前所處的狀態。 xhr.responseText: 服務端返回的內容（古老叫法：報文？？？）； xhr.status: http狀態碼，只讀屬性； 常見http狀態碼： 200：訪問正常，一切正常； 301：moved Permanently，永久移動； 302：Move temporarily，暫時移動； 304：Not Modified，未修改； 307：Temporary Redirect，暫時重定向； 401：Unauthorized，未授權； 403：Forbidden，禁止訪問； 404：Not Found，未發現指定網址； 500：Internal Server Error，服務器發生錯誤。

//jQuery方法

$.ajax({ url: "../json/index/main.json", type: "get", dataType: "json", success: function(data) { //console.log(data);//檢查數據是否返回 }, error: function(wrong){ alert("this is wrong"); } });

//Angular $http方法

　　//簡單的 GET 請求，可以改為 POST 　　$http({ 　　 method: ‘GET‘, 　　 url: ‘/someUrl‘ 　　}).then(function successCallback(response) { 　　 // 請求成功執行代碼 　 }, function errorCallback(response) { 　　// 請求失敗執行代碼 　　});

　　//POST 與 GET 簡寫方法格式：

　　$http.get(‘/someUrl‘, config).then(successCallback, errorCallback);

　　$http.post(‘/someUrl‘, data, config).then(successCallback, errorCallback);

//fetch方法

http://www.51xuediannao.com/javascript/fetchdyf_fetchxydajaxqqfa__1142.html

/* 函數 對象 封裝：整理一段代碼塊，把變化的東西抽取為參數（形參） 請求方式（get post） 請求的路徑(url) 參數條件 參數名=值&參數名=值 是否異步 true false 異步請求的目的：拿到數據 處理數據的方式（會話失敗） success 函數定義 都有一個形參 數據 會話失敗 error 函數定義 都有一個形參 會話的狀態 404 500 參數：對象 o={ method:"get" //"post" 請求方式 string url:"http://xxx.xxx.xx:80/xxx.php" string isAsyc:true //false boolean //data: "參數名&值" data:{參數名:值,參數名:值,參數名:值,參數名:值} 參數名&值 success:function(a){ a就代表將來所接收到的數據 // }， error:function(b){ b就帶表 404 500 3... // } } */
/* form表單提交表單項始終都是 同步action 把表單元素要提交給服務端的地址method 提交的方式 get或post對於所要提交的表單項 要設置name屬性name屬性就相當於參數的名字<form action="http://127.0.0.1:8989/1215code/handler.php" method="post"><p id="content"></p><p><label for="userName">用戶名：</label><input name="uName" type="text" id="userName" /></p><p><label for="pwd">密碼：</label><input name="pd" type="password" id="pwd" /></p><!--這個按鈕可以像submit一樣使用--><button id="login">登錄</button> </form>*/function ajax(o) {//第一步:創建工具var xhr;if(window.XMLHttpRequest) {xhr = new XMLHttpRequest(); //標準} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6}//第二步和第三步/*get請求可能會產生緩存，導致不能夠及時更新數據原因就是：get請求會把第一次請求的地址記錄下來，若再次訪問時，地址若是一模一樣，則會把第一次記錄下來的地址所緩存的結果返回。解決：get請求所產生的緩存：保證每次請求的的地址不一樣。若使用Math.random()有可能產生同一個數，故用時間*/var date = new Date();var time = date.getTime();var parmater = HandlerData(o.data) //參數名=值&參數名=值&參數名&值 下面封裝的函數
if(o.method.toLowerCase() == "get") {xhr.open("get", o.url + "?new=" + time + "&" + parmater, o.isAsyc); //第二步（地址？（？起連接作用，後面為動態網址）參數名=參數值 &參數名=參數值 ）xhr.send(); //get請求不需要傳實參（第三步）} else {xhr.open("post", o.url, o.isAsyc);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //模擬表單體的方式提交（第二步）xhr.send(parmater); //post請求，若有提交的數據則傳（第三步）}//第四步if(o.isAsyc) { //異步xhr.onreadystatechange = function() {//xhr.onreadystatechange 事件（若異步則註冊該事件）if(xhr.readyState == 4) { //服務器數據完全接收，但不一定成功（讀取完成（並不是成功））if(xhr.status == 200) { //訪問正常 會話成功（狀態碼 代表成功）o.success(xhr.responseText); //服務端返回的內容（得到響應的內容）} else { //會話失敗o.error(xhr.status); //返回失敗狀態碼}}}} else { //同步if(xhr.readyState == 4) {if(xhr.status == 200) {//成功狀態碼o.success(xhr.responseText); //服務端返回的內容（得到響應的內容）} else {o.error(xhr.status); //返回失敗狀態碼 404 500......}}}}
// data:{參數名:值,參數名:值,參數名:值,參數名:值} => "參數名=值&參數名=值..."function HandlerData(data) {var arr = [];for(var key in data) {//key 是參數名//data[key] 值var item = key + "=" + data[key] //"參數名=值"arr.push(item);}//return arr.join("&");//參數名=值&參數名=值&參數名=值&參數名=值&參數名=值var str = arr.join("&")return str;}

請求後臺數據的幾種方式