ajax 不重新加載整個網頁的情況下，更新部分網頁的技術
注意：ajax只有在服務器上運行才能生效，我在本地一般用phpstudy
優點：
1、優化用戶體驗
2、承擔了一部分本該服務器端的作業，減輕了服務器端的壓力
3、優化了服務器端和瀏覽器端的傳輸，減少了帶寬占用
缺點：
1、不支持回退按鈕
2、對搜索引擎的支持比較弱
3、安全問題，暴露了與服務器端互動的細節
XMLHttpRequest 物件
1、可以向服務器端發起請求并處理回應，而不阻塞用戶
2、可以在不更新整個網頁的的情況下，更新部分內容
如何使用ajax
1、創建XMLHttpRequest 物件
2、創建一個HTTP請求，并指定方式、URL（必填）
3、設定回應HTTP請求狀態變化的函式
4、發起請求
創建XMLHttpRequest 物件的兩種方式：(兼容各瀏覽器）
1、完整版
//封裝兼容各瀏覽器的xhr物件 function createXhr(){ //IE7+，其他瀏覽器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//回傳xhr物件的實體 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出現的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //回圈 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一個版本支持，即可退出回圈 break; }catch(e){ } } return xhr;//回傳創建的ActiveXObject物件 }else{ //都不支持 throw new Error("您的瀏覽器不支持XHR物件！"); } }
2、簡略版
function createXhr(){ //IE7+，其他瀏覽器 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ //IE7以下 return new ActiveXObject("Microsoft.XMLHTTP"); } }
測驗是否創建成功
//創建XMLHttpRequest物件 var xhr=createXhr(); console.log(xhr);
.open(method, url, async) 初始化請求并準備發送（只能對同一個域中使用相同埠和協議的URL發送請求）
method ：get 或者 post（ get 更快更簡單，但不能發送大量資料，無法使用快取檔案，而且沒有 post 穩定和可靠）
url ：必填（檔案在服務器上的位置，可以是任何型別，如.txt .xml .asp .php）
async：是否異步，true 異步，false 同步（同步時，服務器處理完成之間瀏覽器必須等待；異步時，服務器未處理完成前，瀏覽器可以進行其他操作）
get 準備請求直接加上引數，post 準備請求不在此加引數
//2、get創建請求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //post創建請求 xhr.open("post","./server/slider.json",true);
回應XMLHttpRequest 物件狀態變化的函式
.onreadystatechange 檢測狀態變化的函式
.readyState==4 回應內容決議完成
.status>=2==&&.status<300 異步呼叫成功
.status==304 請求資源沒有被修改，可以使用瀏覽器的快取
發送請求.send()
發送post請求需要傳入引數（以物件形式），發送get請求不需要，可以傳入null
post請求需要添加HTTP頭
.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//get發送請求 xhr.send(null); //post發送請求 xhr.send({user:"cyy",age:25}); //設定post請求頭 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
獲取到服務器回傳的資料
responseText 服務器回傳的資料的字串形式
responseXML 服務器回傳的資料的兼容DOM的檔案資料物件（XML形式）
status 回傳的狀態碼（如404表示沒找到，200表示已就緒）
status Text 狀態碼的字串資訊
//獲取服務器端回傳的資料 console.log(xhr.responseText);
查看network狀態
json 資料格式
全稱是javascript物件表示法，目的是為了取代笨重的XML格式
json 可以表示以下三種型別的值：
1、簡單值
與js語法相同，可以是字串、數值、布林值、null，但不支持undefined
字串必須用雙引號表示，不能用單引號
數值必須是十進制，不能是 NaN 和 Infinity
2、物件
鍵名必須放在雙引號中
同一個物件不應該出現兩個同名屬性
3、陣列
陣列或者物件最后一個成員，后面不能加逗號
示例：slider.json
{ "code": 0, "slider": [ { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat1.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat2.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat3.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat4.jpg" } ] }
.responseText 回傳的資料是字串，因此需要先轉為物件
使用.eval() 函式
//獲取服務器端回傳的資料 console.log(typeof xhr.responseText);//string //把字串轉為物件 console.log(eval("("+xhr.responseText+")"));
eval("("+xhr.responseText+")"); 的意思是強制轉化成json物件，之所以寫成 eval“("("+data+")");這種格式，原因是由于json是以”{}”的方式來開始以及結束的，在JavaScript中，它會被當成一個陳述句塊來處理，所以必須強制性的將它轉換成一種運算式，加上圓括號的目的是迫使eval函式在處理JavaScript代碼的時候強制將括號內的運算式轉化為物件，而不是作為陳述句來執行，舉一個例子，例如物件字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結束標記，那么{}將會被認為是執行了一句空陳述句，所以下面兩個執行結果是不同的：
console.log(eval("{}"));//undefined
console.log(eval("({})"));//{}
還有 json 物件的兩個方法：
1、 JSON.parse() 用于將json字串轉為物件
2、JSON.stringify 將一個值轉為JSON字串
由于eval() 可以執行不符合json格式的代碼，有可能會包含惡意代碼，所以不推薦使用，建議還是使用.parse()
data=https://www.cnblogs.com/chenyingying0/p/JSON.parse(xhr.responseText);
console.log(data.slider);
最后一步，渲染資料到頁面中
放出檔案index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0;} .wrap{width:250px;height:250px;margin:50px auto;overflow:hidden;} .banner{height:250px;width:1000px;} .banner a{width:250px;height:250px;display: block;float: left;} .banner a img{width:250px;height:250px;display: block;} </style> <script src="jquery.js"></script> </head> <body> <div class="wrap"> <div class="banner" id="banner"></div> </div> <script> //封裝兼容各瀏覽器的xhr物件 function createXhr(){ //IE7+，其他瀏覽器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//回傳xhr物件的實體 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出現的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //回圈 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一個版本支持，即可退出回圈 break; }catch(e){ } } return xhr;//回傳創建的ActiveXObject物件 }else{ //都不支持 throw new Error("您的瀏覽器不支持XHR物件！"); } } //1、創建XMLHttpRequest物件 var xhr=createXhr(),data; //回應XMLHttpRequest狀態變化的函式 //onreadystatechange監測狀態變化 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//回應內容決議完成 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ //xhr.status>=200&&xhr.status<300 表示交易成功 //xhr.status==304 表示快取后未發生改變，因此可以從快取中讀取 //獲取服務器端回傳的資料 //console.log(typeof xhr.responseText);//string //把字串轉為物件 data=JSON.parse(xhr.responseText); //console.log(data.slider); //渲染資料 renderData(); } } } //2、get創建請求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //get發送請求 xhr.send(null); //post創建請求 //xhr.open("post","./server/slider.json",true); //post發送請求 //xhr.send({user:"cyy",age:25}); //設定post請求頭 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //渲染資料 function renderData(){ var imgs=data.slider,str=""; var banner=document.getElementById("banner"); for(var i=0,len=imgs.length;i<len;i++){ //console.log(imgs[i]); str+="<a href='https://www.cnblogs.com/chenyingying0/p/"+imgs[i].linkUrl+"'><img src='https://www.cnblogs.com/chenyingying0/p/"+imgs[i].picUrl+"'></a>"; } console.log(str); banner.innerHTML=str; } </script> </body> </html>
效果圖（大概就是模擬獲取輪播圖）
jquery的ajax方法：
$.ajax()
$.get()
$.post()
$.getJson()
//jquery的$.ajax() $.ajax({ url:"./server/slider.json", //請求地址 type:"post", //請求方式，默認是get async:true, //異步同步，默認是true異步 dataType:"json", //回傳的資料格式 success:function(data){ //回應成功的操作 JQRenderData(data.slider); //data是回傳的資料 } }); function JQRenderData(data){ var str=""; $.each(data,function(index,obj){ str+="<a href='"+obj.linkUrl+"'><img src='"+obj.picUrl+"'></a>"; }); $("#banner2").html(str); }
$.each( obj, function(index, value){ } ) 方法，遍歷物件或陣列
index 陣列索引或者物件屬性名
value 陣列項或者物件屬性值
以下是用javascript 和 jqeury 兩種方式實作的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0;} .wrap{width:250px;height:250px;margin:50px auto;overflow:hidden;} .banner{height:250px;width:1000px;} .banner a{width:250px;height:250px;display: block;float: left;} .banner a img{width:250px;height:250px;display: block;} </style> <script src="jquery.js"></script> </head> <body> <div class="wrap"> <div class="banner" id="banner"></div> </div> <div class="wrap"> <div class="banner" id="banner2"></div> </div> <script> //封裝兼容各瀏覽器的xhr物件 function createXhr(){ //IE7+，其他瀏覽器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//回傳xhr物件的實體 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出現的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //回圈 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一個版本支持，即可退出回圈 break; }catch(e){ } } return xhr;//回傳創建的ActiveXObject物件 }else{ //都不支持 throw new Error("您的瀏覽器不支持XHR物件！"); } } //1、創建XMLHttpRequest物件 var xhr=createXhr(),data; //回應XMLHttpRequest狀態變化的函式 //onreadystatechange監測狀態變化 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//回應內容決議完成 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ //xhr.status>=200&&xhr.status<300 表示交易成功 //xhr.status==304 表示快取后未發生改變，因此可以從快取中讀取 //獲取服務器端回傳的資料 //console.log(typeof xhr.responseText);//string //把字串轉為物件 data=JSON.parse(xhr.responseText); //console.log(data.slider); //渲染資料 renderData(); } } } //2、get創建請求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //get發送請求 xhr.send(null); //post創建請求 //xhr.open("post","./server/slider.json",true); //post發送請求 //xhr.send({user:"cyy",age:25}); //設定post請求頭 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //渲染資料 function renderData(){ var imgs=data.slider,str=""; var banner=document.getElementById("banner"); for(var i=0,len=imgs.length;i<len;i++){ //console.log(imgs[i]); str+="<a href='https://www.cnblogs.com/chenyingying0/p/"+imgs[i].linkUrl+"'><img src='https://www.cnblogs.com/chenyingying0/p/"+imgs[i].picUrl+"'></a>"; } console.log(str); banner.innerHTML=str; } </script> <script> //jquery的$.ajax() $.ajax({ url:"./server/slider.json", //請求地址 type:"post", //請求方式，默認是get async:true, //異步同步，默認是true異步 dataType:"json", //回傳的資料格式 success:function(data){ //回應成功的操作 JQRenderData(data.slider); //data是回傳的資料 } }); function JQRenderData(data){ var str=""; $.each(data,function(index,obj){ str+="<a href='https://www.cnblogs.com/chenyingying0/p/"+obj.linkUrl+"'><img src='https://www.cnblogs.com/chenyingying0/p/"+obj.picUrl+"'></a>"; }); $("#banner2").html(str); } </script> </body> </html>
什么是跨域：
同源策略：域名、協議、埠都相同
不符合同源策略的請求，就是跨域
跨域常用的解決方式：JSONP
JSONP ：JSON with padding （填充式json）
JSONP的原理：
直接用XMLHttpRequest 訪問不同域上的資料是不可以的，但是可以在頁面上引入不同域的 js 腳本（如 src 或者 href ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquery.js"></script> </head> <body> <script> /* 封裝JSONP 瀏覽器端給服務器端發送請求： http://www.baidu.com?jsonp=abc 服務器端回應請求： abc(json資料) */ function myJSONP(url,callback){ if(!url) return;//如果沒有url，則停止 //用陣列存盤10個字母 var arr=["a","b","c","d","e","f","g","h","i","j"], i1=Math.floor(Math.random()*arr.length),//隨機生成索引 i2=Math.floor(Math.random()*arr.length), i3=Math.floor(Math.random()*arr.length), name="mydata"+arr[i1]+arr[i2]+arr[i3];//隨機生成的請求函式名（屬性名） cbname="myJSONP."+name;//必須是函式名.請求函式名 //跨域url處理 //將請求函式名作為最后一個引數傳遞 if(url.indexOf("?")===-1){ //原來沒有引數 url+="?jsonp="+cbname;//引數名可自定義（此處是jsonp） }else{ //原來有引數 url+="&jsonp="+cbname; } console.log(url); //動態創建script標簽 var script=document.createElement("script"); //定義被腳本執行的回呼函式 myJSONP[name]=function(data){ try{ callback && callback(data);//如果有回呼，則執行回呼 }catch(e){ //報錯時 }finally{ //由于每次請求都會生成函式和script標簽，長此以往會污染函式 //因此每次結束時都要洗掉函式及變數 delete myJSONP[name]; script.parentNode.removeChild(script); } } script.src=url; document.getElementsByTagName("head")[0].appendChild(script); } //發送跨域請求 myJSONP("http://class.imooc.com/api/jsonp",function(data){ console.log(data); }); </script> </body> </html>
頁面回傳的資料
url演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7114.html
標籤：jQuery
上一篇：jQuery的影片以及擴展功能
下一篇：掛號平臺首頁開發（靜態頁面部分）