AJAX的學習筆記

RobinTang 發布于2019-08-22 14:03 / 1061人閱讀

摘要：的學習筆記是異步和的縮寫，它的作用是執行異步的網絡請求。這就是一個格式的，向這個地址請求，將得到一個回調函數，執行就得到數據。

AJAX的學習筆記

AJAX是異步JavaScript和XML的縮寫，它的作用是執行異步的網絡請求。因為JS是線性同步，如果需要用戶向瀏覽器發送一個請求，那么就需要等瀏覽器接收到了結果才能繼續運行，如果發送到接受的時間太長，瀏覽器就會很長時間處于“假死”狀態，這樣的用戶體驗很不好。于是Jesse James Garrett介紹了一種新技術，即用JS執行異步網絡請求，也就是AJAX。

XMLHttpRequest

AJAX的核心是XMLHttpRequest（簡稱XHR）對象。

通過一個XMR對象的構造函數，我們可以在JS上開始寫AJAX。

判斷瀏覽器

一般我們用var xhr=new XMLHttpRequest()來創建新的XHR對象，但是由于早期的IE版本并不支持原生的XHR，而是支持ActiveXObject，所以開始之前我們需要做一個判斷：

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject("Microsoft.XMLHttp");
}

設置onreadystatechange回調函數

設置回調函數的目的是，判斷我們發送的請求是否成功，不管成功與否都給出一個回調響應，以讓我們開始下一步的操作。如下：

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
}else{
  xhr=new ActiveXObject("Microsoft.XMLHttp");
}

xhr.onreadychange=function(){   //狀態發生變化時，函數回調
  if(xhr.readyState===4){   //成功完成
    //判斷響應結果：
    if(xhr.status===200){
      //成功，通過responseText拿到響應文本：
      return success(xhr.responseText);
    }else{
      //失敗，根據響應碼判斷失敗原因：
      return fail(xhr.status);
      }
  }else{
    //響應還在繼續。
  }
}

XHR的用法

成功創建XHR對象后，第一個要用的方法就是open(),open()方法傳遞三個參數：

請求的類型；

請求的地址；

是否異步發送請求，默認為true，一般不用填。

例子：
open("get","example.php")

open()方法并不是真正的發送請求，要發送請求還需要用到另一個方法send()。get方式的請求不需要數據，則直接send()就好了，而post則需要把數據以字符串或者formData對象傳進去。

安全限制

由于瀏覽器的同源政策，如果你請求的地址URL的域名和你當前的頁面不一致，瀏覽器是不允許的。

所謂的一致，是指完全的一致。

www.xxx.com 和 xxx.com 是不一致的；

www.xxx.com 和www.xxx.com:80 是不一致的；

www.xxx.com:80 和www.xxx.com:8080是不一致的；

https://www.xxx.com 和http://www.xxx.com 也是不一致的。

但是很多時候我們需要從其他的網站調數據，那么怎么來解決它呢？所以我們需要用到跨域技術。

常用的技術有三種。

通過Flash插件發送HTTP請求；

通過在同源域名下架設代理服務器，JS把請求發送到代理服務器上；缺點是要在后端做多余的開發；

JSONP。

JSONP

這里重點介紹一下JSONP（JSON with padding，參數式JSON）。由于瀏覽器允許跨域引用JS資源，因此JSONP的原理就是通過觸發在頁面中的JS資源來引用數據。因為JSONP一般是由兩部分組成：回調函數、數據，所以我們只要有一個JSONP格式的URL，并在頁面中準備好兩段代碼：一段是觸發JSONP中回調函數的代碼，這段代碼是用來渲染數據的；另一段是動態生成引用JSONP的。

舉個例子：

我們借用一個根據IP地址查詢天氣的API：http://freegeoip.net/json?cal...。

這就是一個JSONP格式的URL，向這個地址請求，將得到一個handleResponse()回調函數，執行就得到數據。因此我們就可以拿出我們準備好的兩段代碼了。

第一段：

function handleResponse(response){
  console.log("you are " + response.ip + ",which is in " + response.city + response.region_name);
}

這一段代碼是通過回調函數，把數據渲染出來。

第二段：

function getLocation(){
  var script=document.createElement("script"),
      script.src="http://freegeoip.net/json?callback=handleResponse"
  document.body.insertBefore(script,document.body.firstChild);
}

最后我們只要執行這個getLocation的函數，就完成了跨域調取數據。

CORS

我們在上面說到，瀏覽器的同源策略，會阻止接收跨域的請求結果，解決的方法已經在上面簡單介紹了，此外，現在大部分瀏覽器已經能夠支持CORS了。

CORS（Cross-Origin Resource Sharing，跨域資源共享），這是一種規范，允許Web應用服務器進行跨域訪問控制，從而使跨域數據傳輸安全進行。

目前所有的瀏覽器都支持了這個策略，但是，我們的IE10以下的并不在其中……

CORS的原理是使用HTTP頭部信息，讓服務器端與客戶端相溝通，以決定請求或響應是否成功。用一個簡單但是不太恰當的比喻就是，CORS就是你（客戶端）拿著一個口令（頭信息）去通過某個關卡，而這個關卡也有口令，如果你的口令和關卡的口令匹配（相同或者為*），那么你就可以自由出入（跨域請求通過），如果不匹配，你就會被扣留（跨域請求失敗）。

因此，在CORS中，關鍵的是服務端的口令（頭信息）。只要服務端實現了CORS接口，就可以跨域通信。而在客戶端中，只要在open()方法的URL中使用絕對定位即可實現CORS，而CORS通信過程，都是由瀏覽器完成，不需要用戶處理，那么，瀏覽器是怎么處理的呢？

兩種請求

瀏覽器把跨域請求分為兩類：簡單請求和預先請求。

簡單請求需要滿足下列兩個條件：

請求方法是下列之一：

GET

HEAD

POST

請求頭中的Content—Type請求頭的值是下列之一：

application/x-www-form-urlencoded

multipart/form-data

text/plain

反之，不滿足其中之一則是預先請求。瀏覽器會先發送一個OPTION請求，用來與域名服務器協商是否可以發送實際的跨域請求。

兩種請求的具體流程過多，這里我就不細說了，有興趣的小伙伴可以從下面幾篇文章中更詳細地了解CORS：

廖雪峰的AJAX教程

阿里云：CORS——跨域請求那些事兒

跨域資源共享 CORS 詳解 - 阮一峰的網絡日志

HTTP訪問控制（CORS） - HTTP | MDN

總之我們只要明白，CORS是一種跨域策略。瀏覽器會在我們需要跨域操作時自定義頭部信息，與服務端進行匹配，以確定是否同意跨域。而頭信息的處理，一般情況下，是由瀏覽器自動完成，不需要開發者處理。

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92810.html

Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

Forest10 2019-08-23 14:01 評論0 收藏0
Ajax學習筆記

摘要：最近在學，剛剛入門，用到很多與相關的交互。也用了挺久的了，想寫一下學習筆記來記錄一下。實現過程是的基礎，是核心對象，首先要實例化一個對象進行請求，規定請求的類型以及是否異步處理請求。響應服務器狀態響應服務器狀態涉及對象的三個重要的屬性。最近在學php，剛剛入門，用到很多與Ajax相關的交互。Ajax也用了挺久的了，想寫一下學習筆記來記錄一下。今天先簡單寫一下原理和過程。歡迎大家一起探...

wing324 2019-08-02 12:14 評論0 收藏0
Laravel學習筆記之Demo2——用Ajax來做個ToDoList(待更新)

摘要：抱歉，最近忙，本篇等有時間更新。引言本文基于框架做的一個生成和存儲，主要目的是學習使用框架。書籍基于的，學習時使用框架開發。開發環境備注一直想把這本書的個作為系列分享出來，供初學者學習玩玩。抱歉，最近忙，本篇等有時間更新。引言本文基于Laravel框架做的一個URL生成和存儲demo，主要目的是學習使用Laravel框架。內容基于英文書籍《Packt.Laravel.Applic...

luck 2019-06-27 14:08 評論0 收藏0
網易微專業之《前端開發工程師》學習筆記（1）

摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。何為網易微專業？微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...

geekzhou 2019-08-28 18:28 評論0 收藏0
網易微專業之《前端開發工程師》學習筆記（1）

摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。何為網易微專業？微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...

劉東 2019-08-01 15:00 評論0 收藏0
ajax學習筆記

摘要：對象是的基礎使用它的和方法將請求發送到服務器或，請求的類型文件在服務器上的位置為異步，為同步將數據發送給服務器，僅用于方法當設為時，即為異步時，規定響應處于事件中的就緒函數的三個重要屬性每次發生改變時就會調用這個函數存儲著的狀態，從到發生變 XMLHttpRequest對象是ajax的基礎使用它的open()和send()方法將請求發送到服務器 var a=3; var requ...

LeviDing 2019-08-20 14:29 評論0 收藏0