jQuery中的ajax

一、jQuery中的ajax

  1. 封裝第一層 - 類似于原生ajax的用法

    $ajax

  2. 封裝第二層 - 基于第一層再次封裝

    $().load();
    $.post();
    $.get();

  3. 封裝的第三層 - 特殊用法

    $.getScript(); - 動(dòng)態(tài)讀取腳本(js代碼)
    $.getJson(); - 接收json格式數(shù)據(jù)

二、load(url,data,callback)方法

 1. 最簡(jiǎn)單、局限性最大

     url - 設(shè)置ajax的請(qǐng)求地址

     data - 設(shè)置ajax的請(qǐng)求數(shù)據(jù)
        要求為key:value格式,其實(shí)就是js的對(duì)象格式

     callback: ajax請(qǐng)求成功后的回調(diào)函數(shù)
        回調(diào)函數(shù)的參數(shù)就是服務(wù)器返回的數(shù)據(jù)

 2. 服務(wù)器響應(yīng)的數(shù)據(jù)自動(dòng)寫入調(diào)用load方法的屬性中

 3. load()方法的請(qǐng)求類型

    1)沒(méi)有請(qǐng)求數(shù)據(jù)時(shí),請(qǐng)求類型是GET
    2) 發(fā)送請(qǐng)求數(shù)據(jù)時(shí),請(qǐng)求類型是POST

 4. load()方法接受服務(wù)器端的響應(yīng)數(shù)據(jù)
    是以字符串類型(HTML格式)來(lái)接受

三、get/post()方法

1. get(url,data,callback,type)
   1. 參數(shù)
   
      url - 設(shè)置ajax的請(qǐng)求地址

      data - 設(shè)置ajax的請(qǐng)求數(shù)據(jù)
  
         要求為key:value格式,其實(shí)就是js的對(duì)象格式

      callback: ajax請(qǐng)求成功后的回調(diào)函數(shù)

         回調(diào)函數(shù)的參數(shù)就是服務(wù)器返回的數(shù)據(jù)

      type:設(shè)置服務(wù)器端響應(yīng)的數(shù)據(jù)格式

         默認(rèn)值為HTML,還可以為xml/json

   2. 無(wú)論是否發(fā)送請(qǐng)求數(shù)據(jù),請(qǐng)求類型都是GET

   3. $.get()方法可以接受HTML/XML/JSON格式
2. post(url,data,callback,type)
   使用方式跟get一模一樣

四、$.ajax(options)方法

  1. options的格式是{key:value}

  2. url:請(qǐng)求地址

  3. type:請(qǐng)求類型,默認(rèn)為get

  4. async:是否異步,默認(rèn)為true

  5. contentType POST方式發(fā)送數(shù)據(jù)的前提

    默認(rèn)值為application/x-www-form-urlencoded

  6. data:請(qǐng)求數(shù)據(jù),格式必須為key=value

  7. success:請(qǐng)求成功后的回調(diào)函數(shù)

    function(data,textStatus)

    data - 服務(wù)器響應(yīng)的內(nèi)容

    textStatus - 表示ajax請(qǐng)求的狀態(tài),此時(shí)的值為success

  8. error:請(qǐng)求失敗后的回調(diào)函數(shù)

    function(XMLHttpRequest,textStatus,errorThrown)

    XMLHttpRequest - ajax的核心對(duì)象

    errorThrown - 錯(cuò)誤異常信息

    textStatus - 表示ajax請(qǐng)求的狀態(tài)

    error/timeout/notmodified

  9. dataType:數(shù)據(jù)響應(yīng)格式

    HTML/XML/JSON

五、使用$.getScript(url,calback)動(dòng)態(tài)讀取腳本

  1. 若JS代碼過(guò)多時(shí),會(huì)影響HTML頁(yè)面加載的速度,如果已被加載的JS代碼并不是立即執(zhí)行,只加載馬上執(zhí)行的js代碼,會(huì)提交效率

  2. 參數(shù)

    url - 讀取腳本的地址(本地或服務(wù)器)
    calback - 回調(diào)函數(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 標(biāo)簽(空格分隔): ajax 用JavaScript寫AJAX前面已經(jīng)介紹過(guò)了,主要問(wèn)題就是不同瀏覽器需要寫不同代...
    lvyweb閱讀 919評(píng)論 0 0
  • jQuery中的ajax 封裝第一層 - 類似于原生ajax的用法$ajax 封裝第二層 - 基于第一層再次封裝$...
    不住海邊也喜歡浪閱讀 261評(píng)論 0 0
  • 一、jQuery中的ajax 封裝第一層 - 類似于原生ajax的用法 $ajax 封裝第二層 - 基于第一層再次...
    lililifeng閱讀 269評(píng)論 0 0
  • 一、封裝 1.)封裝第一層 - 類似于原生ajax的用法 2.)封裝第二層 - 基于第一層再次封裝 3)封裝的第三...
    我是漸漸呀閱讀 263評(píng)論 0 0
  • jQuery對(duì)ajax進(jìn)行了3層封裝。最底層為$.ajax()方法、第2層為load(),$get(),$post...
    whatcanhumando閱讀 580評(píng)論 0 1