定義：

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

• AJAX 的方法：
• **1、 $\mathrm{.}aja$
  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()
  — $.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.