全面解析Ajax和jsonp使用總結

2022-09-20 23:06:11 字數 2904 閱讀 2669

前言:ajax和jsonp可以與後台通訊,獲取資料和資訊,但是又不用重新整理整個頁面,實現頁面的區域性重新整理。

一、ajax

•定義:一種傳送http請求與後台進行非同步通訊的技術。

•原理:例項化xmlhttp物件,使用此物件與後台通訊。

ajax的同源策略:

•ajax請求的頁面或資源只能是同乙個域下面的資源,不能是其他域的資源,這是在設計ajax時基於安全考慮。

ajax的方法:

1. $.ajax({}):

•常用引數: •url:請求網路位址

•type:請求方式,預設是'get',常用'post'

•datatype:設定返回的資料格式,一般使用json,也可以是html和jsonp;

•data:設定傳送給伺服器的資料

•.done():設定請求成功後的**函式

•.fail():設定請求失敗後的**函式

•async:設定是否非同步,預設值是'true',表示非同步

•**運用:

$(function () );

.done(function(data) )

.fail(function() );

});})......

說明:data表示後台返回的資料;ajax使用需要依賴伺服器環境。

2. $.get():

•$.get() 方法使用get請求從伺服器載入資料;也是一種無重新整理的請求資料的ajax方法。

•引數:

•url:訪問的**,需要遵循同源策略;

•data:傳送到伺服器的資料。

•function(data,status){}:請求成功執行的函式

•datatype:請求響應的資料型別。

//參考**:

$(function () ,

"json"

);});

})......

•$.get()方法的引數和$.ajax()不一樣,**url為必須的引數,其他三個可選。

•data為返回的資料,status表示請求的狀態,一般有""success","error","timeout"等幾種。

•如果datatype型別為jsonp,也可以跨域請求資料。

•無請求失敗的**函式。

3. $.post()

•$.get() 方法使用post請求從伺服器載入資料;

•其使用的方法和$.get()方法完全一樣。

4. $.load():

•從伺服器載入資料,不需要指定datatype,返回的資料會自動放置到元素中。

•引數:

•url:位址;

•data:請求的引數,可選;

•function(response,status,xhr):請求成功的**函式。

$(function ()

);});

})......

•返回的資料會放置在div中;

•不能跨域訪問資料;

•response為返回的資料,status為請求的狀態;

•無請求失敗的**函式。

4. getjson()

•方法使用 ajax 的 http get 請求獲取 json 資料。

•引數:

•url: 請求**,必須的引數;

•data: 傳送給伺服器的資料;

•function(data,status,xhr):請求成功的**函式

$(function () ,

);});

})......

•方法直接獲取的是json資料;

•無返回失敗的**函式;

•**函式時命名函式,不是匿名函式;

5. getscript()

•方法使用 ajax 的 http get 請求獲取並執行js**。

•引數:

•url: 請求**,必須的引數;

•function(data,status):請求成功的**函式

$(function () ,

);});

})......

•返回結data是js**;

•該方法可以用來動態載入js**。

二、jsonp

•定義:一種可以實現跨域傳送http請求的資料通訊格式,可以嵌在ajax中使用。

•原理:利用script標籤可以跨域鏈結資源的特性。

用法一:函式傳參

說明:在外部定義乙個data.js檔案,這個檔案的路徑可以與當前頁面不在同乙個域下面。

data.js的內容:

aa(})

•將資料以頁面定義的函式的引數的形式傳遞進去,從而獲取資料。

•本質上可以將資料拆分,使得資料不用強制儲存在同乙個網域名稱下。

用法二:利用ajax

$.ajax()

.done(function(data))

.fail(function() );

•data.js的內容和上面一樣。

•使用ajax的方法本質上也是script標籤可以跨域鏈結資源,不過jquery為其封裝了相同的方法,看起來一樣。

•以上**的執行過程為:ajax通過jsonp技術跨域訪問data.js檔案,通過找到aa()方法將其引數傳遞給.done方法的data引數執行.done方法。

•目前這種方式仍然有其www.cppcns.com侷限性,就是必須知道data.js檔案的名字和定義的方法aa,如果在僅僅知道網域名稱的情況下,需要另外的方法.

用法三var $input = $("inp程式設計客棧ut");

$input.keyup(function () ,

}).done(function(data))

.fail(function() );

})....

•伺服器返回的資料會自動傳給**的匿名函式的引數data.

本文標題: 全面解析ajax和jsonp使用總結

本文位址:

關於ajax和jsonp的總結

1.ajax ajax就是可以實現伺服器和瀏覽器之間的通訊 整個過程就是瀏覽器通過ajax向伺服器端傳送乙個請求 然後伺服器通過ajax向瀏覽器傳送一些資訊 在此過程中 伺服器可以拿到瀏覽器提供的資料 進行對資料庫的增刪改查,然後再返回乙個結果給瀏覽器 2.jsonp json可以實現跨域請求,通過...

ajax和jsonp的原生封裝

最近在學ajax和跨域,於是就自己封裝了乙個,雖然有點粗糙但還是可以用的。其實jsonp的本質就是 動態建立script標籤,然後通過src屬性傳送跨域請求,然後伺服器端響應的資料格式為 函式呼叫 foo 實參 所以在傳送請求之前必須先宣告乙個函式,並且函式的名字與引數中傳遞的名字要一致。這裡宣告的...

Android之JSON全面深入解析與使用

在安卓開發中 對於json串的解析 是伺服器返回的資料極其常見的一種方式,那麼對於json的普通用法在這裡就不再做介紹,下面給介紹的是 json 更深入的 研究 json 的解析工具 分為 兩種 一種是 json解析 一種是 gson 解析 利用 json解析 最常用的 就是 getint gets...