當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX之封装+跨域

發布時間：2023/12/3 编程问答 59 豆豆

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

AJAX5步法

先簡單回顧下之前所說的5步法
1、創建異步對象XMLHttpRequest

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

2、設置回調函數

/* 2.設置回調函數*/xhr.onreadystatechange = callback;

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

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

4、send()方法發送數據至服務器

/* 4.注冊事件，設置和服務器的交互信息，向服務器發送數據 */xhr.send()

5、回調函數中針對不同響應狀態進行處理，局部更新界面
這里先獲取下返回數據，reponseText表示以字符串形式接收服務器端返回信息

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是事件捕獲，不寫的話默認是false。 */function callback() {/* 1.創建 XMLHttpRequest一步對象*/var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest(); /* 主流瀏覽器 */} else {xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* 兼容IE寫法 */}console.log(xhr)/* 2.設置回調函數*/xhr.onreadystatechange = callback;/* 3.使用open方法與服務器建立連接 */xhr.open("get", "naonao.text", true)/* 4.注冊事件，設置和服務器的交互信息，向服務器發送數據 */xhr.send()/* 5.回調函數處理---響應---針對不同的響應狀態進行處理 */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>

接下來測試下get請求類型，將open連接服務器步驟里的請求類型設置為get，如下所示

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

利用HBuilderX編輯器打開(啟動時自帶本地服務器)如下所示
JSON數據無法直接在頁面進行操作，所以需要先將JSON字符串轉成JS普通對象數組型數據。
接下來轉換JSON數據為普通JS對象型，如下所示

AJAX封裝

【前言】
- 目前為止，已經實現基本功能，但AJAX的調用還十分麻煩，步驟比較繁瑣，在日常開發一般會將其進行封裝，所以接下來封裝下AJAX功能相關步驟函數，以后使用直接調用即可，同時大大提高了開發效率。
- 為了使用方便，接下來封裝AJAX的get和post
  封裝：基本模板與傳參

/* url路徑,data是否攜帶參數,method請求類型,success成功后返回值 */function ajax(url, data, method, success) {}

此時調用模板時，如下所示

/* 注意：因為get方法里沒有參數，所以這里第二個參數設置為unll */ajax('index.tet',unll,'get',function(){/* 回調函數 */})

封裝1：建立異步對象

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

封裝2：判斷請求類型

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

封裝2：判斷請求類型
- get請求類型傳值方式是將數據拼接到路由后進行傳值，所以接下來需要判斷是否傳值(對比post請求)，回顧之前所講
  
  1、get請求類型傳值方式是將數據拼接到路由后進行傳值

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

2、post請求類型判斷是否有傳值，如果有則send發送至服務器，沒有則不發

/* post請求類型 */xhr.open(method, url);if (data) {xhr.send(data);} else {xhr.send()}

封裝3：注冊事件，針對不同狀態進行響應，獲取返回數據

/* 3.注冊事件，針對不同的狀態進行響應，獲取返回數據 */xhr.onreadystadechange = function() {if (xhr.readyStade == 4 && xhr.status == 200) {/* 4.成功后執行回調函數獲取返回數據，reponseText表示以字符串的形式接收服務器端返回的信息然后將其傳到調用處*/success(xhr.responseText);}}

開發中，也可以將響應，即注冊事件步驟，直接移至第一步創建異步對象下，以便更好地監聽到狀態變化。
封裝調用：
- 接下來外部傳參調用下封裝的AJAX函數
  最后的匿名函數對應AJAX函數中封裝的success成功回調，success里傳參reponseText表示以字符串形式接收服務器端返回信息

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

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

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

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

AJAX跨域-JSONP

JSONP跨域：
- jsonp跨域原理：借助網頁標簽中src屬性的跨域特性實現
- src簡介：src是source的縮寫，資源的意思，在html中src表示資源地址，是js文件和圖片文件的引入方式，經常引用外部資源，可以實現跨域訪問，如下所示
接下來調用下百度搜索接口，如下所示
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=
解析：
wd為搜索關鍵詞，百度搜索功能發送請求類型為get，因為所搜的關鍵詞可以在url中可見。這里先不用回調
將之前代碼做下調整，將url改為百度搜索接口，如下所示
注意：
因為是get方式，所以關鍵詞傳值需要拼接到url里，即通過data傳參，且參數為想要的關鍵詞，然后之前封裝好的AJAX會將其進行封裝，也就是說最后send對應的接口url為經過封裝的AJAX函數拼接后的地址
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=海賊王
將之前代碼做下調整，將url改為百度搜索接口，如下所示
接下來使用JSONP實現跨域，本質利用src屬性的跨域請求資源特性，同理<script></script>腳本標簽也是通過src引入資源，所以可以進行封裝處理，實現AJAX的跨域訪問遠程資源。
接下來做下測試，script標簽引入接口文件，并在接口加入回調函數，然后在頁面定義調用
測試結果如下
此時雖然有報錯，但是已經沒有報跨域錯誤，接下來將調用位置做下調整，先定義聲明函數，然后再進行傳值，如下所示

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

小結

目前為止，講解了JSONP跨域原理和CROS跨域方案
- 下節利用前端JSONP實現“百度關鍵詞”跨域案例。
完整的代碼如下：

<!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="請輸入商品關鍵字"/><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)/*回調*/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>

完畢…

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

跨域
Ajax