http://www.w3school.com.cn/jquery/ajax_ajax.asp
AJAX(Asynchronous JavaScript and XML)，最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下馍佑，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容魁瞪。編寫常規(guī)的AJAX代碼并不容易婚被，因?yàn)椴煌臑g覽器對(duì) AJAX 的實(shí)現(xiàn)并不相同，不過(guò)jQuery為我們解決了這個(gè)難題溉仑。
jQuery AJAX 使用
$.ajax([settings]) 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象吧兔，大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)以獲得更多的靈活性优炬。參數(shù)對(duì)象settings可選，參數(shù)中的所有的選項(xiàng)都可以通過(guò)$.ajaxSetup() 函數(shù)來(lái)全局設(shè)置厅贪。
global: Boolean 默認(rèn)為true蠢护，表示觸發(fā)全局AJAX事件
options: Object 可選，AJAX請(qǐng)求設(shè)置
async: Boolean 默認(rèn)為true养涮，表示異步請(qǐng)求
cache: Boolean 默認(rèn)為true葵硕，dataType為script和jsonp時(shí)默認(rèn)為false眉抬，false表示不緩存此頁(yè)面
ifModified: Boolean 默認(rèn)為false，true表示僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)
timeout: Number 設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）懈凹，此設(shè)置將覆蓋全局設(shè)置
traditional: Boolean 如果想要用傳統(tǒng)的方式來(lái)序列化數(shù)據(jù)蜀变，那么就設(shè)置為true
processData: Boolean 默認(rèn)為true，true表示通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù)會(huì)被轉(zhuǎn)化成一個(gè)查詢字符串
context: Object 設(shè)置AJAX相關(guān)回調(diào)函數(shù)的上下文介评，也就是回調(diào)函數(shù)內(nèi)的this库北，如果不設(shè)定那么this指向調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)
username: String 用于響應(yīng) HTTP 訪問(wèn)認(rèn)證請(qǐng)求的用戶名
password: String 用于響應(yīng) HTTP 訪問(wèn)認(rèn)證請(qǐng)求的密碼
contentType: String 默認(rèn)為"application/x-www-form-urlencoded"，表示發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型
dataType: String 預(yù)期服務(wù)器返回的數(shù)據(jù)類型们陆，如不指定jQuery將自動(dòng)根據(jù)HTTP包MIME信息來(lái)智能判斷寒瓦，可用值："xml"、"html"坪仇、"script"杂腰、"json"、"jsonp"椅文、"text"
type: String 默認(rèn)為GET喂很，可選"POST"或"GET"
headers: Object 設(shè)置請(qǐng)求頭
url: String 發(fā)送請(qǐng)求的地址，默認(rèn)為當(dāng)前頁(yè)地址
data: String 發(fā)送到服務(wù)器的數(shù)據(jù)皆刺、請(qǐng)求參數(shù)恤筛，將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式，processData 選項(xiàng)可禁止此自動(dòng)轉(zhuǎn)換芹橡，GET請(qǐng)求中將附加在URL后
jsonp: String 在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字毒坛，來(lái)替代在"callback"
jsonpCallback: String 為jsonp請(qǐng)求指定一個(gè)回調(diào)函數(shù)名，將用來(lái)取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名林说。想讓瀏覽器緩存GET請(qǐng)求的時(shí)候煎殷，指定這個(gè)回調(diào)函數(shù)名
scriptCharset: String 只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或"script"，并且type是"GET"才會(huì)用于強(qiáng)制修改 charset腿箩。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用豪直。
xhr: Function 需要返回一個(gè) XMLHttpRequest 對(duì)象，默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 珠移。用于重寫或者提供一個(gè)增強(qiáng)的 XMLHttpRequest 對(duì)象弓乙。
beforeSend: Function(XMLHttpRequest) 發(fā)送請(qǐng)求前可修改XMLHttpRequest對(duì)象的函數(shù)，如添加自定義HTTP頭钧惧。參數(shù)為XMLHttpRequest暇韧。如果返回false可以取消本次ajax請(qǐng)求
complete: Function(XMLHttpRequest, TS) 請(qǐng)求完成后回調(diào)函數(shù)(請(qǐng)求成功或失敗之后均調(diào)用)，參數(shù)為XMLHttpRequest 對(duì)象和一個(gè)描述請(qǐng)求類型的字符串
error: Function(XMLHttpRequest, textStatus, errorThrown) 請(qǐng)求失敗時(shí)調(diào)用此函數(shù)浓瞪，參數(shù)為XMLHttpRequest對(duì)象懈玻、錯(cuò)誤信息、捕獲的異常對(duì)象
success: Function(responseData, TS) 請(qǐng)求成功后的回調(diào)函數(shù)乾颁，參數(shù)為根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)和描述狀態(tài)的字符串涂乌。
dataFilter: Function(data, type) 給Ajax返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)艺栈，data是返回的原始數(shù)據(jù)，type是dataType參數(shù)
示例如下：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
// 同步
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
// 異步
$.ajax({
url: "/jquery/test1.txt",
success: function(responseData) {
$("#myDiv").html(responseData);
}
});
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通過(guò) AJAX 改變文本</h2></div>
<button id="b01" type="button">改變內(nèi)容</button>
</body>
</html>
AJAX實(shí)現(xiàn)
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
var xhr;
//創(chuàng)建 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveObject) {//IE6及以下
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//連接 和 發(fā)送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//設(shè)置表單提交時(shí)的內(nèi)容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(status);
}
}
}
}
//格式化參數(shù)
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
return arr.join("&");
}
GET跨域提交表單
前臺(tái)代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>跨域</title>
<script src="./jquery.min.js"></script>
<script>
function flightHandler(data) {
console.log('2: ',data)
}
window.onload = function() {
$.ajax({
url: "http://localhost:9432",
type: "get", // jsonp必須是get方式湾盒，post不支持湿右，注意
dataType: "jsonp",
jsonp: "callback", // 回調(diào)函數(shù)名稱變量名
jsonpCallback: "flightHandler", // 回調(diào)函數(shù)名稱的值
data: {param: '參數(shù)'},
beforeSend: function () {
console.log('1');
},
success: function (msg) {
console.log('3: ',msg);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log('4: ',XMLHttpRequest, textStatus, errorThrown);
}
});
};
</script>
</head>
<body>
</body>
</html>
后臺(tái)代碼：
var http = require('http'),
fs = require('fs'),
url=require("url");
http.createServer(function(req, res) {
var query = url.parse(req.url, true).query;
var func = query.callback;
console.log(query);
var msg = `${func}({"txt": "success"})`;
res.write(msg);
res.end();
}).listen(9432);
運(yùn)行結(jié)果為：
1
2: {txt: "success"}
3: {txt: "success"}
POST跨域提交表單
CORS（跨域資源共享，Cross-Origin Resource Sharing）罚勾，定義一種跨域訪問(wèn)的機(jī)制毅人，可以讓AJAX實(shí)現(xiàn)跨域訪問(wèn)。CORS允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域AJAX請(qǐng)求荧库。實(shí)現(xiàn)此功能非常簡(jiǎn)單堰塌，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: http://www.test2.com");
CORS提供了一種跨域請(qǐng)求方案分衫，但沒(méi)有為安全訪問(wèn)提供足夠的保障機(jī)制场刑，如果需要信息的絕對(duì)安全，不要依賴CORS當(dāng)中的權(quán)限制度蚪战，應(yīng)當(dāng)使用更多其它的措施來(lái)保障牵现，比如OAuth2。CORS使用場(chǎng)景：
- CORS在移動(dòng)終端支持的不錯(cuò)邀桑，可以考慮在移動(dòng)端全面嘗試
- jsonp是get形式瞎疼，承載的信息量有限，所以信息量較大時(shí)CORS是不二選擇
- 配合新的JSAPI(fileapi壁畸、xhr2等)一起使用贼急，實(shí)現(xiàn)強(qiáng)大的新體驗(yàn)功能
前臺(tái)代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>跨域</title>
<script src="./jquery.min.js"></script>
<script>
window.onload = function() {
$.ajax({
url: "http://localhost:9432",
type: "post",
dataType: "json",
data: {param: '參數(shù)'},
success: function (msg) {
console.log('3: ',msg);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log('4: ',XMLHttpRequest, textStatus, errorThrown);
}
});
};
</script>
</head>
<body>
</body>
</html>
后臺(tái)代碼：
var http = require('http'),
fs = require('fs'),
url=require("url");
http.createServer(function(req, res) {
res.writeHead(200,{"Access-Control-Allow-Origin":"*"});
// res.setHeader("Access-Control-Allow-Origin","*");
// 設(shè)置接收數(shù)據(jù)編碼格式為 UTF-8
req.setEncoding('utf-8');
//POST & GET ： name=zzl&email=zzl@sina.com
var postData = "";
// 數(shù)據(jù)塊接收中
req.addListener("data", function (postDataChunk) {
postData += postDataChunk;
});
// 數(shù)據(jù)接收完畢，執(zhí)行回調(diào)函數(shù)
req.addListener("end", function () {
console.log('數(shù)據(jù)接收完畢');
//GET & POST ////解釋表單數(shù)據(jù)部分{name="zzl",email="zzl@sina.com"}
var params = querystring.parse(postData);
console.log(params);
});
var msg = `{"txt": "success"}`;
res.write(msg);
res.end();
}).listen(9432);
