Ajax學習第七天
Ajax學習第七天——CORS跨域資源共享及jQuery中$.ajax()的使用
第二種解決非同源數據的方案
CORS：Corss orgin resource sharing 即跨域資源共享，它允許瀏覽器向跨域服務器發送Ajax請求，克服了Ajax只能同源使用的限制。
具體使用：需要在服務器端進行配置,客戶端無需配置
服務器端代碼如下：
app.get('/cross',(req,res) => {
// 1.允許哪些客戶端訪問我
// * 代表所有的客戶端訪問我
res.header('Access-Control-Allow-Origin','*');
// 2.允許客戶端使用哪些方法訪問我
res.header('Access-Control-Allow-Method','get,post');
});
第三種解決非同源數據的方案
同源政策是瀏覽器給予Ajax技術的限制，服務器端是不存在同源政策限制的，因此我們可以先將客戶端的請求發送給自己的服務器端，由自己的服務器端與非同源的服務器端進行訪問，拿到數據後，再將數據返回給自己的客戶端，相當於在自己的客戶端與非同源服務器端之間增加了一座橋樑，就是自己的服務器端。
本方法的提出要先了解Cookie的作用，最初的時候，客戶端與服務器端使用HTTP協議進行連接，它們之間的連接是無狀態的，即沒有記錄功能，相當於兩端都互不認識，Cookie提出後，相當於一張它們的名片，使得客戶端與服務器端彼此認識，這時他們彼此就可以互相訪問了。
withCredentials屬性
在使用Ajax技術發送跨域請求時，默認情況下不會再請求種攜帶Cookie信息，所以它們彼此的訪問是不被允許的。此時，只需修改本屬性的值爲true即可，需要在客戶端與服務器端都進行配置。
服務器端代碼添加以下一行：
// 允許客戶端發送跨域請求時攜帶Cookie信息
res.header('Access-Control-Allow-Credentials',true);
客戶端代碼添加以下一行：
// 當發送跨域請求時攜帶Cookie信息 默認值爲false
xhr.withCredentials = true;
jQuery中 $.ajax() 的使用
jQuery中將Ajax已經封裝好了，使用即可，其中有幾個屬性注意一下使用方式即可
-
ContentType： 表示發送數據的類型，默認爲 application/x-www-form-urlencoded
-
data: 表示傳入的數據，可以傳對象，也可以傳字符串，最終它都會把它轉換爲字符串處理
-
beforeSend:function(){} 表示在請求發送之前會調用此函數，可以放入等待緩衝的圖片，提高用戶體驗
-
dataType:‘jsonp’ jQuery中的$.ajax()方法還可以發送jsonp請求，這點是比較方便的，有兩個可選參數：
josnp:'cb'表示修改callback參數的名稱 即向服務器端傳遞函數名字的參數名稱jsonpCallback:'fnName'表示指定函數名稱，此函數就代替了success那個參數的作用
serialize方法
在使用$.ajax()方法中，如果表單中的元素有很多，我們也需要自己拼接參數的格式，本方法與之前的FormData函數類似，不過FromData存在與HTML5中，有兼容性問題，所以在jQuery中，有此方法來替代
作用：將表單中的數據自動拼接成字符串類型的參數，有且只有這項功能
很多時候我們需要使用到字符串裏某一些的值，這時我們將它轉換爲對象類型就很方便，但是jQuery中並沒有相關的方法，所以這裏我們把它封裝好了，代碼及使用場景如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<input type="text" name="username">
<input type="password" name="psw">
<input type="submit" value="提交">
</form>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$('#form').on('submit',function(){
// var result = $('#form').serialize();
// serializeObject(result);
serializeObject($(this));
return false;
})
// 將表單中用戶輸入的內容轉換爲對象類型
function serializeObject(obj){
// 處理結果對象
var Object = {};
// 將結果拼接成數組類型
var result = obj.serializeArray();
// 循環數組 將數組轉換爲對象類型
$.each(result,function(index,value){
Object[value.name] = value.value;
})
// 將處理的結果返回到函數外部
return Object;
}
</script>
</body>
</html>
全局事件
只要頁面中有Ajax請求被髮送，對應的全局事件就會被觸發
.ajaxStart() //當請求開始發送時觸發.ajaxComplete() //當請求完成時觸發
注意 以上兩個事件均需要綁定在 document 上
$(document).on('ajaxStart',function(){
})
以上兩個全局事件可以結合NProgrss進度條插件(在頁面的最上端有一個進度條可可以展示當前請求狀態)，提升用戶體驗。
RESTful風格的API
概述：它是一套關於設計請求的規範
- GET：獲取
- POST：添加
- PUT：更新
- DELETE：刪除
例如：
- GET： www.example.com/users 獲取用戶列表數據
- POST: www.example.com/users 創建(添加)用戶數據
- PUT：www.example.com/users/1 修改用戶ID爲1的用戶信息
- DELETE：www.example.com/users/1 刪除用戶ID爲1的用戶信息
PUT和DELETE在傳統表單中不支持，只有Ajax中支持，具體的要結合相關案例
XML基礎
XML：extensible markup language 可擴展標記語言，作用是傳輸和存儲數據
XML DOM：即XML文檔對象模型，是W3C組織定義地一套操作XML文檔對象的API，瀏覽器會將XML文檔解析成文檔對象模型
注：此類型的返回數據已經很少用了，瞭解即可。