同步&非同步

先上概念

• 同步:必須等待前面的任務完成,才能繼續後面的任務

• 非同步:不受當前任務的影響

• 舉個例子:

• 同步:我們在銀行排隊時,只有等到你了,才能夠去處理業務. 

• 非同步:我們在排隊的時候,玩手機是沒有任何影響的.
  

• 非同步更新網站

  當我們訪問一個普通的網站時,當瀏覽器載入完:HTML,CSS,JS以後網站的內容就固定了.如果網站內容發生更改必須重新整理頁面才能夠看到更新的內容

  • 網站內容更新:

  常規的網站內容更新,必須通過重新整理顯示新內容

  • 想像一下

  你正用手機看著微博

  手機網速很慢

  內容看完了,點選載入更多按鈕

  頁面重新重新整理 o(╯□╰)o

  • 非同步更新

  實際情況是:我們在訪問新浪微博時,當你看到一大半了,會自動幫我們載入更多的微博,同時頁面並沒有重新整理

  Ajax概念

  當我們正在排隊的時候,可以通過手機去幹一些其他的事情.

  在瀏覽器中,我們也能夠不重新整理頁面,通過ajax的方式去獲取一些新的內容,類似網頁有微博,朋友圈,郵箱等

  • 單詞解釋:

  Asynchronous Javascript And XML（非同步JavaScript和XML）,他並不是憑空出現的新技術,而是對於現有技術的結合:核心是js物件XMLHttpRequest

  XMLHttpRequest

  ajax使用的依舊是HTTP請求,那麼讓我們來回憶一下一個完整的HTTP請求

  需要什麼

  >

  • 請求的網址,方法get/post

  • 提交請求內容資料,請求主體等

  • 接收響應回來的內容

  • 五步使用法:

    1. 建立XMLHTTPRequest物件

    2. 註冊回撥函式

       • 當伺服器迴應我們了,我們想要執行什麼邏輯

    3. 使用open方法設定和伺服器端互動的基本資訊

       • 設定提交的網址,資料,post提交的一些額外內容

    4. 設定傳送的資料，開始和伺服器端互動

       • 傳送資料

    5. 更新介面

       • 在註冊的回撥函式中,獲取返回的資料,更新介面

  • 示例程式碼:GET

  get的資料,直接在請求的url中新增即可

  
  <script type="text/javascript">
  
      // 建立XMLHttpRequest 物件
   
  
  
      var xml = new XMLHttpRequest();
  
      // 設定跟服務端互動的資訊
  
      xml.open('get','01.ajax.php?name=fox');
  
      xml.send(null);    // get請求這裡寫null即可
  
      // 接收伺服器反饋
  
      xhr.onreadystatechange = function () {
  
          // 這步為判斷伺服器是否正確響應
  
          if (xhr.readyState == 4 && xhr.status == 200) {
  
              // 列印響應內容
  
              alert(xml.responseText);
  
          } 
  
      };
  
  </script>

  • 示例程式碼:POST

  
  <script type="text/javascript">
  
      // 非同步物件
  
      var xhr = new XMLHttpRequest();
  
  
  
      // 設定屬性
  
      xhr.open('post', '02.post.php' );
  
  
  
      // 如果想要使用post提交資料,必須新增
  
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
  
  
      // 將資料通過send方法傳遞
  
      xhr.send('name=fox&age=18');
  
  
  
      // 傳送並接受返回值
  
      xhr.onreadystatechange = function () {
  
      // 這步為判斷伺服器是否正確響應
  
      if (xhr.readyState == 4 && xhr.status == 200) {
  
             alert(xhr.responseText);
  
           } 
  
      };
  
  </script>
  

  XMLHttpRequest_API講解

  1.建立XMLHttpRequest物件(相容性寫法)

  • 新版本瀏覽器:

  
  var xml=new XMLHttpRequest();
  

  • （IE5 和 IE6）

  
  var xml=new ActiveXObject("Microsoft.XMLHTTP");
  

  • 考慮相容性建立Ajax物件

  
   var request ;
  
   if(XMLHttpRequest){
  
      // 新式瀏覽器寫法
  
      request = new XMLHttpRequest();
  
   }else{
  
      //IE5,IE6寫法
  
      new ActiveXObject("Microsoft.XMLHTTP");
  
   }
  

  2.傳送請求:

  方法	描述
  open(method,url,async)	規定請求的型別、URL 以及是否非同步處理請求。 method：請求的型別；GET 或 POST url：檔案在伺服器上的位置 async：true（非同步）或 false（同步）
  send(string)	將請求傳送到伺服器。 string：僅用於 POST 請求

  3.POST請求注意點:

  如果想要像form表單提交資料那樣使用POST請求,需要使用XMLHttpRequest物件的setRequestHeader()方法 來新增 HTTP 頭。然後在 send() 方法中新增想要傳送的資料：

  
  xmlhttp.open("POST","ajax_test.php",true);
  
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
  xmlhttp.send("fname=Bill&lname=Gates");
  

  4.onreadystatechange事件

  當伺服器給予我們反饋時,我們需要實現一些邏輯

  屬性	描述
  onreadystatechange	儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
  readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
  status	200: "OK" 404: 未找到頁面

  4.伺服器響應內容

  如果響應的是普通字串,使用responseText,如果響應的是XML,使用responseXML

  屬性	描述
  responseText	獲得字串形式的響應資料。
  responseXML	獲得 XML 形式的響應資料。