Ajax-05

xhr（level-2）新特性

responseType屬性和response屬性

responseType: 表示預期服務器返回的數據的類型

• “” ，默認空
• text，和空一樣，表示服務器返回的數據是字符串格式
• json，表示服務器返回的是json格式
• document，表示服務器返回的是xml格式

<script>let xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (this.readyState === 4 && this.status === 200) {console.log(this.response);}};xhr.responseType = 'json'; // 指定，服務器返回的數據是json類型xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();</script>

response：響應

• 用于接收服務器返回的結果
• response可以接收任何類型的結果
• 會根據responseType指定的值，自動處理服務器返回的結果（自動將JSON轉成JS）

onload事件

onloadend事件

onloadstart事件

<script>// window.onload = function () {// }let xhr = new XMLHttpRequest();// ajax請求完畢(成功)，當readyState===4的時候，會觸發xhr.onload事件xhr.onload = function () {// ? 能不能在這里接收到服務器返回的結果// ? 要不要加判斷，然后在接收結果console.log(this.response);};xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();/*相關的其他事件：- onload ajax請求成功之后觸發- onloadstart ajax請求之前觸發- onloadend ajax請求完成之后觸發（無論成功或失敗都會觸發）*/</script>

jQuery其他方法

$.ajax()其他選項

$.ajax({type: 'GET',url: 'xxxxx',data: {},success: function (res) {},contentType: false, // 默認值 application/x-www-form-urlencodedprocessData: false,/*下面的選項大家知道，了解即可*/timeout: 10, // 設置請求超時事件ontimeout: function () {}, // 請求超時之后的處理函數beforeSend: function () {}, // 發送請求之前觸發的函數complete: function () {}, // 表示請求響應結束之后觸發的函數（無論成功失敗）dataType: 'json', // 預期服務器返回數據的類型，相當于responseTypeheaders: {}, // 用于設置請求頭xhr: function () {let xhr = new XMLH........return xhr; // 必須return xhr對象}, // 允許我們自定義xhr對象來完成一些jQuery做不到的事 });

$.ajaxSetup();

全局配置ajax選項：

$.ajaxSetup({// 對象里面的內容，和$.ajax里面的對象的內容格式一樣timeout: 100, // 全局配置請求超時時間為100毫秒type: 'POST', // 全局配置請求方式為POST });

$(document).ajaxStart();

• ajax請求開始，觸發的事件

$(document).ajaxStop();

• ajax請求終止后觸發的事件

例如：NProgress.start() 和 NProgress.done() 的作用相同

$.ajaxPrefilter();

在每個ajax請求發送之前，自定義ajax的選項或修改ajax的選項。

$.ajaxPrefilter(function (options) {// options是當前ajax請求的所有選項// 得到ajax請求的所有選項之后，可以對他進行修改 });

axios簡介

• 它是別人封裝的一個能夠實現ajax請求的庫。

• 體積小，文件大小官方說6kb。

• 專門用于處理ajax請求，比jQuery還要強大，沒有其他功能

// 有沒有類似 $.get的方法 axios.get('http://www.liulongbin.top:3006/api/getbooks').then(function (res) {console.log(res);});

https://github.com/axios/axios

跨域（理解）

同源策略

• 同源指的是，兩個url的 協議、域名、端口都相同，那么這兩個url就是同源的
• 如果兩個url的 協議、域名、端口只要要一個不一樣，叫做非同源
• 如果非同源，以下三種行為會受到限制
  • DOM無法操作
  • cookie無法獲取 (了解)
  • Ajax請求無效

兩個url，指的是打開頁面的url，和ajax請求的地址

跨域Ajax請求

打開頁面的url 和 接口地址的url 如果非同源，就是跨域請求。

我們之前練習的所有案例，都是跨域請求，之所以能夠成功，是因為 liulongbin 老師的接口做了處理。

如何實現跨域請求：

• JSONP
  • 出現的比較早，瀏覽器都支持。
• CORS
  • 出現的完，但是是w3c的標準，是標準的解決ajax跨域問題的方法。

JSONP方案實現跨域請求

原生代碼實現JSONP：

• 前端（準備一個函數，比如叫做abc。并且設置好形參，準備接收結果）
• 前端（使用script標簽src屬性，去請求jsonp接口，必須指定callback參數，值就是abc）

細節問題：

• 請求，可以通過network查看，但是注意它不是ajax請求
• 通過network查看到，服務器返回一個字符串，這個字符串會被瀏覽器當做js代碼解釋
• 正規的JSONP接口，都必須傳遞callback參數，值是我們準備好的函數名。

jQuery方法實現JSONP

// 方法一： $.getJSON('url?callback=?', data, callback);// 方法二： $.ajax({url: '',data: {},success: function (res) {},dataType: 'jsonp' // 必須指定的一項 });

淘寶搜索建議案例

接口

淘寶搜索建議接口：'https://suggest.taobao.com/sug

請求參數： q – 我們輸入的值

步驟：

• 注冊輸入框的鍵盤彈起事件
• 判斷輸入框的值是否為空
• 使用JSONP請求接口，獲取搜索建議
• 將搜索建議渲染到頁面中（需要自定義ul和css樣式）

#sousuo, #sousuo li {list-style: none;padding: 0;margin: 0; } #sousuo li {height: 25px;line-height: 25px;padding-left: 5px;color: gray; } <!-- 下面的ul放到搜索區的后面 --> <!-- 搜索建議區 --> <ul id="sousuo"></ul> // 注冊輸入框的keyup事件，當鍵盤彈起的時候，完成搜索 $('.ipt').keyup(function () {// 判斷輸入框的值是否為空let val = $(this).val().trim();if (val === '') {// 清空搜索建議列表$('#sousuo').empty();return;}// 發送JSONP請求，獲取搜索建議$.ajax({url: 'https://suggest.taobao.com/sug',data: {q: val},success: function (res) {// console.log(res);let str = '';res.result.forEach(item => {str += '<li>' + item[0] + '</li>';});// 把拼接好的li，放到ul中$('#sousuo').html(str);},dataType: 'jsonp' // 必須指定的}); });

CORS方案實現跨域請求

CORS翻譯過來，跨域資源共享。

CORS實現跨域，和前端沒有關系。前端還是正常的寫代碼，完成ajax請求即可。

CORS響應頭：https://developer.mozilla.org/zh-CN/docs/Glossary/CORS

CORS介紹：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

防抖和節流（掌握）

防抖

節流

總結

以上是生活随笔為你收集整理的Ajax — 第五天的全部內容，希望文章能夠幫你解決所遇到的問題。

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