Ajax和跨域請求

時間 2019-12-09

標籤 ajax 請求欄目 Ajax 简体版

原文原文鏈接

Ajax

一.概述

Web 程序最初的目的就是將信息（數據）放到公共的服務器，讓全部網絡用戶均可以經過瀏覽器訪問。javascript

在次以前，咱們能夠經過如下幾種方式讓瀏覽器發出對服務端的請求，獲取服務端的數據：php

地址欄輸入地址，回車，刷新
特定元素的href或src屬性
標點提交

這些方式若是經過代碼的方式進行編程，能夠經過js直接發送網絡請求，那麼web的可能就會更多，至少不是「單機遊戲」html

AJAX（Asynchronous JavaScript and XML），最先出如今 2005 年的 Google Suggest，是在瀏覽器端進行網絡編程（發送請求、接收響應）的技術方案，它使咱們能夠經過 JavaScript 直接獲取服務端最新的內容而沒必要從新加載頁面。讓 Web 更能接近桌面應用的用戶體驗。java

二.初步使用

使用Ajax能夠類比咱們訪問頁面的過程，Ajax其實就是一套API，核心類型：XMLHttpRequest。
爲何是XML，傳輸的不是JSON嗎？歷史緣由，在JSON尚未流行起來以前，以前不便修改
//1.建立一個XMLHttpRequest類型對象，--安裝瀏覽器（用戶代理）  
var xhr = new XMLHttpRequest()  
//2.打開與一個網址之間的鏈接，  --至關於在地址欄輸入訪問地址
xhr.open('GET','./time.php')
//3.經過鏈接發送一次請求  ---至關於回車或者點擊訪問發送請求
xhr.send(null)
//4.指定xhr狀態變化事件處理函數， --至關於處理網頁呈現後的操做
//由於客戶端永遠不知道服務端什麼時候才能返回咱們須要的響應
//因此Ajax API採用事件的機制（通知的感受）
xhr.onreadystatechange = function(){
    //經過xhr的readyState判斷這次請求的響應是否接收完成
    if(this.readyState ==4){
        //經過xhr的reponseTexth獲取到響應的響應體
        console.log(this)
    }
}

//onreadystatechange，並非只在響應時觸發，時狀態改變就觸發

2.1readyState

因爲 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在獲得響應時），也就意味着這個事件會被觸發屢次，因此咱們有必要了解每個狀態值表明的含義：jquery

readyState	狀態描述	說明
0	UNSENT	代理（XHR）被建立，但還沒有調用open()方法
1	OPENED	open()方法已經被調用，創建了鏈接
2	HEADERS_RECEIVED	send()方法已經被調用，而且已經能夠獲取狀態行和響應頭
3	LOADING	響應體下載中，responseText屬性可能已經包含部分數據
4	DONE	響應體下載完成，能夠直接使用responseText

####2.2 時間軸ios

graph LR 初始化-->創建鏈接創建鏈接-->接收響應頭接收響應頭-->響應體加載響應體加載 -->加載完成

var xhr =new XMLHttpRequest()
console.log(xhr.readyState)  // 0  (初始化，請求代理對象)

xhr.open('GET','time.php')
console.log(xhr.readyState)  //1  (open()方法已經調用，創建一個與服務端特定接口的鏈接)

xhr.send()
xhr.addEventListener('readystatechange',function(){
    switch(this.readyState){
        case 2:  // 2  已經接收到了響應報文的響應頭
         //能夠拿到頭 console.log(this.getAllResponseHeaders())
         console.log(this.getResponseHeader('server'))
         //可是尚未拿到體
         console.log(this.reponseText)
         break;
            
        case 3:  //3 正在下載響應報文的響應體，有可能響應體爲空，也有可能不完整
         //在這裏處理響應體不可靠
         console.log(this.responseText)
         break;
         
        case 4:   //4 ok(整個響應報文已經完整的下載下來了)
        //這裏處理響應體
        console.log(this.responseText)
        break;  
    }
})

經過理解每個狀態值的含義得出一個結論：通常咱們都是在 readyState 值爲 4 時，執行響應的後續邏輯。web

xhr.onreadystatechange = function(){
    if(this.readyState ===4){
        //後續邏輯
    }
}

####2,3遵循HTTPajax

本質上 XMLHttpRequest 就是 JavaScript 在 Web 平臺中發送 HTTP 請求的手段，因此咱們發送出去的請求任然是HTTP 請求，一樣符合 HTTP 約定的格式：編程

//設置請求報文的請求行
xhr.open('GET','./time.php')
//設置請求頭
xhr.setRequestHeader('Accept','text/plain')
//設置請求體
xhr.send(null)

xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
      // 獲取響應狀態碼 
      console.log(this.status) 
      // 獲取響應狀態描述 
      console.log(this.statusText) 
      // 獲取響應頭信息 
      console.log(this.getResponseHeader('Content‐Type'))// 指定響應頭 
      console.log(this.getAllResponseHeader()) // 所有響應頭 
      // 獲取響應體 
      console.log(this.responseText)// 文本形式 
      console.log(this.responseXML) // XML 形式，瞭解便可不用了 
  } 
 }

三.具體用法

3.1 GET請求

一般在一次 GET 請求過程當中，參數傳遞都是經過 URL 地址中的 ? 參數傳遞。json

var xhr = new XMLHttpRequest()
//GET請求傳遞參數一般使用的是問號傳遞
//這裏能夠在請求地址後面加上參數，從而傳遞數據到服務端
xhr.open('GET','./delete.php?id=1')
//通常在GET請求時無需設置響應體，能夠傳null或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange=function(){
    if(this.readyState===4){
        console.log(this.responseText)
    }
}

//通常狀況下 URL 傳遞的都是參數性質的數據，而 POST 通常都是業務數據

3.2 POST請求

POST 請求過程當中，都是採用請求體承載須要提交的數據。

var xhr = new XMLHttpRequest()
//open 方法的第一個參數的做用就是設置請求的method
xhr.open('POST', './add.php')
//設置請求頭中的 Content‐Type 爲 application/x‐www‐form‐urlencoded
//標識這次請求的請求體格式爲 urlencoded 以便於服務端接收數據
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 須要提交到服務端的數據能夠經過 send 方法的參數傳遞
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        console.log(this.responseText)
    }
}

3.3 同步和異步

關於同步和異步的概念在生活中有不少常見的場景

xhr.open() 方法第三個參數要求傳入的是一個 bool 值，其做用就是設置這次請求是否採用異步方式執行，默認爲 true ，若是須要同步執行能夠經過傳遞 false 實現：

console.log('before ajax')
var xhr = new XMLHttpRequest() 
// 默認第三個參數爲 true 意味着採用異步方式執行
xhr.open('GET', './time.php', true) 
xhr.send(null) 
xhr.onreadystatechange = function () { 
	if (this.readyState === 4) { 
	// 這裏的代碼最後執行 
	console.log('request done') 
	} 
}
console.log('after ajax')

若是採用同步方式執行，則代碼會卡死在 xhr.send() 這一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式 
xhr.open('GET', './time.php', false) 
// 同步方式 執行須要 先註冊事件再調用 send，不然 readystatechange 沒法觸發
xhr.onreadystatechange = function () { 
	if (this.readyState === 4) { 
    // 這裏的代碼最後執行 
    console.log('request done') 
    } 
}
xhr.send(null) 
console.log('after ajax')

演示同步異步差別。

必定在發送請求 send() 以前註冊 readystatechange （無論同步或者異步）

爲了讓這個事件能夠更加可靠（必定觸發），必定是先註冊

瞭解同步模式便可，切記不要使用同步模式。

至此，咱們已經大體瞭解了 AJAX 的基本 API 。

3.4 響應數據格式

提問：若是服務端返回一個複雜數據，該如何處理？

咱們關心的就是服務端發出何種格式的數據，這種格式如何在客戶端用Javascript解析

對於複雜的響應數據（如複雜的表格表單數據）：

首先咱們須要進行不少的DOM操做
//先建立行
//在建立列
//再將列添加到行
//再將行添加再tbody
//拼接字符串
等等大量的操做
這裏也引出：Vue,React等響應式數據框架的好處

3.5 處理響應數據渲染

模板引擎

模板引擎實際上就是一個 API，模板引擎有不少種，使用方式大同小異

目的爲了能夠更容易的將數據渲染到 HTML中

3.6 兼容方案

XMLHttpRequest 在老版本瀏覽器（IE5/6）中有兼容問題，能夠經過另一種方式代替

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

四.封裝

4.1 AJAX請求封裝

/**
 * 發送一個 AJAX 請求 
 * @param {String} method 請求方法 
 * @param {String} url 請求地址 
 * @param {Object} params 請求參數 
 * @param {Function} done 請求完成事後須要作的事情（委託/回調） 
*/
function ajax (method, url, params, done) { 
    // 統一轉換爲大寫便於後續判斷 
    method = method.toUpperCase()
    
    // 對象形式的參數轉換爲 urlencoded 格式 
    var pairs = [] 
    for (var key in params) { 
        pairs.push(key + '=' + params[key]) 
    }
    var querystring = pairs.join('&')
    
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
    
    xhr.addEventListener('readystatechange', function () { if (this.readyState !== 4) return
    
    // 嘗試經過 JSON 格式解析響應體 
    try { 
        done(JSON.parse(this.responseText)) 
    } catch (e) { 
        done(this.responseText) 
    } 
  })
    
    // 若是是 GET 請求就設置 URL 地址 問號參數 
    if (method === 'GET') { 
        url += '?' + querystring 
    }
    
    xhr.open(method, url)
    
    // 若是是 POST 請求就設置請求體 
    var data = null if (method === 'POST') { 
        xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded') 		   data = querystring 
    }
    xhr.send(data) 
}
ajax('get', './get.php', { id: 123 }, function (data) { 
    console.log(data) 
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) { 	
    console.log(data) 
})

4.2 jQuery中的AJAX

jQuery 中有一套專門針對 AJAX 的封裝，功能十分完善，常用，須要着重注意。

$.ajax

$.ajax({ 
    url: './get.php', 
    type: 'get', 
    dataType: 'json', 
    data: { id: 1 }, 
    beforeSend: function (xhr) { 
        console.log('before send') 
    },
    success: function (data) {  
        console.log(data) 
    },
    error: function (err) { 
        console.log(err) 
    },
    complete: function () { 
        console.log('request completed') 
    } 
})

經常使用參數選項：

url：請求地址
type：請求方法，默認爲 get
dataType：服務端響應數據類型
contentType：請求體內容類型，默認 application/x-www-form-urlencoded
data：須要傳遞到服務端的數據，若是 GET 則經過 URL 傳遞，若是 POST 則經過請求體傳遞
timeout：請求超時時間
beforeSend：請求發起以前觸發
success：請求成功以後觸發（響應狀態碼 200）
error：請求失敗觸發
complete：請求完成觸發（無論成功與否都回進行的操做）

$.get

上面的$.ajax接近於底層API
jquery中還有高度封裝的API
$.get('time.php',function(res){
    console.log(res)
})

$post

$.post('time.php',function(res){
    console.log(res)
})

####4.3 其餘

$.getJSON() ----無論返回什麼，都轉成json格式
$(selector).load() ---可實現局部加載
$.getScript() ---
還有不少，查閱官方文檔（也可查看別人翻譯的中文文檔）

五.跨域

跨域能夠說跟ajax一點關係沒有，也能夠說與ajax有着絕對性的聯繫

5.1相關概念

同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協議，接口，徹底相同，只有同源的地址才能夠相互經過AJAX的方式請求。

同源或不一樣源說的是兩個地址之間的關係，不一樣源地址之間請求咱們稱之爲跨域請求

同源的頁面數據可以相互請求

什麼是同源？例如：http://www.example.com/detail.html 與一下地址對比

對比地址	是否同源	緣由
http://api.example.com/detail.html	不一樣源	域名不一樣
https://www.example.com/detail.html	不一樣源	協議不一樣
http://www.example.com:8080/detail.html	不一樣源	端口不一樣
http://api.example.com:8080/detail.html	不一樣源	域名，端口不一樣
https://api.example.com/detail.html	不一樣源	協議、域名不一樣
https://www.example.com:8080/detail.html	不一樣源	端口、協議不一樣
http://www.example.com/other.html	同源	只是目錄不一樣

5.2 解決方案

5.2.1 JSONP

JSON with Padding，（padding：邊距，補充）（jsonp可理解爲json的補充）是一種藉助於 script 標籤發送跨域請求的技巧。

其原理就是在客戶端藉助 script 標籤請求服務端的一個動態網頁（php 文件），服務端的這個動態網頁返回一段帶有函數調用的 JavaScript 全局函數調用的腳本，將本來須要返回給客戶端的數據傳遞進去。

之後絕大多數狀況都是採用 JSONP 的手段完成不一樣源地址之間的跨域請求

客戶端 http://www.zce.me/users-list.html

<script src="http://api.zce.me/users.php?callback=foo"></script>

服務端 http://api.zce.me/users.php?callback=foo 返回的結果

foo(['我', '是', '你', '原', '本', '需', '要', '的', '數', '據'])

總結一下：因爲 XMLHttpRequest 沒法發送不一樣源地址之間的跨域請求，因此咱們必需要另尋他法，script 這種方案就是咱們最終選擇的方式，咱們把這種方式稱之爲 JSONP，若是你不瞭解原理，先記住怎麼用，多用一段時間再來看原理。

問題：

JSONP 須要服務端配合，服務端按照客戶端的要求返回一段 JavaScript 調用客戶端的函數
只能發送 GET 請求

注意：JSONP 用的是 script 標籤，更 AJAX 提供的 XMLHttpRequest 沒有任何關係！！！

jQuery 中使用 JSONP 就是將 dataType 設置爲 jsonp 76

其餘常見的 AJAX 封裝庫： Axios

5.2.2 CORS

Cross Origin Resource Share ，跨域資源共享 (直接請求跨域資源)

可是由於版本比較新，存在一些兼容問題

// 容許遠端訪問 
header('Access‐Control‐Allow‐Origin: *');

這種方案無需客戶端做出任何變化（客戶端不用改代碼），只是在被請求的服務端響應的時候添加一個 Access- Control-Allow-Origin 的響應頭，表示這個資源是否容許指定域請求。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。