區(qū)別：1、ajax的核心是通過(guò)xmlHttpRequest獲取非本頁(yè)內(nèi)容，而jsonp的核心是動(dòng)態(tài)添加script標(biāo)簽調(diào)用服務(wù)器提供的js腳本；2、jsonp只支持get請(qǐng)求，而ajax支持get和post請(qǐng)求。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

ajax和jsonp的調(diào)用方式很像，目的一樣，都是請(qǐng)求url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝。下面我們來(lái)了解一下jsonp和ajax，并介紹一下它們的區(qū)別。

一、Ajax工作原理

相當(dāng)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層(AJAX引擎)，使用戶(hù)操作與服務(wù)器響應(yīng)異步化。對(duì)于用戶(hù)請(qǐng)求ajax引擎會(huì)做一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理，不是所有請(qǐng)求都提交給服務(wù)器，當(dāng)需要從服務(wù)器讀取新數(shù)據(jù)時(shí)由Ajax引擎代為向服務(wù)器提交請(qǐng)求。AJAX最大優(yōu)點(diǎn)就是不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。

過(guò)程：

第一步：創(chuàng)建一個(gè)ajax引擎對(duì)象，IE6的是new ActiveXObject，其他瀏覽器是new一個(gè)xmlHttpRequest對(duì)象；

第二步：調(diào)用open方法啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送，open方法傳入三個(gè)參數(shù)：請(qǐng)求類(lèi)型，請(qǐng)求url和一個(gè)布爾值；

第三步：調(diào)用send方法發(fā)送；

第四步：處理回調(diào)函數(shù)onreadystatechange，當(dāng)readState = 4 （響應(yīng)數(shù)據(jù)完成），并且status=200（請(qǐng)求成功）時(shí)候處理響應(yīng)數(shù)據(jù)。

注意：回調(diào)函數(shù)要寫(xiě)在open（）和send（）之前。

二、Jsonp工作原理

動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，利用script標(biāo)簽src屬性訪問(wèn)沒(méi)有限制來(lái)實(shí)現(xiàn)跨域。

web客戶(hù)端通過(guò)與調(diào)用腳本一樣的方式來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件(后綴.json)，服務(wù)器動(dòng)態(tài)生成json文件目的是把客戶(hù)端需要的數(shù)據(jù)裝入進(jìn)去。

允許用戶(hù)傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住json數(shù)據(jù)，這樣客戶(hù)端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)。

三、Ajax 和 jsonp的區(qū)別

• ajax的核心是通過(guò)xmlHttpRequest獲取非本頁(yè)內(nèi)容；

  jsonp的核心是動(dòng)態(tài)添加script標(biāo)簽調(diào)用服務(wù)器提供的js腳本（后綴.json)。

• jsonp是一種方式或者說(shuō)非強(qiáng)制性的協(xié)議，ajax也不一定非要用json格式來(lái)傳遞數(shù)據(jù)。

• jsonp只支持get請(qǐng)求，ajax支持get和post請(qǐng)求。

【相關(guān)教程推薦：AJAX視頻教程】