Ajax/ ES6/Http等知識

• Ajax是什麼? 如何建立一個Ajax？
  • Ajax的全稱：Asynchronous Javascript And XML。
  • Ajax是一種用於建立快速動態網頁的技術, 非同步的JavaScript和XML

  所謂非同步，在這裡簡單地解釋就是：向伺服器傳送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁重新整理的，提高了使用者體驗。

  • 建立 (1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件 (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL
    及驗證資訊 (3)設定響應HTTP請求狀態變化的函式 (4)傳送HTTP請求 (5)獲取非同步呼叫返回的資料 (6)使用JavaScript和DOM實現區域性重新整理
• 手寫一個ajax

function creatXhr() {
      var xhr;
      if(window.XMLHttpRequest){ //code for IE7+,Firefox,Chrome,Opera,Safari
          xhr = new XMLHttpRequest();
      } else {
          xhr = new ActiveXObject("Microsoft.XMLHttp"
 
);
      }
      return xhr;
  }
  let xhr = creatXhr();
  xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
            alert(xhr.responseText);
        }else {
          alert("Request was unsuccessful:"
 
 + xhr.status)
        }
        
      } 
  }
  xhr.open('POST',url,true);
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//請求
  xhr.send();

• Ajax的優缺點
  • 優點： 1.減輕伺服器的負擔，Ajax一般只從伺服器獲取只需要的資料。 2.無需重新整理整個頁面, 減少使用者等待時間。 3.更好的客戶體驗，可以將一些伺服器的工作轉移到客戶端完成，節約網路資源，提高使用者體驗。 4.基於標準化的物件，不需要安裝特定的外掛, 瀏覽器都能支援Ajax 5.徹底將頁面與資料分離。
  • 缺點： 1.沒有瀏覽歷史, 不能回退 2.存在跨域請求問題 3.對搜尋引擎支援比較弱 4.使用動態頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中,不過這些都有相關方法解決
• Ajax 解決瀏覽器快取問題？

1. 在ajax傳送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2. 在ajax傳送請求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3. 在URL後面加上一個隨機數： "fresh=" + Math.random();。
4. 在URL後面加上時間戳："nowtime=" + new Date().getTime();。
5. 如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執行這條語句就是不需要儲存快取記錄。

• 同步和非同步的區別?

同步的概念應該是來自於OS中關於同步的概念:不同程序為協同完成某項工作而在先後次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.非同步則不存在這種順序性.

• 同步：瀏覽器訪問伺服器請求，使用者看得到頁面重新整理，重新發請求,等請求完，頁面重新整理，新內容出現，使用者看到新內容,進行下一步操作。

• 非同步：瀏覽器訪問伺服器請求，使用者正常操作，瀏覽器後端進行請求。等請求完，頁面不重新整理，新內容也會出現，使用者看到新內容。

• 如何解決跨域問題? jsonp、iframe、window.name、window.postMessage、伺服器上設定代理頁面

• 怎麼理解不同源

  • 協議名不同
  • 域名不同
  • 埠號不同

• 詳細說說jsonp

基本思想

• 網頁通過新增一個<script src=‘’>元素，向伺服器請求JSON資料（<script>的src屬性獲得js程式碼， 不受同源政策限制）
• 伺服器收到請求後，將資料放在一個指定名字的回撥函式裡傳回來
• 用JSONP 獲取的不是JSON 資料，而是可以直接執行的 JavaScript語句網頁不能跨域的 ajax 請求，<script> 可以跨域<script src='xxxxx'>到本地就執行
• 動態生成<script>標籤, 然後通過標籤的src屬性發送GET型別的跨域請求, 伺服器端返回一段js指令碼, 這段js指令碼的內容為一個函式呼叫,實參為需要返回的響應資料(json);
• 客戶端這邊需要提前定義好對應的函式, 當<script>請求成功並接收到資料時, 會自動呼叫此函式, 在函式中 我們就可以處理響應資料了