10.19隨筆
阿新 • • 發佈：2018-10-22
get 成對 ESS 返回 width post 訪問 頁面 監聽 Ajax(阿賈克斯)
優點: 實現局部刷新(異步方式-頁面繼續操作,無需等待,無刷新)
缺點: 跨域(違背了同源策略)[Proxy代理,JSONP,CORS]
同源策略:
要訪問的地址：協議名相同,域名相同,端口相同
function ajax(url,method,data,success,fail){ //1.生成異步對象 var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest();//主流瀏覽器 }else{ xhr=new AcitiveXObject(‘Microsoft.XMLHTTP‘);//老IE } //2.創建連接（打開通道） xhr.open(method,url,true); //3.發送 xhr.send(data); //4.監聽事件，獲取結果 xhr.onreadystatechange=function(){ //readyState:發送狀態，4表示發送完畢 if(this.readyState===4){ //status：返回的結果，200表示成功 if(this.status==200){ //調用success回調函數 success(this.responseText);//responseText:結果 }else{ //調用fail回調函數 fail(this.status);//將失敗的狀態碼傳遞進去 } } } }
同步與異步 同步：打電話(等待,阻塞) var w=show(); console.log(w);//123 異步：發信息(非阻塞) show(function(w){ console.log(w);//123 }) .........下面的代碼繼續執行...................
補充
JSON.parse(); 字符串轉成對象
Ajsx.js代碼 /** *Ajax請求 * @param{String} url 請求地址 * @param{String} method 請求方式（GET/POST） * @param{Object} data 請求數據（POST） * @param{Function} success 成功的回調函數 * @param{Function} fail 失敗的回調函數 */function ajax(url,method,data,success,fail){ //1.生成異步對象 var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest();//主流瀏覽器 }else{ xhr=new AcitiveXObject(‘Microsoft.XMLHTTP‘);//老IE } //2.創建連接（打開通道） xhr.open(method,url,true); //3.發送 xhr.send(data); //4.監聽事件，獲取結果 xhr.onreadystatechange=function(){ //readyState:發送狀態，4表示發送完畢 if(this.readyState===4){ //status：返回的結果，200表示成功 if(this.status==200){ //調用success回調函數 success(this.responseText);//responseText:結果 }else{ //調用fail回調函數 fail(this.status);//將失敗的狀態碼傳遞進去 } } } }
10.19隨筆