當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

AJAX之封装+跨域

發(fā)布時(shí)間：2023/12/3 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 AJAX之封装+跨域小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

AJAX5步法

先簡(jiǎn)單回顧下之前所說(shuō)的5步法
1、創(chuàng)建異步對(duì)象XMLHttpRequest

/* 1.創(chuàng)建 XMLHttpRequest一步對(duì)象*/var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest(); /* 主流瀏覽器 */} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* 兼容IE寫(xiě)法 */}

2、設(shè)置回調(diào)函數(shù)

/* 2.設(shè)置回調(diào)函數(shù)*/xhr.onreadystatechange = callback;

3、open()方法連接服務(wù)器

/* 3.使用open方法與服務(wù)器建立連接 */xhr.open("get", "naonao.text", true)

4、send()方法發(fā)送數(shù)據(jù)至服務(wù)器

/* 4.注冊(cè)事件，設(shè)置和服務(wù)器的交互信息，向服務(wù)器發(fā)送數(shù)據(jù) */xhr.send()

5、回調(diào)函數(shù)中針對(duì)不同響應(yīng)狀態(tài)進(jìn)行處理，局部更新界面
這里先獲取下返回?cái)?shù)據(jù)，reponseText表示以字符串形式接收服務(wù)器端返回信息

function callback() {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText)}}

完整代碼如下所示

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}div {border: 1px solid red;margin: 50px;}p {border: 1px solid blue;}</style></head><body><button name="ajax">ajax</button></body><script type="text/javascript">var btn = document.querySelector("button[name='ajax']");console.log(btn)btn.addEventListener('click', callback, false) /* false是事件冒泡，true是事件捕獲，不寫(xiě)的話(huà)默認(rèn)是false。 */function callback() {/* 1.創(chuàng)建 XMLHttpRequest一步對(duì)象*/var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest(); /* 主流瀏覽器 */} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* 兼容IE寫(xiě)法 */}console.log(xhr)/* 2.設(shè)置回調(diào)函數(shù)*/xhr.onreadystatechange = callback;/* 3.使用open方法與服務(wù)器建立連接 */xhr.open("get", "naonao.text", true)/* 4.注冊(cè)事件，設(shè)置和服務(wù)器的交互信息，向服務(wù)器發(fā)送數(shù)據(jù) */xhr.send()/* 5.回調(diào)函數(shù)處理---響應(yīng)---針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理 */function callback() {if (xhr.readyState == 4 && xhr.status == 200) {var responseText = xhr.responseText;console.log(responseText)var xhrObject = JSON.parse(responseText)console.log(xhrObject)var new_div = document.createElement('div');document.body.appendChild(new_div);for (var i = 0; i < xhrObject.length; i++) {var new_p = document.createElement('p');var new_string = "";new_string += "姓名:" + xhrObject[i].name;new_string += " &nbsp 年齡:" + xhrObject[i].age;new_p.innerHTML = new_string;new_div.appendChild(new_p)}}}}</script> </html>

接下來(lái)測(cè)試下get請(qǐng)求類(lèi)型，將open連接服務(wù)器步驟里的請(qǐng)求類(lèi)型設(shè)置為get，如下所示

xhr.open("get", "naonao.text")

利用HBuilderX編輯器打開(kāi)(啟動(dòng)時(shí)自帶本地服務(wù)器)如下所示
JSON數(shù)據(jù)無(wú)法直接在頁(yè)面進(jìn)行操作，所以需要先將JSON字符串轉(zhuǎn)成JS普通對(duì)象數(shù)組型數(shù)據(jù)。
接下來(lái)轉(zhuǎn)換JSON數(shù)據(jù)為普通JS對(duì)象型，如下所示

AJAX封裝

【前言】
- 目前為止，已經(jīng)實(shí)現(xiàn)基本功能，但AJAX的調(diào)用還十分麻煩，步驟比較繁瑣，在日常開(kāi)發(fā)一般會(huì)將其進(jìn)行封裝，所以接下來(lái)封裝下AJAX功能相關(guān)步驟函數(shù)，以后使用直接調(diào)用即可，同時(shí)大大提高了開(kāi)發(fā)效率。
- 為了使用方便，接下來(lái)封裝AJAX的get和post
  封裝：基本模板與傳參

/* url路徑,data是否攜帶參數(shù),method請(qǐng)求類(lèi)型,success成功后返回值 */function ajax(url, data, method, success) {}

此時(shí)調(diào)用模板時(shí)，如下所示

/* 注意：因?yàn)間et方法里沒(méi)有參數(shù)，所以這里第二個(gè)參數(shù)設(shè)置為unll */ajax('index.tet',unll,'get',function(){/* 回調(diào)函數(shù) */})

封裝1：建立異步對(duì)象

function ajax(url, datd, method, success) {/* 1.建立異步對(duì)象 */var xhr;if (window.HML.HttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject('Microsoft.XMLHTTP');}}

封裝2：判斷請(qǐng)求類(lèi)型

function ajax(url, datd, method, success) {/* 1.建立異步對(duì)象 */var xhr;if (window.HML.HttpRequest) {/* 2.判斷請(qǐng)求類(lèi)型 */if (method == 'get') {/* get請(qǐng)求類(lèi)型 */} else {/* post請(qǐng)求類(lèi)型 */}}}

封裝2：判斷請(qǐng)求類(lèi)型
- get請(qǐng)求類(lèi)型傳值方式是將數(shù)據(jù)拼接到路由后進(jìn)行傳值，所以接下來(lái)需要判斷是否傳值(對(duì)比post請(qǐng)求)，回顧之前所講
  
  1、get請(qǐng)求類(lèi)型傳值方式是將數(shù)據(jù)拼接到路由后進(jìn)行傳值

/* 2.判斷請(qǐng)求類(lèi)型 */if (method == 'get') {/* get請(qǐng)求類(lèi)型 */if (datd) {url += '?';url += datd;}xhr.open(method, url)xhr.send();} else {/* post請(qǐng)求類(lèi)型 */}

2、post請(qǐng)求類(lèi)型判斷是否有傳值，如果有則send發(fā)送至服務(wù)器，沒(méi)有則不發(fā)

/* post請(qǐng)求類(lèi)型 */xhr.open(method, url);if (data) {xhr.send(data);} else {xhr.send()}

封裝3：注冊(cè)事件，針對(duì)不同狀態(tài)進(jìn)行響應(yīng)，獲取返回?cái)?shù)據(jù)

/* 3.注冊(cè)事件，針對(duì)不同的狀態(tài)進(jìn)行響應(yīng)，獲取返回?cái)?shù)據(jù) */xhr.onreadystadechange = function() {if (xhr.readyStade == 4 && xhr.status == 200) {/* 4.成功后執(zhí)行回調(diào)函數(shù)獲取返回?cái)?shù)據(jù)，reponseText表示以字符串的形式接收服務(wù)器端返回的信息然后將其傳到調(diào)用處*/success(xhr.responseText);}}

開(kāi)發(fā)中，也可以將響應(yīng)，即注冊(cè)事件步驟，直接移至第一步創(chuàng)建異步對(duì)象下，以便更好地監(jiān)聽(tīng)到狀態(tài)變化。
封裝調(diào)用：
- 接下來(lái)外部傳參調(diào)用下封裝的AJAX函數(shù)
  最后的匿名函數(shù)對(duì)應(yīng)AJAX函數(shù)中封裝的success成功回調(diào)，success里傳參reponseText表示以字符串形式接收服務(wù)器端返回信息

ajax('index.txt', unll, 'get', function(option) {/* 回調(diào)函數(shù) */console.log(option)})

此時(shí)控制臺(tái)測(cè)試，便可以輸出打印JSON格式數(shù)據(jù)，所以如果想用JS進(jìn)一步操作，需要進(jìn)行反序列化解析即JSON.parse()，然后操作其對(duì)頁(yè)面進(jìn)行局部更新。

ajax('index.txt', unll, 'get', function(option) {/* 回調(diào)函數(shù) */console.log(option); /* JSON格式 */console.log(JSON.parse(option)); /* 普通js對(duì)象數(shù)組格式 */})

跨域簡(jiǎn)介：
AJAX跨域指的是JS在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信。
跨域方案：
- 1、jsonp跨域(重點(diǎn))----前端處理方法
- 2、cros跨域-----后臺(tái)處理
常見(jiàn)跨域場(chǎng)景？
- 所謂的同源是指，域名、協(xié)議、端口均為相同。
  http://www.nealyang.cn/index.html 調(diào)用 http://www.nealyang.cn/server.php 非跨域
  http://www.nealyang.cn/index.html 調(diào)用 http://www.neal.cn/server.php 跨域,主域不同
  http://abc.nealyang.cn/index.html 調(diào)用 http://abc.neal.cn/server.php 跨域,子域名不同
  http://www.nealyang.cn:8080/index.html 調(diào)用 http://www.nealyang.cn/server.php 跨域,端口不同
  https://www.nealyang.cn/index.html 調(diào)用 http://www.nealyang.cn/server.php 跨域,協(xié)議不同
  localhost 調(diào)用 127.0.0.1 跨域

AJAX跨域-JSONP

JSONP跨域：
- jsonp跨域原理：借助網(wǎng)頁(yè)標(biāo)簽中src屬性的跨域特性實(shí)現(xiàn)
- src簡(jiǎn)介：src是source的縮寫(xiě)，資源的意思，在html中src表示資源地址，是js文件和圖片文件的引入方式，經(jīng)常引用外部資源，可以實(shí)現(xiàn)跨域訪問(wèn)，如下所示
接下來(lái)調(diào)用下百度搜索接口，如下所示
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=
解析：
wd為搜索關(guān)鍵詞，百度搜索功能發(fā)送請(qǐng)求類(lèi)型為get，因?yàn)樗训年P(guān)鍵詞可以在url中可見(jiàn)。這里先不用回調(diào)
將之前代碼做下調(diào)整，將url改為百度搜索接口，如下所示
注意：
因?yàn)槭莋et方式，所以關(guān)鍵詞傳值需要拼接到url里，即通過(guò)data傳參，且參數(shù)為想要的關(guān)鍵詞，然后之前封裝好的AJAX會(huì)將其進(jìn)行封裝，也就是說(shuō)最后send對(duì)應(yīng)的接口url為經(jīng)過(guò)封裝的AJAX函數(shù)拼接后的地址
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=海賊王
將之前代碼做下調(diào)整，將url改為百度搜索接口，如下所示
接下來(lái)使用JSONP實(shí)現(xiàn)跨域，本質(zhì)利用src屬性的跨域請(qǐng)求資源特性，同理<script></script>腳本標(biāo)簽也是通過(guò)src引入資源，所以可以進(jìn)行封裝處理，實(shí)現(xiàn)AJAX的跨域訪問(wèn)遠(yuǎn)程資源。
接下來(lái)做下測(cè)試，script標(biāo)簽引入接口文件，并在接口加入回調(diào)函數(shù)，然后在頁(yè)面定義調(diào)用
測(cè)試結(jié)果如下
此時(shí)雖然有報(bào)錯(cuò)，但是已經(jīng)沒(méi)有報(bào)跨域錯(cuò)誤，接下來(lái)將調(diào)用位置做下調(diào)整，先定義聲明函數(shù)，然后再進(jìn)行傳值，如下所示

修改后測(cè)試結(jié)果如下
由此分析出，可以通過(guò)src屬性實(shí)現(xiàn)跨域調(diào)取資源。但JSONP為動(dòng)態(tài)插入，所以接下來(lái)還需要進(jìn)行調(diào)整，之后介紹。
除了通過(guò)JSONP解決跨域外，常見(jiàn)的方法還包含CROS方法
【前言】
- CROS需要在后臺(tái)進(jìn)行配置→允許所有域名訪問(wèn)
  - 1、PHP后臺(tái)僅僅需要添加一句代碼即可header(’ Access-Control-Allow-Origin : * '); 表示允許所有域名訪問(wèn)。
  - 2、JAVA后臺(tái)需要下載CROS包，然后進(jìn)一步配置

小結(jié)

目前為止，講解了JSONP跨域原理和CROS跨域方案
- 下節(jié)利用前端JSONP實(shí)現(xiàn)“百度關(guān)鍵詞”跨域案例。
完整的代碼如下：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ajax</title><style>input[name="search"]{text-indent: 10px;height: 40px;line-height: 24px;width: 472px;border: 1px solid rgba(0,0,0,.3);outline: 0;background: #FFF;overflow-y: visible;font-size: 100%;color: #000;vertical-align: middle;}.btn{font-size: 18px;font-weight: 700;color: #FFF;background-color: #FF4200;cursor: pointer;height: 40px;border: none;width: 74px;background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);background-repeat: repeat-x;}#menu_ul{padding: 0;margin: 0;position: absolute;left: 8px;top: 54px;height: auto;width: 470px;border: 1px solid rgba(0,0,0,.6);}</style></head><body><input type="text" name="search" placeholder="請(qǐng)輸入商品關(guān)鍵字"/><button class="btn">搜索</button><ul id="menu_ul"></ul><script>var searchInput = document.querySelector('input[name="search"]');console.log(searchInput)searchInput.addEventListener('keyup',function(){if(document.querySelector("#new_script_id")){document.querySelector("#new_script_id").remove();}console.log(this.value)var new_script = document.createElement('script');new_script.src = "http://suggest.taobao.com/sug?code=utf-8&q="+this.value+"&callback=cb";new_script.id = "new_script_id";document.body.appendChild(new_script)},false)/*回調(diào)*/var menu_ul = document.querySelector("#menu_ul");function cb(option){console.log(option)var str = "";for(var i=0;i<option.result.length;i++){str+="<li>"+option.result[i][0]+"</li>"}menu_ul.innerHTML = str;}</script></body> </html>

完畢…

總結(jié)

以上是生活随笔為你收集整理的AJAX之封装+跨域的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

跨域
Ajax