1. 程式人生 > >jQuery Ajax & jsonp

jQuery Ajax & jsonp

1.Ajax與jsonp

(1)ajax技術的目的是讓JavaScript傳送HTTP請求,與後臺通訊,獲取資料和資訊。Ajax技術的原理是例項化xmlhttp物件,使用此物件與後臺通訊。Ajax通訊的過程不會影響後續JavaScript的執行,從而實現非同步。

(2)同步和非同步
同步:等待結果返回在執行
非同步:不管結果繼續執行

(3)區域性重新整理和無重新整理
Ajax可以實現區域性重新整理,也叫無重新整理,無重新整理指的是整個頁面不重新整理,只是區域性重新整理,Ajax可以自己傳送HTTP請求,不用通過瀏覽器的位址列,所以頁面整個不會重新整理,Ajax獲取到後臺資料,更新頁面資料的部分,就做到了頁面區域性重新整理

(4)同源策略
Ajax請求的頁面或資源只能是同一個域下面的資源,不能是其他域的資源,這是在設計Ajax時基於安全的考慮。
特徵報錯提示:

(5)Ajax使用:

$.ajax使用方法:

url 請求地址

type 請求方式,預設是GET,常用的還有POST

dataType 設定返回的資料格式,常用的是json,也可以設定為
HTML

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

success 設定請求成功後的回撥函式

error設定請求失敗後的回撥函式

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

$.ajax({
url:'data.json',
type:'get',
dataType:'json'
})
.done(function(dat){
$('#username').html(dat.name);
$('#userage').html(dat.age);

        })
        .fail(function(){
            alert('伺服器超時!');
        })

2.json

json是JavaScript object notation 的首字母縮寫,單詞的意思是JavaScript物件表示法,這裡說的json指的是類似於JavaScript物件的一種資料格式,目前這種資料格式比較流行,逐漸替代了傳統的xml資料格式

(1)JavaScript自定義物件

(2)json格式的資料
與json物件不同的是,json資料格式的屬性名稱和字串值需要用雙引號引起來,用單引號或者不用引號會導致讀取資料錯誤。

json的另一個數據格式是陣列,和JavaScript中的陣列字面量相同

3.jsonp

Ajax只能請求同一個域下的資料或資源,有時候需要跨域請求資料,就需要用到jsonp技術,jsonp可以跨域請求資料,它的原理主要是利用<script>標籤可以跨域連結資源的特性。jsonp和Ajax原理完全不一樣,不過jQuery將它們封裝成同一個函式

遺憾:實驗不成功