AJAX
原生js操作ajax
1.創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();//ie5 ie6? xhr = new ActiveXObject(Microsoft.XMLHTTP")
2.打開鏈接
xhr.open(method,url,ansyn)? method:(get/post)? url:接口的路徑? ? ansyn:是否是異步（默認(rèn)異步true）
3.發(fā)送數(shù)據(jù)
xhr.send()
4.獲取數(shù)據(jù)，渲染頁面
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
//do something
}
}
屬性
xhr.status? 200? 404? 500
xhr.readyState? 【0,1,2,3,4】
xhr.statusText? ok? not found
xhr.responseText
xhr.responseXML
post和get的不同點(diǎn)
JQUERY 操作ajax的方法
1.最底層：$.ajax({
type:"get/post",
url:"路徑",
dataType:"xml/html/text/json/jsonp...",
data:{},
success:function(res,statusT,xhr){
返回的結(jié)果
},
error:function(){
}
})
$.ajax({url}).done(fn).fail(fn)
2.二層
$.get(url,[data],[fn],[dataType])
$.post(url,[data],[fn],[dataType])
jquery對象.load(url,[data],[fn])
3.最高層
$.getJSON(url,[data],[fn])
$.getSCRIPT(url,[fn])
接口:
http://datainfo.duapp.com/shopdata/datainfo.html
京東評論接口
https://club.jd.com/discussion/getProductPageImageCommentList.action?productId=1085328
典型的軟件三層模型：
視圖界面—數(shù)據(jù)處理—數(shù)據(jù)存儲
傳統(tǒng)軟件架構(gòu)下：后端語言直接操作界面，Ajax只是作為輔助的異步請求實(shí)現(xiàn)頁面的局部刷新技術(shù)；傳統(tǒng)前后端耦合軟件模型中，Ajax是指作為一個輔助功能。
前后端分離軟件架構(gòu)模型中：后端語言只是提供接口【接口是URL地址的格式進(jìn)行呈現(xiàn)的】
前端通過Ajax進(jìn)行調(diào)用，訪問URL接口地址，獲取數(shù)據(jù)并且渲染到頁面上。
http請求
超文本傳輸協(xié)議（HTTP，HyperText?Transfer?Protocol)
http是計(jì)算網(wǎng)絡(luò)通信的規(guī)則
http是一種無狀態(tài)的協(xié)議（不建立持久連接）
http請求的7個步驟
1.建立tcp連接(TCP（Transmission?Control?Protocol傳輸控制協(xié)議）)
2.web瀏覽器向web服務(wù)器發(fā)送請求命令
3.瀏覽器發(fā)送請求頭
4.服務(wù)器應(yīng)答
5.服務(wù)器發(fā)送應(yīng)答頭信息
6.服務(wù)發(fā)送數(shù)據(jù)
7.服務(wù)器斷開tcp
當(dāng)再瀏覽器地址欄鍵入http://www.baidu.com會發(fā)生什么情況
1.建立tcp鏈接
2.找域名對應(yīng)的ip
o再瀏覽器內(nèi)置緩存里面找
o再向上一級路由找
o再向上一級dns服務(wù)找
o在向。。。。。。。。
o找不到
3.向服務(wù)器發(fā)送請求頭.請求體
4.服務(wù)會應(yīng)答
5.服務(wù)器應(yīng)答頭
o服務(wù)器的信息
o狀態(tài)碼status：
§100初始化
§200成功
§300各種跳轉(zhuǎn)（你去別的地方有）
§400各種找不到
§500服務(wù)器內(nèi)部錯誤
§常見200?303?304?307?404?500?505
6.服務(wù)器?發(fā)送數(shù)據(jù)
7.服務(wù)器關(guān)閉tcp
8.讀取數(shù)據(jù)
9.解析成dom生成?虛擬dom樹
10.建立別的http請求?下載css?js圖片?其他文件
11.渲染頁面
12.重繪頁面
狀態(tài)碼：
1xx：信息響應(yīng)類，表示接收到請求并且繼續(xù)處理
2xx：處理成功響應(yīng)類，表示動作被成功接收、理解和接受200?Ok
3xx：重定向響應(yīng)類，為了完成指定的動作，必須接受進(jìn)一步處理
4xx：客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執(zhí)行404?NOT?FOUNT
5xx：服務(wù)端錯誤，服務(wù)器不能正確執(zhí)行一個正確的請求500
100——客戶必須繼續(xù)發(fā)出請求
101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
201-206都表示服務(wù)器成功處理了請求的狀態(tài)代碼，說明網(wǎng)頁可以正常訪問。
200（成功）服務(wù)器已成功處理了請求。通常，這表示服務(wù)器提供了請求的網(wǎng)頁。
201（已創(chuàng)建）請求成功且服務(wù)器已創(chuàng)建了新的資源。
202（已接受）服務(wù)器已接受了請求，但尚未對其進(jìn)行處理。
203（非授權(quán)信息）服務(wù)器已成功處理了請求，但返回了可能來自另一來源的信息。
204（無內(nèi)容）服務(wù)器成功處理了請求，但未返回任何內(nèi)容。
205（重置內(nèi)容）?服務(wù)器成功處理了請求，但未返回任何內(nèi)容。與204響應(yīng)不同，此響應(yīng)要求請求者重置文檔視圖（例如清除表單內(nèi)容以輸入新內(nèi)容）。
206（部分內(nèi)容）服務(wù)器成功處理了部分GET請求。
300-3007表示的意思是：要完成請求，您需要進(jìn)一步進(jìn)行操作。通常，這些狀態(tài)代碼是永遠(yuǎn)重定向的。
300（多種選擇）服務(wù)器根據(jù)請求可執(zhí)行多種操作。服務(wù)器可根據(jù)請求者?來選擇一項(xiàng)操作，或提供操作列表供其選擇。
301（永久移動）請求的網(wǎng)頁已被永久移動到新位置。服務(wù)器返回此響應(yīng)時，會自動將請求者轉(zhuǎn)到新位置。您應(yīng)使用此代碼通知搜索引擎蜘蛛網(wǎng)頁或網(wǎng)站已被永久移動到新位置。
302（臨時移動）?服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求。會自動將請求者轉(zhuǎn)到不同的位置。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引，因此您不應(yīng)使用此代碼來告訴搜索引擎頁面或網(wǎng)站已被移動。
303（查看其他位置）?當(dāng)請求者應(yīng)對不同的位置進(jìn)行單獨(dú)的GET請求以檢索響應(yīng)時，服務(wù)器會返回此代碼。對于除HEAD請求之外的所有請求，服務(wù)器會自動轉(zhuǎn)到其他位置。
304（未修改）?自從上次請求后，請求的網(wǎng)頁未被修改過。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。
如果網(wǎng)頁自請求者上次請求后再也沒有更改過，您應(yīng)當(dāng)將服務(wù)器配置為返回此響應(yīng)。由于服務(wù)器可以告訴?搜索引擎自從上次抓取后網(wǎng)頁沒有更改過，因此可節(jié)省帶寬和開銷。
305（使用代理）?請求者只能使用代理訪問請求的網(wǎng)頁。如果服務(wù)器返回此響應(yīng)，那么，服務(wù)器還會指明請求者應(yīng)當(dāng)使用的代理。
307（臨時重定向）服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求。會自動將請求者轉(zhuǎn)到不同的位置。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引，因此您不應(yīng)使用此代碼來告訴搜索引擎某個頁面或網(wǎng)站已被移動。
4XXHTTP狀態(tài)碼表示請求可能出錯，會妨礙服務(wù)器的處理。
400（錯誤請求）?服務(wù)器不理解請求的語法。
401（身份驗(yàn)證錯誤）?此頁要求授權(quán)。您可能不希望將此網(wǎng)頁納入索引。
403（禁止）?服務(wù)器拒絕請求。
404（未找到）?服務(wù)器找不到請求的網(wǎng)頁。例如，對于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會返回此代碼。
405（方法禁用）?禁用請求中指定的方法。
406（不接受）?無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁。
407（需要代理授權(quán)）?此狀態(tài)碼與401類似，但指定請求者必須授權(quán)使用代理。如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)當(dāng)使用代理。
408（請求超時）?服務(wù)器等候請求時發(fā)生超時。
409（沖突）?服務(wù)器在完成請求時發(fā)生沖突。服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息。服務(wù)器在響應(yīng)與前一個請求相沖突的PUT請求時可能會返回此代碼，以及兩個請求的差異列表。
410（已刪除）?請求的資源永久刪除后，服務(wù)器返回此響應(yīng)。該代碼與404（未找到）代碼相似，但在資源以前存在而現(xiàn)在不存在的情況下，有時會用來替代404代碼。如果資源已永久刪除，您應(yīng)當(dāng)使用301指定資源的新位置。
411（需要有效長度）?服務(wù)器不接受不含有效內(nèi)容長度標(biāo)頭字段的請求。
412（未滿足前提條件）?服務(wù)器未滿足請求者在請求中設(shè)置的其中一個前提條件。
413（請求實(shí)體過大）?服務(wù)器無法處理請求，因?yàn)檎埱髮?shí)體過大，超出服務(wù)器的處理能力。
414（請求的URI過長）?請求的URI（通常為網(wǎng)址）過長，服務(wù)器無法處理。
415（不支持的媒體類型）?請求的格式不受請求頁面的支持。
416（請求范圍不符合要求）?如果頁面無法提供請求的范圍，則服務(wù)器會返回此狀態(tài)碼。
417（未滿足期望值）?服務(wù)器未滿足"期望"請求標(biāo)頭字段的要求。
500至505表示的意思是：服務(wù)器在嘗試處理請求時發(fā)生內(nèi)部錯誤。這些錯誤可能是服務(wù)器本身的錯誤，而不是請求出錯。
500（服務(wù)器內(nèi)部錯誤）服務(wù)器遇到錯誤，無法完成請求。
501（尚未實(shí)施）?服務(wù)器不具備完成請求的功能。例如，當(dāng)服務(wù)器無法識別請求方法時，服務(wù)器可能會返回此代碼。
502（錯誤網(wǎng)關(guān)）?服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到了無效的響應(yīng)。
503（服務(wù)不可用）?目前無法使用服務(wù)器（由于超載或進(jìn)行停機(jī)維護(hù)）。通常，這只是一種暫時的狀態(tài)。
504（網(wǎng)關(guān)超時）服務(wù)器作為網(wǎng)關(guān)或代理，未及時從上游服務(wù)器接收請求。
505（HTTP版本不受支持）?服務(wù)器不支持請求中所使用的HTTP協(xié)議版本。
http請求組成
1.請求方法get?post等等
2.請求的url
3.請求頭
4.請求體
get?post區(qū)別
lget形式請求數(shù)據(jù)，參數(shù)會以明文的形式拼接在url地址的后面，請求的長度受到url地址格式的限制；
lpost形式請求數(shù)據(jù)，參數(shù)會打包到請求對象中進(jìn)行傳遞，不會顯示在url地址中。數(shù)據(jù)請求的安全性比較GET而言更加隱秘！
l
l什么時候用GET？什么時候用POST？
nget方式請求數(shù)據(jù)的效率相比POST方式較高！
n參數(shù)長度有一定的限制的情況下請求常規(guī)數(shù)據(jù)，使用get方式
n參數(shù)長度沒有限制或者包含二進(jìn)制數(shù)據(jù)或者包含安全要求的數(shù)據(jù)等，請求的數(shù)據(jù)涉及到安全性的情況下，使用Post方式
http響應(yīng)的的組成
1.文字和數(shù)字組成的狀態(tài)碼，顯示請求成功與否
2.響應(yīng)頭
3.響應(yīng)體（正文）
搭建PHP服務(wù)器
·安裝wampserver
·www文件夾就是網(wǎng)站內(nèi)容所在區(qū)域
·本地ip：127.0.0.1
·本地域名:localhost
端口號默認(rèn)80，如果apache無法運(yùn)行，就要看一下是不是端口被占用了，在cmd—>netstat–ano
可以修改端口，還可以讓占用80端口的應(yīng)用解除端口
修改端口
Apache-àhttpd.confàListen?80
什么ajax
Ajax全稱為：“Asynchronous[e's??kr?n?s]JavaScript?and?XML”（異步JavaScript和XML），
它并不是JavaScript的一種單一技術(shù)，而是利用了一系列交互式網(wǎng)頁應(yīng)用相關(guān)的技術(shù)所形成的結(jié)合體。使用Ajax，我們可以無刷新狀態(tài)更新頁面，并且實(shí)現(xiàn)異步提交，提升了用戶體驗(yàn)。
一．Ajax概述
Ajax這個概念是由Jesse?James?Garrett在2005年發(fā)明的。它本身不是單一技術(shù)，是一串技術(shù)的集合，主要有：
1.JavaScript，通過用戶或其他與瀏覽器相關(guān)事件捕獲交互行為；
2.XMLHttpRequest對象，通過這個對象可以在不中斷其它瀏覽器任務(wù)的情況下向服務(wù)器發(fā)送請求；
3.服務(wù)器上的文件，以XML、HTML或JSON格式保存文本數(shù)據(jù)；
4.其它JavaScript，解釋來自服務(wù)器的數(shù)據(jù)（比如PHP從MySQL獲取的數(shù)據(jù)）并將其呈現(xiàn)到頁面上。
由于Ajax包含眾多特性，優(yōu)勢與不足也非常明顯。
優(yōu)勢主要以下幾點(diǎn)：
1.不需要插件支持（一般瀏覽器且默認(rèn)開啟JavaScript即可）；
2.用戶體驗(yàn)極佳（不刷新頁面即可獲取可更新的數(shù)據(jù)）；
3.提升Web程序的性能（在傳遞數(shù)據(jù)方面做到按需放松，不必整體提交）；
4.減輕服務(wù)器和帶寬的負(fù)擔(dān)（將服務(wù)器的一些操作轉(zhuǎn)移到客戶端）；
而Ajax的不足由以下幾點(diǎn)：
1.不同版本的瀏覽器度XMLHttpRequest對象支持度不足(比如IE5之前)；
2.前進(jìn)、后退的功能被破壞（因?yàn)锳jax永遠(yuǎn)在當(dāng)前頁，不會幾率前后頁面）；
3.搜索引擎的支持度不夠（因?yàn)樗阉饕媾老x還不能理解JS引起變化數(shù)據(jù)的內(nèi)容）；
4.開發(fā)調(diào)試工具缺乏（相對于其他語言的工具集來說，JS或Ajax調(diào)試開發(fā)少的可憐）。
異步是什么？
使用Ajax最關(guān)鍵的地方，就是實(shí)現(xiàn)異步請求、接受響應(yīng)及執(zhí)行回調(diào)。那么異步與同步有什么區(qū)別呢？
我們普通的Web程序開發(fā)基本都是同步的，意為執(zhí)行一段程序才能執(zhí)行下一段，類似電話中的通話，一個電話接完才能接聽下個電話；而異步可以同時執(zhí)行多條任務(wù)，感覺有多條線路，類似于短信，不會因?yàn)榭匆粭l短信而停止接受另一條短信。Ajax也可以使用同步模式執(zhí)行，但同步的模式屬于阻塞模式，這樣會導(dǎo)致多條線路執(zhí)行時又必須一條一條執(zhí)行，會讓W(xué)eb頁面出現(xiàn)假死狀態(tài)，所以，一般Ajax大部分采用異步模式。
l異步操作和同步操作
n同步操作：不同的事情按照一定的順序進(jìn)行執(zhí)行，后一件事情必須等到前一個執(zhí)行完成才能執(zhí)行，否則會處于等待狀態(tài)。
u通常情況下，同一個模塊中的代碼是按照程序結(jié)構(gòu)順序執(zhí)行的，就是后一行代碼必須等待前一行代碼執(zhí)行完成才能執(zhí)行，否則處于阻塞狀態(tài)。
n異步操作：不同的事情在執(zhí)行過程中，同時執(zhí)行。不分前后順序
u在程序代碼執(zhí)行過程中，后一行代碼不會等待前一行代碼執(zhí)行完成再去執(zhí)行，而是直接執(zhí)行，表現(xiàn)出不同行的代碼同時執(zhí)行的效果。
如何實(shí)現(xiàn)ajax呢？
1.運(yùn)用html和css實(shí)現(xiàn)頁面，表達(dá)信息
2.運(yùn)用XMLHttpRequest和web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換
3.運(yùn)用javascript操作DOM，實(shí)現(xiàn)動態(tài)局部刷新
l核心步驟：1.定義對象2.發(fā)送數(shù)據(jù)3.處理響應(yīng)4.DOM渲染
創(chuàng)建一個XMLHttpRequest對象
XMLHttpRequest是AJAX的基礎(chǔ)。
XMLHttpRequest對象用于和服務(wù)器交換數(shù)據(jù)。
所有現(xiàn)代瀏覽器均支持XMLHttpRequest對象（IE5和IE6使用ActiveXObject）。
XMLHttpRequest用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
1，創(chuàng)建XMLHttpRequest對象的語法
varxhr=newXMLHttpRequest();
所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari以及Opera）均內(nèi)建XMLHttpRequest對象。
老版本的Internet?Explorer（IE5和IE6）使用ActiveX對象：
varxhr=new?ActiveXObject("Microsoft.XMLHTTP");
為了應(yīng)對所有的現(xiàn)代瀏覽器，包括IE5和IE6，請檢查瀏覽器是否支持XMLHttpRequest對象。如果支持，則創(chuàng)建XMLHttpRequest對象。如果不支持，則創(chuàng)建ActiveXObject：
var?xhr;
if?(window.XMLHttpRequest)
{//?code?for?IE7+,?Firefox,?Chrome,?Opera,?Safari
xhr=new?XMLHttpRequest();
}
else
{//?code?for?IE6,?IE5
xhr=new?ActiveXObject("Microsoft.XMLHTTP");
}
如需將請求發(fā)送到服務(wù)器，我們使用XMLHttpRequest對象的open()和send()方法：
方法
描述
open(method,url,async)
規(guī)定請求的類型、URL以及是否異步處理請求。
·method：請求的類型；GET或POST
·url：文件在服務(wù)器上的位置
·async：true（異步默認(rèn)）或false（同步）
send(string)
將請求發(fā)送到服務(wù)器。
·string：僅用于POST請求
2,打開鏈接open（method,url,asny);
xhr.open("GET/POST","url?params1=some?ms2=somm2",true);
3,發(fā)送send（"params1=some?ms2=somm2"）;可以為空post的時候可以再添加
如果需要像HTML表單那樣POST數(shù)據(jù)，請使用setRequestHeader()來添加HTTP頭。然后在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("name="+uname.value);//發(fā)送數(shù)據(jù)
//?post請求需要發(fā)一個header
4,監(jiān)聽readyStatestatus
xhr.onreadystatechange=function(){//當(dāng)XHR狀態(tài)方式改變時
if(xhr.status==200&&xhr.readyState==4){//如果http的狀態(tài)碼200(請求成功)?xhr的狀態(tài)是4（成功狀態(tài)）
console.log(xhr.responseText)
}
}
如需獲得來自服務(wù)器的響應(yīng)，請使用XMLHttpRequest對象的responseText或responseXML屬性
Request請求response響應(yīng)
屬性
描述
responseText
獲得字符串形式的響應(yīng)數(shù)據(jù)。如果來自服務(wù)器的響應(yīng)并非XML，請使用responseText屬性。
responseXML
獲得XML形式的響應(yīng)數(shù)據(jù)。如果來自服務(wù)器的響應(yīng)是XML，而且需要作為XML對象進(jìn)行解析，請使用responseXML屬性
XMLHttpRequest對象的三個重要的屬性：
1，onreadystatchange事件
當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng)readyState改變時，就會觸發(fā)onreadystatechange事件。
readyState屬性存有XMLHttpRequest的狀態(tài)信息。
2.readyState存有XMLHttpRequest的狀態(tài)。從0到4發(fā)生變化。
XMLHTTP的readyState值含義：
·0－未初始化，即尚未調(diào)用open。
·1－初始化，即尚未調(diào)用send。
·2－發(fā)送數(shù)據(jù)，即已經(jīng)調(diào)用send。
·3－數(shù)據(jù)傳送中。
·4－完成。
4.status狀態(tài)碼在前面已經(jīng)說過
特別注意status?==?200????ok
注意問題：
1.兼容性問題【XmlHttpRequest對象的兼容性】
2.狀態(tài)碼【readyState[0.1.2.3.4],?status[200,402,403,404,?500]】
3.DOM操作【原生JS對于標(biāo)簽、樣式、屬性、內(nèi)容的增刪改查】
跨域：
JavaScript出于安全方面的考慮,不允許跨域調(diào)用其他頁面的對象。
先來看看哪些情況下才存在跨域的問題：
編號
URL
說明
是否允許通信
1
http://www.a.com/b.js同一域名下
允許
2
http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夾
允許
3
http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名，不同端口
不允許
4
http://www.a.com/a.js
https://www.a.com/b.js同一域名，不同協(xié)議
不允許
5
http://www.a.com/a.js
http://70.32.92.74/b.js域名和域名對應(yīng)ip
不允許
6
http://www.a.com/a.js
http://script.a.com/b.js主域相同，子域不同
不允許
7
http://www.a.com/a.js
http://a.com/b.js同一域名，不同二級域名（同上）
不允許（cookie這種情況下也不允許訪問）
8
http://www.a.com/a.js
http://www.b.com/b.js不同域名
不允許
跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
同源策略:
瀏覽器有一個很重要的概念——同源策略(Same-Origin?Policy)。所謂同源是指，域名，協(xié)議，端口相同。不同源的客戶端腳本(javascript、ActionScript)在沒明確授權(quán)的情況下，不能讀寫對方的資源。
為什么跨域?
為了讓某些數(shù)據(jù)實(shí)現(xiàn)不同域名上的共享，以達(dá)到數(shù)據(jù)共用提高處理效率的目的，需要對部分?jǐn)?shù)據(jù)進(jìn)行跨域訪問！
如何實(shí)現(xiàn)跨域?
1、JSONP：
JSONP(JSON?with?Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。(不支持post請求)
核心：通過script標(biāo)簽的src屬性，進(jìn)行域名的包裝來完成跨域數(shù)據(jù)的訪問。Src來模擬數(shù)據(jù)的來源，通過和要訪問的服務(wù)器的域名一致，進(jìn)行同源數(shù)據(jù)的訪問，間接實(shí)現(xiàn)的跨域數(shù)據(jù)訪問。
2、代理：
例如www.123.com/index.html需要調(diào)用www.456.com/server.php，可以寫一個接口www.123.com/server.php，由這個接口在后端去調(diào)用www.456.com/server.php并拿到返回值，然后再返回給index.html，這就是一個代理的模式。相當(dāng)于繞過了瀏覽器端，自然就不存在跨域問題。
3、PHP端修改header（XHR2方式）ie10以下版本不支持
在php接口腳本中加入以下兩句即可：
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
我們通常采用JSONP的方法來實(shí)現(xiàn)跨域.
json與jsonp的區(qū)別：
json是一種數(shù)據(jù)格式，jsonp是數(shù)據(jù)訪問的方式
原生js跨域:原生js中,通過動態(tài)增加script標(biāo)簽,指定src屬性進(jìn)行數(shù)據(jù)的跨域訪問.
面試題：
1.什么是同源策略.
2.簡單說下原生js是怎么跨域的？
答題點(diǎn)：1）原生js通常使用jsonp進(jìn)行跨域
2）jsonp跨域的操作過程
3.什么是jsonp，json與jsonp的區(qū)別
Jquery??方法
load()方法
jQuery對Ajax做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器兼容性。對于封裝的方式，jQuery采用了三層封裝：最底層的封裝方法為：$.ajax()，而通過這層封裝了第二層有三種方法：.load()、$.get()和$.post()，?最高層是$.getScript()和$.getJSON()方法。
.load()方法可以參數(shù)三個參數(shù)：
load(參數(shù)1，參數(shù)2，參數(shù)3)
1，參數(shù)1：url必需的URL,規(guī)定希望加載的url地址
2，data可選，與請求一同發(fā)送的key/value數(shù)據(jù)，參數(shù)類型為Object、
3，callback可選，load方法完成后所執(zhí)行的回調(diào)函數(shù)，參數(shù)類型為函數(shù)Function。
如果想讓Ajax異步載入一段HTML內(nèi)容，我們只需要一個HTML請求的url即可。
//HTML
//jQuery?$('input').click(function()?{
$('#box').load('test.html');
});
如果想對載入的HTML進(jìn)行篩選，那么只要在url參數(shù)后面跟著一個選擇器即可。
//帶選擇器的url?$('input').click(function()?{
$('#box').load('test.html?.my');
});
如果是服務(wù)器文件，比如.php。一般不僅需要載入數(shù)據(jù)，還需要向服務(wù)器提交數(shù)據(jù)，那么我們就可以使用第二個可選參數(shù)data。向服務(wù)器提交數(shù)據(jù)有兩種方式：get和post。
//不傳遞data，則默認(rèn)get方式$('input').click(function()?{
$('#box').load('test.php?url=qkt');
});
//get方式接受的PHP
if($_GET['url']?=='qkt')?{
echo'前端學(xué)習(xí)官網(wǎng)';
}else{
echo'其他網(wǎng)站';
}
}
?>
//傳遞data，則為post方式$('input').click(function()?{
$('#box').load('test.php',?{?url?:'qkt'
});
});
//post方式接受的PHP
if($_POST['url']?=='qkt')?{
echo'前端學(xué)習(xí)官網(wǎng)';
}else{
echo'其他網(wǎng)站';
}
?>
在Ajax數(shù)據(jù)載入完畢之后，就能執(zhí)行回調(diào)函數(shù)callback，也就是第三個參數(shù)。
回調(diào)函數(shù)也可以傳遞三個可選參數(shù)：
responseText（請求返回的結(jié)果）=====>??js???responseText、
statusText（請求狀態(tài))======>?js??status（字符串success/error）、
xhr（XMLHttpRequest對象）=====>?js??XMLHttpRequest對象。
$('input').click(function()?{
$('#box').load('test.php',?{?url?:'qkt'
},function(response,?status,?xhr)?{
alert('返回的值為：'+?response?+'，狀態(tài)為：'+?status?+'，
狀態(tài)是：'+?xhr.statusText);
});
});
注意：status得到的值，如果成功返回?cái)?shù)據(jù)則為：success，否則為：error。
XMLHttpRequest對象屬于JavaScript范疇，可以調(diào)用一些屬性如下：
屬性名說明
responseText作為響應(yīng)主體被返回的文本
responseXML如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml"，
返回包含響應(yīng)數(shù)據(jù)的XML?DOM文檔
status響應(yīng)的HTTP狀態(tài)
statusTextHTTP狀態(tài)的說明
如果成功返回?cái)?shù)據(jù)，那么xhr對象的statusText屬性則返回'OK'字符串。除了'OK'的狀態(tài)字符串，statusText屬性還提供了一系列其他的值，如下：
HTTP狀態(tài)碼狀態(tài)字符串說明
200OK服務(wù)器成功返回了頁面
400Bad?Request語法錯誤導(dǎo)致服務(wù)器不識別
401Unauthorized請求需要用戶認(rèn)證
404Not?found指定的URL在服務(wù)器上找不到
500Internal?Server?Error服務(wù)器遇到意外錯誤，無法完成請求
503ServiceUnavailable由于服務(wù)器過載或維護(hù)導(dǎo)致無法完成請求
$.get()和$.post()
.load()方法是局部方法，因?yàn)樗枰粋€包含元素的jQuery對象作為前綴。而$.get()和$.post()是全局方法，無須指定某個元素。對于用途而言，.load()適合做靜態(tài)文件的異步獲取，而對于需要傳遞參數(shù)到服務(wù)器頁面的，$.get()和$.post()更加合適。
GET---從指定的資源請求數(shù)據(jù)
POST---向指定的資源提交要處理的數(shù)據(jù)
GET基本上用于從服務(wù)器獲的（取回）數(shù)據(jù)。注意：GET方法可能返回緩存的數(shù)據(jù)
POST也可以用于從服務(wù)器獲取數(shù)據(jù)，不過POST方法不會緩存數(shù)據(jù)，并且常用于連同請求一起發(fā)送數(shù)據(jù)。
語法：
$.get(url,[data],[callback],[type])
url:必需待載入頁面的URL地址
data:可選待發(fā)送?Key/value?參數(shù)。
callback:可選載入成功時回調(diào)函數(shù)。
type:可選返回內(nèi)容格式，xml,?html,?script,?json,?text,?_default。
$.get()方法有四個參數(shù)，前面三個參數(shù)和.load()一樣，多了一個第四參數(shù)type，即服務(wù)器返回的內(nèi)容格式：包括xml、html、script、json、jsonp和text。第一個參數(shù)為必選參數(shù)，后面三個為可選參數(shù)。
//使用$.get()異步返回html類型
$('input').click(function()?{
$.get('test.php',?{?url?:'qkt'
},function(response,?status,?xhr)?{if(status?=='success')?{
$('#box').html(response);
}
})//type自動轉(zhuǎn)為html
});
注意：第四參數(shù)type是指定異步返回的類型。一般情況下type參數(shù)是智能判斷，并不需要我們主動設(shè)置，如果主動設(shè)置，則會強(qiáng)行按照指定類型格式返回。
$.post()方法的使用和$.get()基本上一致，他們之間的區(qū)別也比較隱晦，基本都是背后的不同，在用戶使用上體現(xiàn)不出。具體區(qū)別如下：
1.GET請求是通過URL提交的，而POST請求則是HTTP消息實(shí)體提交的；
2.GET提交有大小限制（2KB），而POST方式不受限制；
3.GET方式會被緩存下來，可能有安全性問題，而POST沒有這個問題；
4.GET方式通過$_GET[]獲取，POST方式通過$_POST[]獲取。
$.post語法
$.post(URL,data,callback);
必需的URL參數(shù)規(guī)定您希望請求的URL。
可選的data參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。
可選的callback參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
//使用$.post()異步返回html
$.post('test.php',?{
url?:'qkt'
},function(response,?status,?xhr)?{?$('#box').html(response);
});
$.getScript()和$.getJSON()
jQuery提供了一組用于特定異步加載的方法：
$.getScript()，用于加載特定的JS文件；
$.getJSON()，用于專門加載JSON文件。
有時我們希望能夠特定的情況再加載JS文件，而不是一開始把所有JS文件都加載了，
這時使用$.getScript()方法。
語法:
$.getScript(url,callback)
url參數(shù)為服務(wù)器的請求地址，
callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。
//點(diǎn)擊按鈕后再加載JS文件
$('input').click(function()?{?$.getScript('test.js');
});
$.getJSON()方法是專門用于加載JSON文件的，使用方法和之前的類似。
語法:
$.getJSON(url,[data],callback)專門用來加載json文件的
url參數(shù)為請求加載json格式文件的服務(wù)器地址，
可選項(xiàng)data參數(shù)為請求時發(fā)送的數(shù)據(jù)，
callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。
$('input').click(function()?{
$.getJSON('test.json',function(response,?status,?xhr)?{?alert(response[0].url);
});
});
$.ajax()
$.ajax()是所有ajax方法中最底層的方法，所有其他方法都是基于$.ajax()方法的封裝。JQuery封裝的底層Ajax操作函數(shù)，更加側(cè)重于定制化選項(xiàng)，讓開發(fā)人員控制的細(xì)節(jié)方面更加精確。
語法:
$.ajax({name:value,?name:value,?...?})
這個方法只有一個參數(shù)，傳遞一個各個功能鍵值對的對象。
參數(shù)
類型
說明
url
String
發(fā)送請求的地址
type
String
請求方式：POST或GET，默認(rèn)GET
timeout
Number
設(shè)置請求超時的時間（毫秒）
data
Object或String
發(fā)送到服務(wù)器的數(shù)據(jù)，鍵值對字符串或?qū)ο?/p>
dataType
String
返回的數(shù)據(jù)類型，比如html、xml、json等
beforeSend
Function
發(fā)送請求前可修改XMLHttpRequest對象的函數(shù)
complete
Function
請求完成后調(diào)用的回調(diào)函數(shù)
success
Function
請求成功后調(diào)用的回調(diào)函數(shù)
error
Function
請求失敗時調(diào)用的回調(diào)函數(shù)
global
Boolean
默認(rèn)為true，表示是否觸發(fā)全局Ajax
cache
Boolean
設(shè)置瀏覽器緩存響應(yīng)，?默認(rèn)為true。?如果dataType類型為script或jsonp則為false。
Content
DOM
指定某個元素為與這個請求相關(guān)的所有回調(diào)函數(shù)的上下文。
contentType
String
指?定?請?求?內(nèi)?容?的?類?型?。?默?認(rèn)?為application/x-www-form-urlencoded。
async
Boolean
默認(rèn)為Boolean是否異步處理。默認(rèn)為true，false為同步處理
processData
true，
數(shù)據(jù)被處理為URL編碼格式。如果為false，則阻止將傳入的數(shù)據(jù)處理為URL編碼的格式。
DataFilter
Function
用來篩選響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)。
IfModified
Boolean
默認(rèn)為false，不進(jìn)行頭檢測。如果為true，進(jìn)行頭檢測，當(dāng)相應(yīng)內(nèi)容與上次請求改變時，請求被認(rèn)為是成功的。
Jsonp
String
指定一個查詢參數(shù)名稱來覆蓋默認(rèn)的jsonp回調(diào)參數(shù)名callback。
username
String
在HTTP認(rèn)證請求中使用的用戶名
password
String
在HTTP認(rèn)證請求中使用的密碼
scriptCharset
String
當(dāng)遠(yuǎn)程和本地內(nèi)容使用不同的字符集時，用來設(shè)置script和jsonp請求所使用的字符集。
xhr
Function
用來提供XHR實(shí)例自定義實(shí)現(xiàn)的回調(diào)函數(shù)
traditional
Boolean
默認(rèn)為false，不使用傳統(tǒng)風(fēng)格的參數(shù)序列化。?如為
$.ajax({
url:”http://.,.........”,
data:{
//參數(shù)
},
dataType:”GET/POST/JSONP/HTML/XML/JavaScript……”
success:function()?{},
error:function()?{}
})
登錄$.post
注冊$.post
商品列表$.getJSON/$.get
商品類型$.getJSON/$.get
商品詳情$.getJSON/$.get
購物車$.post/$.get
訂單數(shù)據(jù)$.post/$.get
訂單支付$.post
