區(qū)別:1、ajax的核心是通過xmlHttpRequest獲取非本頁內容,而jsonp的核心是動態(tài)添加script標簽調用服務器提供的js腳本;2、jsonp只支持get請求,而ajax支持get和post請求。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
ajax和jsonp的調用方式很像,目的一樣,都是請求url,然后把服務器返回的數(shù)據(jù)進行處理,因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝。下面我們來了解一下jsonp和ajax,并介紹一下它們的區(qū)別。
一、Ajax工作原理
相當于在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化。對于用戶請求ajax引擎會做一些數(shù)據(jù)驗證和數(shù)據(jù)處理,不是所有請求都提交給服務器,當需要從服務器讀取新數(shù)據(jù)時由Ajax引擎代為向服務器提交請求。AJAX最大優(yōu)點就是不刷新整個頁面的前提下與服務器通信維護數(shù)據(jù)。
過程:
第一步:創(chuàng)建一個ajax引擎對象,IE6的是new ActiveXObject,其他瀏覽器是new一個xmlHttpRequest對象;
第二步:調用open方法啟動一個請求以備發(fā)送,open方法傳入三個參數(shù):請求類型,請求url和一個布爾值;
第三步:調用send方法發(fā)送;
第四步:處理回調函數(shù)onreadystatechange,當readState = 4 (響應數(shù)據(jù)完成),并且status=200(請求成功)時候處理響應數(shù)據(jù)。
注意:回調函數(shù)要寫在open()和send()之前。
二、Jsonp工作原理
動態(tài)創(chuàng)建一個script標簽,利用script標簽src屬性訪問沒有限制來實現(xiàn)跨域。
web客戶端通過與調用腳本一樣的方式來調用跨域服務器上動態(tài)生成的js格式文件(后綴.json),服務器動態(tài)生成json文件目的是把客戶端需要的數(shù)據(jù)裝入進去。
允許用戶傳遞一個callback參數(shù)給服務端,然后服務端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住json數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)。
三、Ajax 和 jsonp的區(qū)別
-
ajax的核心是通過xmlHttpRequest獲取非本頁內容;
jsonp的核心是動態(tài)添加script標簽調用服務器提供的js腳本(后綴.json)。
-
jsonp是一種方式或者說非強制性的協(xié)議,ajax也不一定非要用json格式來傳遞數(shù)據(jù)。
-
jsonp只支持get請求,ajax支持get和post請求。
【相關教程推薦:AJAX視頻教程】