AJAX常用的兩種跨域方法是什么

這篇文章主要介紹“AJAX常用的兩種跨域方法是什么”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“AJAX常用的兩種跨域方法是什么”文章能幫助大家解決問題。

　　首先什么是AJAX？

　　AJAX : Asynchronous JavaScript and XML（異步JavaScript和XML技術(shù)）。

　　JavaScript：XMLHttpRequest(核心對(duì)象)。

　　XML：可擴(kuò)展標(biāo)記語言，數(shù)據(jù)存儲(chǔ)與交換。

　　是在不重新加載（刷新）整個(gè)頁面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的內(nèi)容。

　　優(yōu)缺點(diǎn)：無刷新技術(shù)，提升用戶體驗(yàn)，減少網(wǎng)絡(luò)占用；不利于SEO優(yōu)化。

　　步驟：

　　1. 創(chuàng)建核心對(duì)象

　　var xhr=new XMLHttpRequest();

　　2. 準(zhǔn)備建立連接

　　xhr.open(method, url, async);

　　method -- 請(qǐng)求方式："GET"/"POST"

　　url -- 請(qǐng)求資源的URL

　　async -- 是否異步，通常 true(異步)，如果設(shè)置為 false表示是同步

　　3. 發(fā)送請(qǐng)求

　　xhr.send();

　　4. 處理響應(yīng)

　　xhr.onreadystatechange=function(){}

　　xhr.readyState -- 就緒狀態(tài)碼

　　-- 表示 xhr 狀態(tài)信息，即請(qǐng)求到達(dá)哪個(gè)階段

　　-- 4 ：請(qǐng)求處理完畢，響應(yīng)就緒

　　xhr.status -- HTTP 狀態(tài)碼

　　-- 200 ：OK，請(qǐng)求成功

　　xhr.responseText -- 獲取響應(yīng)文本

　　就緒狀態(tài)碼：

　　0: 請(qǐng)求未初始化

　　1: 服務(wù)器連接已建立

　　2: 請(qǐng)求已接收

　　3: 請(qǐng)求處理中

　　4: 請(qǐng)求已完成，且響應(yīng)已就緒

　　常用HTTP：

　　1**——信息，服務(wù)器收到請(qǐng)求，需要請(qǐng)求者繼續(xù)執(zhí)行操作

　　2**——成功，操作被成功接收并處理

　　3**——重定向，需要進(jìn)一步的操作以完成請(qǐng)求

　　4**——客戶端錯(cuò)誤，請(qǐng)求包含語法錯(cuò)誤或無法完成請(qǐng)求

　　5**——服務(wù)器錯(cuò)誤，服務(wù)器在處理請(qǐng)求的過程中發(fā)生了錯(cuò)誤

　　說跨域前需要先說說同源策略

　　同源策略：

　　瀏覽器安全策略，保障非同源資源之間數(shù)據(jù)訪問的安全性。

　　默認(rèn)不允許非同源的資源直接訪問。

　　URL：協(xié)議://域名:端口/路徑名稱?查詢字符串#hash

　　同源：協(xié)議、域名、端口完全一致，只要三個(gè)中有任何一個(gè)不一致，則是非同源

　　非同源資源間需要進(jìn)行訪問，則需要實(shí)現(xiàn)跨域。

　　跨域方法一：CORS跨域

　　CORS跨域比較簡(jiǎn)單，只需要后端在PHP文件頭部加一個(gè)頭信息及：

　　header('Access-Control-Allow-Origin:*')；

　　*表示允許所有域名訪問，如果只是一個(gè)文件訪問則吧*換成指定域名。

　　可解決GET/POST跨域需求

　　跨域方法二：JSONP跨域

　　利用<script>在引入外部JS時(shí)不受同源策略限制的特性，同時(shí)包含JSON編碼數(shù)據(jù)的響應(yīng)體會(huì)自動(dòng)解碼，來實(shí)現(xiàn)跨域。JSONP處理的是GET請(qǐng)求方式的跨域

　　步驟：

　　后端：

　　有服務(wù)器端構(gòu)建一個(gè)字符串：字符串中的內(nèi)容是能夠在 JS 中執(zhí)行的函數(shù)調(diào)用的結(jié)構(gòu)

　　前端：

　　1. 創(chuàng)建 元素

　　2. 設(shè)置 src 屬性，傳遞 callback 參數(shù)指明全局回調(diào)函數(shù)的名稱

　　3. 添加到 body 中

　　4. 創(chuàng)建全局函數(shù)，用于處理響應(yīng)數(shù)據(jù)

　　5. 刪除 元素

關(guān)于“AJAX常用的兩種跨域方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。