1. 程式人生 > >ajax 和jsonp 使用

ajax 和jsonp 使用

定義:

  • ajax和jsonp 用於和後端通訊,獲取資料和資訊,實現頁面的區域性重新整理功能。、
  • ajax
    一種傳送HTTP請求與後臺進行非同步/同步通訊的技術。
    原理:例項化XmlHttp物件,使用此物件與後臺通訊。

  • AJAX 的方法:
  • **1、 . a j a
    x ( )
    u r l :
    t y p e : G E T d a t a T y p e : j s o n / h t m l / j s o n p d a t a : . d o n e ( ) : 調 . f a i l ( ) : 調 a s y n c : t r u e .ajax({})** --- 常用引數: - url: 請求網路地址。 - type: 請求方式。預設為GET。 - dataType: 設定返回的資料格式,json/html/jsonp。 - data: 設定傳送給伺服器的資料。 - .done(): 設定請求成功後的回撥函式。 - .fail(): 設定請求失敗後的回撥函式。 - async : 設定是否非同步,預設為 true。 -
$.ajax({
            url: "./data.json",
            type: "get",
            dataType: "json",
        });
        .done(function(data) {//請求成功的回撥函式
            alert('請求成功');
        })
        .fail(function() {
            alert('伺服器超時,請重試!');
        });
    });

同源策略:

  • ajax請求的頁面或資源只能是同一個域下面的資源,不能是其他域的資源,這是在設計ajax時基於安全考慮。
  • 2、$.get()
    . g e t ( ) 使 G E T u r l : d a t a : f u n c t i o n d a t a , s t a t u s , d a t a T y p e : .get() 方法 使用GET請求從伺服器載入資料。 --引數: --url: 訪問的網址,需要遵循同源策略。 --data: 傳送到伺服器的資料。 --function(data,status){},請求成功執行的方法。 --dataType: 請求相應的資料型別。 -
  • $ .get()方法的引數額和$.ajax()不一樣,網址url為必須的引數,其他三個為可選。
  • data為返回的資料,status表示請求的狀態,一般有‘success’,‘error’,‘timeout’等幾種。
  • 如果dataType 型別為jsonp,也可以跨域請求資料。
  • 無請求失敗的回撥函式
$.get(
            "./data.json",
            function (data,status) {
                console.log(data);
            },
            "json"
        );

$.post():
與get的請求方式不一樣。


$.load():
從伺服器載入資料,不需要指定dataType,返回的資料會自動放置到元素中。

  • 引數
    url: 請求地址。
    data: 請求引數,可選。
    function(response,status,xhr): 請求成功的回撥函式。
  • 注意:
    不能跨域訪問資料。
    response為返回的資料,status為請求的狀態。
    無請求失敗的回撥函式。
$(".box").load(
            "./data.json",
            function (response,status) {
                console.log(data.name);
            }
        );
        <div class='box'></div>

$.getJSON():
使用AJAX的HTTP GET 請求獲取JSON資料
引數:

  • url: 請求網址,必須的引數。
  • data: 傳送給伺服器的資料。
  • function(data,status,xhr): 請求成功的回撥函式。
    注意:
    方法直接獲取的是JSON資料。
    無返回失敗的回撥函式
    回撥函式是命名函式,不是匿名函式。
$.getJSON(
            "./data.json",
            function(data,status) {
                console.log(data.name);
            },
        );

  • getScript()
    方法使用 AJAX 的 HTTP GET 請求獲取並執行js程式碼。
    引數:
    url: 請求地址。
    function(data,status): 請求成功的回撥函式。
    注意:
    返回的data是js程式碼
    該方法可以用來動態載入js程式碼
$.getScript(
            "./data.js",
            function(data,status) {
                console.log(data);
            },
        );
  • JSONP
    定義:一種可以實現跨域傳送http請求的資料通訊格式,可以嵌在ajax中使用。
    原理:利用script標籤可以跨域連結資源的特性。
  • 利用ajax
$.ajax({
    url:'...../data.js',//可以不是本地域名 
    type:'get',
    dataType:'jsonp',  //jsonp格式訪問
    jsonpCallback:'aa'  //獲取資料的函式
})
.done(function(data){
    console.log(data.name);
})
.fail(function() {
    alert('伺服器超時,請重試!');
});

aa({
    
    "data":{
        "email":"xi",
        "age":"18"
    }
})
  • 使用ajax的方法本質上也是script標籤可以跨域連結資源,不過jquery為其封裝了相同的方法,看起來一樣。
  • 執行過程為:ajax通過jsonp技術跨域訪問data.js檔案,通過找到aa()方法將其引數傳遞給.done方法的data引數執行.done方法。
  • 目前這種方式仍然有其侷限性,就是必須知道data.js檔案的名字和定義的方法aa,如果在僅僅知道域名的情況下,需要另外的方法.

  • 方法二
$.ajax({
        url:'https://sug.so.360.cn/suggest?',//請求360搜尋的聯想資料
        type:'get',
        dataType:'jsonp',  //jsonp格式訪問
        data: {word: $input.val()},
    })
    .done(function(data){
        console.log(data);
    })
    .fail(function() {
        alert('伺服器超時,請重試!');
    });

通過瀏覽器檢視每次輸入關鍵字伺服器傳送回的資料包,找到js檔案中header的地址以及相關的提交資料,發現key為word關鍵字,因此可以向伺服器傳送data資料。
伺服器返回的資料會自動傳給回撥的匿名函式的引數data.