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:是否是異步（默認異步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的不同點
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只是作為輔助的異步請求實現(xiàn)頁面的局部刷新技術(shù)日熬；傳統(tǒng)前后端耦合軟件模型中栈虚，Ajax是指作為一個輔助功能畔塔。
前后端分離軟件架構(gòu)模型中：后端語言只是提供接口【接口是URL地址的格式進行呈現(xiàn)的】
前端通過Ajax進行調(diào)用庆亡，訪問URL接口地址今瀑，獲取數(shù)據(jù)并且渲染到頁面上欢唾。
http請求
超文本傳輸協(xié)議（HTTP搏予，HyperText?Transfer?Protocol)
http是計算網(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
當再瀏覽器地址欄鍵入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)類引谜，為了完成指定的動作牍陌，必須接受進一步處理
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ù)器已接受了請求，但尚未對其進行處理峡迷。
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表示的意思是：要完成請求模孩，您需要進一步進行操作尖阔。通常，這些狀態(tài)代碼是永遠重定向的榨咐。
300（多種選擇）服務(wù)器根據(jù)請求可執(zhí)行多種操作介却。服務(wù)器可根據(jù)請求者?來選擇一項操作，或提供操作列表供其選擇块茁。
301（永久移動）請求的網(wǎng)頁已被永久移動到新位置齿坷。服務(wù)器返回此響應(yīng)時，會自動將請求者轉(zhuǎn)到新位置数焊。您應(yīng)使用此代碼通知搜索引擎蜘蛛網(wǎng)頁或網(wǎng)站已被永久移動到新位置永淌。
302（臨時移動）?服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進行以后的請求佩耳。會自動將請求者轉(zhuǎn)到不同的位置遂蛀。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引，因此您不應(yīng)使用此代碼來告訴搜索引擎頁面或網(wǎng)站已被移動干厚。
303（查看其他位置）?當請求者應(yīng)對不同的位置進行單獨的GET請求以檢索響應(yīng)時李滴，服務(wù)器會返回此代碼。對于除HEAD請求之外的所有請求蛮瞄，服務(wù)器會自動轉(zhuǎn)到其他位置所坯。
304（未修改）?自從上次請求后，請求的網(wǎng)頁未被修改過挂捅。服務(wù)器返回此響應(yīng)時芹助，不會返回網(wǎng)頁內(nèi)容。
如果網(wǎng)頁自請求者上次請求后再也沒有更改過闲先，您應(yīng)當將服務(wù)器配置為返回此響應(yīng)状土。由于服務(wù)器可以告訴?搜索引擎自從上次抓取后網(wǎng)頁沒有更改過，因此可節(jié)省帶寬和開銷伺糠。
305（使用代理）?請求者只能使用代理訪問請求的網(wǎng)頁蒙谓。如果服務(wù)器返回此響應(yīng)，那么退盯，服務(wù)器還會指明請求者應(yīng)當使用的代理。
307（臨時重定向）服務(wù)器目前正從不同位置的網(wǎng)頁響應(yīng)請求泻肯，但請求者應(yīng)繼續(xù)使用原有位置來進行以后的請求渊迁。會自動將請求者轉(zhuǎn)到不同的位置。但由于搜索引擎會繼續(xù)抓取原有位置并將其編入索引灶挟，因此您不應(yīng)使用此代碼來告訴搜索引擎某個頁面或網(wǎng)站已被移動琉朽。
4XXHTTP狀態(tài)碼表示請求可能出錯，會妨礙服務(wù)器的處理稚铣。
400（錯誤請求）?服務(wù)器不理解請求的語法箱叁。
401（身份驗證錯誤）?此頁要求授權(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)當使用代理寞宫。
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)當使用301指定資源的新位置腻脏。
411（需要有效長度）?服務(wù)器不接受不含有效內(nèi)容長度標頭字段的請求鸦泳。
412（未滿足前提條件）?服務(wù)器未滿足請求者在請求中設(shè)置的其中一個前提條件。
413（請求實體過大）?服務(wù)器無法處理請求永品，因為請求實體過大做鹰，超出服務(wù)器的處理能力。
414（請求的URI過長）?請求的URI（通常為網(wǎng)址）過長鼎姐，服務(wù)器無法處理钾麸。
415（不支持的媒體類型）?請求的格式不受請求頁面的支持。
416（請求范圍不符合要求）?如果頁面無法提供請求的范圍炕桨，則服務(wù)器會返回此狀態(tài)碼饭尝。
417（未滿足期望值）?服務(wù)器未滿足"期望"請求標頭字段的要求。
500至505表示的意思是：服務(wù)器在嘗試處理請求時發(fā)生內(nèi)部錯誤献宫。這些錯誤可能是服務(wù)器本身的錯誤钥平，而不是請求出錯。
500（服務(wù)器內(nèi)部錯誤）服務(wù)器遇到錯誤姊途，無法完成請求涉瘾。
501（尚未實施）?服務(wù)器不具備完成請求的功能知态。例如，當服務(wù)器無法識別請求方法時立叛，服務(wù)器可能會返回此代碼负敏。
502（錯誤網(wǎng)關(guān)）?服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到了無效的響應(yīng)囚巴。
503（服務(wù)不可用）?目前無法使用服務(wù)器（由于超載或進行停機維護）原在。通常，這只是一種暫時的狀態(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ù)會打包到請求對象中進行傳遞，不會顯示在url地址中斑举。數(shù)據(jù)請求的安全性比較GET而言更加隱秘搅轿！
l
l什么時候用GET？什么時候用POST富玷？
nget方式請求數(shù)據(jù)的效率相比POST方式較高璧坟！
n參數(shù)長度有一定的限制的情況下請求常規(guī)數(shù)據(jù)，使用get方式
n參數(shù)長度沒有限制或者包含二進制數(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
端口號默認80励两，如果apache無法運行黎茎，就要看一下是不是端口被占用了，在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)更新頁面，并且實現(xià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)勢主要以下幾點：
1.不需要插件支持（一般瀏覽器且默認開啟JavaScript即可）倍权；
2.用戶體驗極佳（不刷新頁面即可獲取可更新的數(shù)據(jù)）；
3.提升Web程序的性能（在傳遞數(shù)據(jù)方面做到按需放松捞烟，不必整體提交）薄声；
4.減輕服務(wù)器和帶寬的負擔（將服務(wù)器的一些操作轉(zhuǎn)移到客戶端）；
而Ajax的不足由以下幾點：
1.不同版本的瀏覽器度XMLHttpRequest對象支持度不足(比如IE5之前)题画；
2.前進默辨、后退的功能被破壞（因為Ajax永遠在當前頁，不會幾率前后頁面）苍息；
3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解JS引起變化數(shù)據(jù)的內(nèi)容）缩幸；
4.開發(fā)調(diào)試工具缺乏（相對于其他語言的工具集來說，JS或Ajax調(diào)試開發(fā)少的可憐）档叔。
異步是什么桌粉？
使用Ajax最關(guān)鍵的地方，就是實現(xiàn)異步請求衙四、接受響應(yīng)及執(zhí)行回調(diào)铃肯。那么異步與同步有什么區(qū)別呢？
我們普通的Web程序開發(fā)基本都是同步的传蹈，意為執(zhí)行一段程序才能執(zhí)行下一段押逼，類似電話中的通話，一個電話接完才能接聽下個電話惦界；而異步可以同時執(zhí)行多條任務(wù)挑格，感覺有多條線路，類似于短信沾歪，不會因為看一條短信而停止接受另一條短信漂彤。Ajax也可以使用同步模式執(zhí)行，但同步的模式屬于阻塞模式，這樣會導致多條線路執(zhí)行時又必須一條一條執(zhí)行挫望，會讓Web頁面出現(xiàn)假死狀態(tài)立润，所以，一般Ajax大部分采用異步模式媳板。
l異步操作和同步操作
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í)行的效果仲器。
如何實現(xiàn)ajax呢？
1.運用html和css實現(xiàn)頁面仰冠，表達信息
2.運用XMLHttpRequest和web服務(wù)器進行數(shù)據(jù)的異步交換
3.運用javascript操作DOM乏冀，實現(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)頁的某部分進行更新肢扯。
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（異步默認）或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(){//當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對象進行解析，請使用responseXML屬性
XMLHttpRequest對象的三個重要的屬性：
1绞幌，onreadystatchange事件
當請求被發(fā)送到服務(wù)器時蕾哟，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當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對于標簽蚀腿、樣式、屬性扫外、內(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ù)實現(xiàn)不同域名上的共享，以達到數(shù)據(jù)共用提高處理效率的目的胧奔，需要對部分數(shù)據(jù)進行跨域訪問逊移！
如何實現(xiàn)跨域?
1、JSONP：
JSONP(JSON?with?Padding)是JSON的一種“使用模式”龙填，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題胳泉。(不支持post請求)
核心：通過script標簽的src屬性，進行域名的包裝來完成跨域數(shù)據(jù)的訪問岩遗。Src來模擬數(shù)據(jù)的來源扇商，通過和要訪問的服務(wù)器的域名一致，進行同源數(shù)據(jù)的訪問宿礁，間接實現(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涤姊，這就是一個代理的模式暇番。相當于繞過了瀏覽器端，自然就不存在跨域問題思喊。
3壁酬、PHP端修改header（XHR2方式）ie10以下版本不支持
在php接口腳本中加入以下兩句即可：
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
我們通常采用JSONP的方法來實現(xiàn)跨域.
json與jsonp的區(qū)別：
json是一種數(shù)據(jù)格式，jsonp是數(shù)據(jù)訪問的方式
原生js跨域:原生js中,通過動態(tài)增加script標簽,指定src屬性進行數(shù)據(jù)的跨域訪問.
面試題：
1.什么是同源策略.
2.簡單說下原生js是怎么跨域的恨课？
答題點：1）原生js通常使用jsonp進行跨域
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進行篩選，那么只要在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禁偎，則默認get方式$('input').click(function()?{
$('#box').load('test.php?url=qkt');
});
//get方式接受的PHP
if($_GET['url']?=='qkt')?{
echo'前端學習官網(wǎng)';
}else{
echo'其他網(wǎng)站';
}
}
?>
//傳遞data，則為post方式$('input').click(function()?{
$('#box').load('test.php',?{?url?:'qkt'
});
});
//post方式接受的PHP
if($_POST['url']?=='qkt')?{
echo'前端學習官網(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得到的值，如果成功返回數(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)的說明
如果成功返回數(shù)據(jù)黔州，那么xhr對象的statusText屬性則返回'OK'字符串耍鬓。除了'OK'的狀態(tài)字符串，statusText屬性還提供了一系列其他的值流妻，如下：
HTTP狀態(tài)碼狀態(tài)字符串說明
200OK服務(wù)器成功返回了頁面
400Bad?Request語法錯誤導致服務(wù)器不識別
401Unauthorized請求需要用戶認證
404Not?found指定的URL在服務(wù)器上找不到
500Internal?Server?Error服務(wù)器遇到意外錯誤牲蜀，無法完成請求
503ServiceUnavailable由于服務(wù)器過載或維護導致無法完成請求
$.get()和$.post()
.load()方法是局部方法，因為他需要一個包含元素的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è)置箕憾，則會強行按照指定類型格式返回。
$.post()方法的使用和$.get()基本上一致拳昌，他們之間的區(qū)別也比較隱晦袭异，基本都是背后的不同，在用戶使用上體現(xiàn)不出炬藤。具體區(qū)別如下：
1.GET請求是通過URL提交的御铃，而POST請求則是HTTP消息實體提交的咬腋；
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ù)增拥。
//點擊按鈕后再加載JS文件
$('input').click(function()?{?$.getScript('test.js');
});
$.getJSON()方法是專門用于加載JSON文件的，使用方法和之前的類似寻歧。
語法:
$.getJSON(url,[data],callback)專門用來加載json文件的
url參數(shù)為請求加載json格式文件的服務(wù)器地址掌栅，
可選項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è)重于定制化選項齐莲，讓開發(fā)人員控制的細節(jié)方面更加精確。
語法:
$.ajax({name:value,?name:value,?...?})
這個方法只有一個參數(shù)磷箕，傳遞一個各個功能鍵值對的對象选酗。
參數(shù)
類型
說明
url
String
發(fā)送請求的地址
type
String
請求方式：POST或GET，默認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
默認為true氢烘，表示是否觸發(fā)全局Ajax
cache
Boolean
設(shè)置瀏覽器緩存響應(yīng)，?默認為true家厌。?如果dataType類型為script或jsonp則為false播玖。
Content
DOM
指定某個元素為與這個請求相關(guān)的所有回調(diào)函數(shù)的上下文。
contentType
String
指?定?請?求?內(nèi)?容?的?類?型?饭于。?默?認?為application/x-www-form-urlencoded蜀踏。
async
Boolean
默認為Boolean是否異步處理。默認為true掰吕，false為同步處理
processData
true果覆，
數(shù)據(jù)被處理為URL編碼格式。如果為false殖熟，則阻止將傳入的數(shù)據(jù)處理為URL編碼的格式局待。
DataFilter
Function
用來篩選響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)。
IfModified
Boolean
默認為false菱属，不進行頭檢測钳榨。如果為true，進行頭檢測纽门，當相應(yīng)內(nèi)容與上次請求改變時薛耻，請求被認為是成功的。
Jsonp
String
指定一個查詢參數(shù)名稱來覆蓋默認的jsonp回調(diào)參數(shù)名callback赏陵。
username
String
在HTTP認證請求中使用的用戶名
password
String
在HTTP認證請求中使用的密碼
scriptCharset
String
當遠程和本地內(nèi)容使用不同的字符集時饼齿，用來設(shè)置script和jsonp請求所使用的字符集。
xhr
Function
用來提供XHR實例自定義實現(xiàn)的回調(diào)函數(shù)
traditional
Boolean
默認為false蝙搔，不使用傳統(tǒ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
