Ajax的基本使用和同源策略與跨域(JSONP和CORS)
技術標籤：Ajaxajaxjavascript
一、原生Ajax的使用
什麼是ajax?
ajax(非同步 javaScript xml）能夠重新整理網頁區域性資料而不是重新整理網頁。
使用流程:
①GET請求：
1、例項化一個新的XMLHttpRequest物件
const xhr = new XMLHttpRequest();
2、對例項進行初始化
設定請求的方法和url:
xhr.open(‘GET’,‘http://127.0.0.1:8000/server’);
open(）方法中的幾個引數分別是open(method,url,async)
method 是ajax的請求型別 get或者post請求url 是請求的url 統一資源識別符號
async是是否同步或者非同步 true 或者 false
可以為url設定引數：?後跟引數(a=100&b=200…)不同引數用&符分隔
xhr.open(‘GET’,‘http://127.0.0.1:8000/server?a=100&b=200’);
3、傳送
xhr.send();
4、進行事件繫結 處理服務端返回的結果
// readystate 是xhr物件中的屬性，表示狀態 0(未初始化) 1(open方法完畢) 2(send方法完畢) 3(服務端返回部分結果) 4(服務端返回全部結果) // change 改變的時候觸發 xhr.onreadystatechange = function(){ // 處理服務端返回的結果 // 判斷(返回所有結果) if(xhr.readyState===4){ // 判斷響應狀態碼 200 404 403 401 500 // 2xx都表示成功 if(xhr.status>=200&&xhr.status<300){ // 處理結果 行 頭 空行 體 //響應 console.log(xhr.status);//狀態碼 console.log(xhr.statusText);//狀態字串 console.log(xhr.getAllResponseHeaders());//所有響應頭 console.log(xhr.response);//響應體 // 設定HTML元素result的文字 result.innerHTML =xhr.response; }else{ }
②POST請求(與GET請求類似)：
// 1.建立物件 const xhr = new XMLHttpRequest(); // 2.初始化與設定型別與URL xhr.open('POST','http://127.0.0.1:8000/server'); // 設定請求頭資訊 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // 自定義請求頭資訊 xhr.setRequestHeader('name','29kun'); // 3.傳送 // 引數傳遞 xhr.send('a=100&b=200&c=300'); // xhr.send('1233211234567'); // xhr.send('a:100&b:200&c:300'); // 4.事件繫結 xhr.onreadystatechange = function(){ if(xhr.readyState===4){ // 判斷響應狀態碼 200 404 403 401 500 // 2xx都表示成功 if(xhr.status>=200&&xhr.status<300){ // 設定result的文字 result.innerHTML =xhr.response; } }
③請求超時與網路異常：
超時設定:xhr.timeout = 2000;
超時提醒：
xhr.ontimeout =function(){
alert(“網路異常！！！”)
}
網路異常的回撥:
xhr.onerror =function(){
alert(“你的網路似乎出了一些問題!”);
}
④Ajax取消請求：
設定兩個個按鈕，一個繫結傳送請求，一個繫結取消請求
btns[0].onclick = function(){
xhr = new XMLHttpRequest();
xhr.open(‘GET’,‘http://127.0.0.1:8000/delay’);
xhr.send();
}
btns[1].onclick = function(){
// abort方法取消AJAX請求
xhr.abort();
}
⑤請求重複問題：
如果使用者多次點選請求按鈕則會發送多個請求對網路資源造成浪費 可以通過以下方法來讓Ajax只發送一次請求，請求完成後再發送第二次請求
// 標示變數
let isSending = false;//是否在傳送AJAX請求
btns[0].onclick = function(){
if(isSending) xhr.abort();//再點選後判斷是否在進行請求 如果是則取消要進行的請求
xhr = new XMLHttpRequest();
isSending = true;
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readtState===4){
isSending = false;
}
}
}
二、jQuery傳送Ajax請求
$('button').eq(2).click(function(){
$.ajax({
// url
url:'http://127.0.0.1:8000/jq-server',
// 引數
data:{a:100,b:200},
// 請求型別
type:'GET',
// 響應體結果
dataType:'json',
// 成功的回撥
success:function(data){
console.log(data);
},
// 超時時間
timeout:2000,
// 失敗回撥
error:function(){
console.log('出錯了');
},
// 頭資訊
headers:{
c:300,
d:400
}
});
});
三、Axios和Fetch傳送Ajax請求
1、Axios傳送Ajax
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btns[2].onclick = function(){
axios({
method : 'POST',
url:'axios-server',
// url引數
params: {
vip:10,
level:30
},
// 請求頭資訊
headers: {
a:100,
b:200
},
data: {
username: 'admin',
password: 'admin'
}
}).then(response=>{
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.data);
});
}
2、Fetch傳送Ajax請求：
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
method:'POST',
headers: {
name:'29kun'
},
body:'usernmae=admin&password=admin'
}).then(response=>{
return response.text();
// return response.json();
}).then(response=>{
console.log(response);
})
}
四、同源策略與跨域的解決方案(JSONP、CORS)
同源定義:
同源策略是瀏覽器的一個安全功能，不同源的客戶端指令碼在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js指令碼採用ajax讀取b.com裡面的檔案資料是會報錯的。
若地址裡面的協議、域名和埠號均相同則屬於同源。
以下是相對於 http://www.a.com/test/index.html 的同源檢測
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失敗，域名不同
• https://www.a.com/test/index.html ----失敗，協議不同
• http://www.a.com:8080/test/index.html ----失敗，埠號不同
不受同源策略限制的：
1、頁面中的連結，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫載入的內容。如嵌入到頁面中的script、img、iframe、link等標籤。
跨域:
不是同源的指令碼不能操作其他源下面的物件。想要操作另一個源下的物件是就需要跨域。
JSONP實現跨域:
JSONP的原理：（舉例:a.com/jsonp.html想得到b.com/main.js中的資料）在a.com的jsonp.html裡建立一個回撥函式xxx，動態新增
給input繫結回撥函式 當input失去焦點時 呼叫回撥函式動態生成script標籤
請求返回的結果呼叫handle函式同時將服務端的資料作為實參傳入到函式中進行呼叫
這樣就能獲取到服務端的資料。
function handle(data){
input.style.border= 'solid 1px #f00'
p.innerHTML = data.msg
}
input.onblur = function(){
let usrename = this.value;
const script = document.createElement('script');
script.src = 'http://127.0.0.1:8000/check-username';
document.body.appendChild(script);
}
CORS實現跨域:
CORS欄位介紹：
（1）Access-Control-Allow-Methods
該欄位必需，它的值是逗號分隔的一個字串，表明伺服器支援的所有跨域請求的方法。注意，返回的是所有支援的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。
（2）Access-Control-Allow-Headers
如果瀏覽器請求包括Access-Control-Request-Headers欄位，則Access-Control-Allow-Headers欄位是必需的。它也是一個逗號分隔的字串，表明伺服器支援的所有頭資訊欄位，不限於瀏覽器在"預檢"中請求的欄位。
（3）Access-Control-Allow-Credentials
該欄位與簡單請求時的含義相同。
（4）Access-Control-Max-Age
該欄位可選，用來指定本次預檢請求的有效期，單位為秒。上面結果中，有效期是20天（1728000秒），即允許快取該條迴應1728000秒（即20天），在此期間，不用發出另一條預檢請求。
app.all('*', (req, response, next) =>{
response.header('Access-Control-Allow-Origin', '*');
// 設定允許的請求頭型別
response.header('Access-Control-Allow-Headers', '*');
response.header('Access-Control-Allow-Methods', '*');
response.header('Content-Type', 'application/json;charset=utf-8');
next();
});