Ajax

  Ajax是一種異步加載,部分更新的技術。
如:填寫表單時,郵箱格式錯誤,用戶名已存在等,會在你輸入完成後就時事的提醒你,而不需要點擊提交,刷新整個頁面以後才告訴你。
這就是Ajax的牛逼之處:無刷新數據讀取
  網頁的展示需要經過,瀏覽器(客戶端)向服務端(服務器)發送請求,服務端返回響應。
請求

  • 方法
    • get:查詢,獲取,一般不用於修改
    • post:修改,刪除,增加等
  • url
  • 請求頭:客戶端信息(與請求體之間有空行)
  • 請求體 :客戶端提交的字符串,表單

      這裏說一下請求會用到http協議,它是一種無狀態協議。也就是說不會建立持久連接,幹完事兒就斷開了,無記憶。
      
    響應

  • 狀態碼:請求是否成功

  • 響應頭:服務器信息
  • 響應體

這個過程要通過XMLHttpRequest對象來實現。但這個對象在ie6以下是不存在的,如果要兼容的話:
摘自別處視頻

發送請求要用到XMLHttpRequest的一些屬性和方法:

  • open(method,url,async)
    • saync:true/false 同步/異步
  • send(string)
    • get不用寫,post寫

獲取響應:

  • responseText:字符串
  • responseXML:XML
  • status和statusText:數字(狀態碼)和文本形式返回
    這裏寫圖片描述

而當我們發出請求後,可通過readystate屬性來監視服務器響應的變化,在響應成功時得到通知。
readystate:

  • 0:服務器還未初始化
  • 1:鏈接已建立(open已調用)
  • 2:請求已被接收(收到頭)
  • 3:請求處理中(收到主體)
  • 4:請求已完成

總結:XMLHttpRequest建立異步請求4步
1. 創建XMLHttpRequest對象
2. open();
3. send();
4.監聽 onreadystatechange
例:
摘自別處

jQuery中的Ajax

設定值:

  • type 發送方式:post/get
  • url
  • data 對象,連同請求一起發送到服務器的數據(主要post使用)
  • dataType 預期服務器返回的數據類型(一般爲json)
  • success 請求成功的回調函數
  • error 請求失敗的回調函數
 $.ajax({
      type:"GET",
      url:"  //此處省略    ",
      dataType:"joson",
      success:function(data){//data爲已解析過的responseText
         if(data.success){
            //響應已經成功返回
            //sucss爲前端和後臺約定好的json數據成員之一
         }else{
           //出現錯誤
         }
      },
      error:function(jqXML){
          alert("發生錯誤"+jqXML.status);
      }
 })

success是一個函數,這個函數傳遞過去不會立即執行,而是等着請求成功之後才能執行。對於這種傳遞過去不執行,等出來結果之後再執行的函數,叫做callback,即回調函數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章