json與jsonp知識(shí)小結(jié)(推薦)
json
1. json 的值可以是下面這些類型:
① 數(shù)字(整數(shù)或浮點(diǎn)數(shù)),比如123,1.23
② 字符串(在雙引號(hào)中)
③ 邏輯值(true 或 false)
④ 數(shù)組(在方括號(hào)中)
⑤ 對象(在花括號(hào)中)
⑥ null
2. json解析方法
① eval('(' + jsondata + ')' ); 使用時(shí)永遠(yuǎn)是不安全的,代碼注入
② JSON.parse(jsondata);
JSONLint json:字符串校驗(yàn)工具
3. jQuery 實(shí)現(xiàn)ajax
jQuery.ajax([settings])
type :類型
url :發(fā)送請求的地址
data :是一個(gè)對象,連同請求發(fā)送到服務(wù)器的數(shù)據(jù)
dataType :預(yù)期服務(wù)器返回的數(shù)據(jù)類型,如果不指定,jQuery 將自動(dòng)根據(jù)HTTP包MIME信息來智能判斷,一般我們采用json 格式,可以設(shè)置為”json”
success :是一個(gè)方法,請求成功后的的回調(diào)函數(shù),傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串
error :是一個(gè)方法,請求失敗時(shí)調(diào)用此函數(shù)。傳入 XMLHttpRequest 對象
jsonp
跨域
一個(gè)域名地址的組成:
http://www .abc.com :8080 / scripts/jquery.js
協(xié)議://子域名. 主域名 :端口號(hào) / 請求資源地址
當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不行同時(shí),都算作不同域
不同域之間相互請求資源,就算作“跨域”
javascript 出于安全方面的考慮,不允許跨域調(diào)用其他頁面的對象。
什么是跨域呢? 簡單的解釋就是因?yàn)閖avascript同源策略的限制,a.com 域名下的js無法操作b.com 或是 c.a.com域名下的對象
處理跨域方法:
—— 代理(屬于后臺(tái)技術(shù))比如在北京的web服務(wù)器的后臺(tái)來調(diào)用上海服務(wù)器的服務(wù),看然后再把響應(yīng)結(jié)果返回給前端,這樣前端調(diào)用北京同域名的服務(wù)器就和調(diào)用上海的服務(wù)效果相同了。
—— JSONP
a域名去聲明,b域名去調(diào)用
注意:JSONP只能用于GET 請求,不支持POST請求(局限性)
—— XHR2
HTML5 提供的XMLHttpRequest Level2 已經(jīng)實(shí)現(xiàn)了跨域訪問以及其他的一些新功能
IE10 以下的版本都不支持
在服務(wù)端做一些小小的改造即可:
header("Access-Control-Allow-Origin:"); 表示所有的服務(wù)器都可以訪問,也可以替換成特定的域名,比如說:服務(wù)器在上海,*換成北京服務(wù)器的域名,這樣只有從北京的域名才可以訪問
header("Access-Control-Allow-Methods:POST,GET");
下面說下jsonp 的優(yōu)缺點(diǎn)。
同源策略 :即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。jsonp可以跨越同源策略,當(dāng)我們使用了jsonp,將會(huì)是另外一種協(xié)議通信了。
JSONP的優(yōu)點(diǎn)是:它不像XMLHttpRequest對象實(shí)現(xiàn)的Ajax請求那樣受到同源策略的限制;它的兼容性更好,在更加古老的瀏覽器中都可以運(yùn)行,不需要XMLHttpRequest或ActiveX的支持;并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果。
JSONP的缺點(diǎn)則是:它只支持GET請求而不支持POST等其它類型的HTTP請求;它只支持跨域HTTP請求這種情況,不能解決不同域的兩個(gè)頁面之間如何進(jìn)行JavaScript調(diào)用的問題。
以上所述是小編給大家介紹的json與jsonp知識(shí)小結(jié)(推薦),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果(續(xù))
這篇文章主要介紹了BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
form表單數(shù)據(jù)封裝成json格式并提交給服務(wù)器的實(shí)現(xiàn)方法
下面小編就為大家分享一篇form表單數(shù)據(jù)封裝成json格式并提交給服務(wù)器的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
微信小程序canvas截取任意形狀的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序canvas截取任意形狀的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
IE6-IE9不支持table.innerHTML的解決方法分享
讓ie6-ie9支持table.innerHTML,其實(shí)這里只是對table做了處理,對其他不支持的元素可以用類似的方案2012-09-09
JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-07-07
wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04

