Fetch：下一代 Ajax 技術
JS 中 的幾類異步請求：
1) AJAX
1> AJAX= Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。 用於頁面部分異步同服務器交換數據 避免頁面整體請求
2>主要依靠 XMLHttpRequest 對象與後臺服務器進行交互（老版本IE （IE5和IE6）使用 var variable=new ActiveXObject("Microsoft.XMLHTTP");）
3>調用 XMLHttpRequest 的open 打開服務器地址使用 send方法向服務器發送數據
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "/ajax/demo_post2.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
4> ajax 跨域訪問
1.使用原始的jsonp格式 ：
ajax 在請求跨域地址時，使用傳統的json /html / string 是取不到數據的 需要使用jsonp 形式 來獲取數據
jsonp和json 類似 但是在服務器需要 將返回的字符串以函數名的形式返回,在ajax所在的頁面需要定義那個那個返回函數
Stack Overflow 上的 這裏 說的很清楚: Sending JSONP vs. JSON data?
2.jquery 提供了$.jsonp 函數用於解決跨域問題
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("當前工作組:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});
拓展：jquery的幾種異步請求，ajax
1> $.load( url, [data], [callback] ) ：載入遠程 HTML 文件代碼並插入至 DOM 中
2>$.get( url, [data], [callback] )：使用GET方式來進行異步請求
3>$.post( url, [data], [callback], [type] ) ：使用POST方式來進行異步請求
4>$.getScript( url, [callback] ) : 通過 GET 方式請求載入並執行一個 JavaScript 文件
5>$.Ajax
備註： $("#loading").bind("ajaxSend", function(){})我們可以通過bind的形式 來綁定ajax實踐
可以通過 $.ajaxSetup( options ) : 設置全局 AJAX 默認選項
serialize() 與 serializeArray() 用於序列化數據
2) Fetch:
1>它和ajax類似 可以向服務器發送和獲取服務器的數據
2>它不同於ajax的基於事件綁定 它是使用ES6中提供的Promise 基於結果期許
調用：
fetch(url,{ 頭部信息 ,發送請求數據 }).then(function(){ 成功後處理 },function(){ 失敗後處理});
它支持鏈式調用：
fetch(url,{}).then(function(){},function(){}).then(function(){})
eg:
fetch(‘doAct.action‘).then(function(res) {
if (res.ok) {
res.text().then(function(obj) {
// Get the plain text
})
}
}, function(ex) {
console.log(ex)
})
////////////////////////////////////////////////
fetch("doAct.action", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "keyword=榮耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"
}).then(function(res) {
if (res.ok) {
// To do with res
} else if (res.status == 401) {
// To do with res
}
}, function(e) {
// Handling errors
});
Fetch：下一代 Ajax 技術