Ajax與jsonp

一、ajax的概念

　　AJAX = Asynchronous Javascript And XML

　　　　　(AJAX  =  異步  javascript  和 xml)

　　AJAX是一種無需從新加載整個網頁的狀況下，能更新部分網頁的技術。

二、工做原理

　　A、ajax就是js經過一個網站去加載數據，這個過程一般是用戶不可見的。

　　B、傳統的網頁(不適用ajax)若是須要更新內容，必須從新加載整個網頁。

三、關於同步與異步

　　同步須要等待返回結果才能繼續，異步沒必要等待，通常須要監聽異步的結果。

　　同步是在一條直線上的隊列，異步不在一個隊列上，各走各的

　　例如：

　　　　添加購物車問題。採起同步方式，每加入一項購物車，則須要等待頁面從新加載後再執行其餘操做。

　　　　而使用異步方式，則只需監聽，無需等待便可執行其餘操做。相對而言，異步加載優點更大，ajax優點因而可知。

四、建立ajax對象(以及兼容)

　(1)建立XMLHttpRequest對象　　

1 if(window.XMLHttpRequest){
2     var xhr=new XMLHttpRequest();
3 }else{
4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");
5 };

 

　(2)打開和服務器的連接

　　　open(method,url,asyn)

　　　參數：

　　　　method：string，請求的類型get或post

　　　　url：string，文件在服務器上的位置

　　　　asyn：Boolean，true(異步)或false（同步）

　　　　　　同步須要等待返回結果才能繼續，異步沒必要等待

　(3)發送給服務器

　　　xhr.send()將請求發送到服務器(get請求)

　　　xhr。send(string) 僅用於post請求

　(4)檢測服務器的請求狀態

　　　onreadystatechange事件(相應就緒狀態)

　　　readyState 和 status屬性存有XMLHttpRequest的狀態

　　　readyState 改變時就會觸發 onreadystatechange 事件

　　　readyState從0到4發生變化

　　　　0：請求未初始化

　　　　1：服務器鏈接已創建

　　　　2：請求已接收

　　　　三、請求處理中

　　　　四、請求已完成

　　status等於200：「OK」  

　　　　   等於404：未找到頁面

　　當readyStatus爲4而且status爲200時，表示相應已就緒。

五、XMLHttpRequest對象的重要性

　　如需得到來自服務器的響應，請使用XMLHttpRequest對象的：

　　　　responseText或responXML屬性

　　　　responseText得到字符串形式的響應數據

　　　　responseText得到XML形式的響應數據

　　　　如來自服務器的響應並不是XML，用responseText屬性reponseText返回字符串形式的響應，能夠這樣使用：Div.innerHTML = xhr.responseText;

六、關於ajax請求方式get和post的區別：

　　GET：更經常使用，更方便；性能好；明文發送數據，沒有post安全；數傳輸大小有限制，數據聽過URL傳遞，可是URL有必定的長度限制。、

　　POST：使用相對較少；性能只有get的1/3左右；比get稍微安全一點；沒有數據大小限制；

七、關於跨域

　　跨域能夠簡單的理解爲從一個域名訪問另外一個域名，處於安全考慮，瀏覽器不容許這麼作;

　　　　備註：img、script、iframe等元素的src屬性能夠直接跨域請求資源。

八、ajax跨域

　　一、可讓服務器去別的網站獲取內容返回頁面

　　二、給頁面的ajax一個url，ajax把這個url傳給服務器，由服務器去訪問地址。

九、jsonp跨域

　　jsonp就是利用script標籤的跨域能力請求資源，顯然目的仍是json，並且是跨域獲取利用js構造一個script標籤，把json的url賦給script的src屬性，把這個script插入到dom裏，讓瀏覽器去獲的到，callback({"name":"jack"})，callback是頁面存在的回調方法，參數就是獲得想獲得json回調方法要聽從服務端的月sing通常使用callback或者cb.