18.3.23
·AJAX概念簡(jiǎn)述、內(nèi)部實(shí)現(xiàn)原理

·常用方法：load()、$.get()、$.post()宿礁、$.getScript()、$.getJson()和serialize()還有$.ajax()
·ajax() 方法蔬芥、參數(shù)梆靖、回調(diào)函數(shù)控汉、參考手冊(cè)
·其他未整理

AJAX概念簡(jiǎn)述、內(nèi)部實(shí)現(xiàn)原理

參考來(lái)源：https://blog.csdn.net/drug_/article/details/73823856

概念簡(jiǎn)述

Asynchronous Javascript And XML(異步JavaScript和XML)

AJAX并不是一種語(yǔ)言,而是一種創(chuàng)建交互網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù) AJAX是Javascript返吻、XHTML和CSS姑子、DOM、XML和XSTL测僵、XMLHttpRequest 等技術(shù)的組合

1.使用XHTML+CSS來(lái)標(biāo)準(zhǔn)化呈現(xiàn);
2.使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作;
3.使用XMLHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)通信;
4.使用Javascript操作Document Object Model(網(wǎng)絡(luò)文檔對(duì)象模型)進(jìn)行動(dòng)態(tài)顯示及交互;
5.使用JavaScript綁定和處理所有數(shù)據(jù)

AJAX核心對(duì)象是XMLHttpRequest

二街佑、AJAX優(yōu)缺點(diǎn)： AJAX異步處理優(yōu)點(diǎn): 減輕服務(wù)器的負(fù)擔(dān),AJAX一般只從服務(wù)器獲取只需要的數(shù)據(jù) 無(wú)刷新頁(yè)面更新,減少用戶(hù)等待的時(shí)間 更好的客戶(hù)體驗(yàn),可以將一些服務(wù)器的工作轉(zhuǎn)移到客戶(hù)端來(lái)完成,節(jié)約網(wǎng)絡(luò)資源,提高用戶(hù)體驗(yàn) 無(wú)平臺(tái)限制 促進(jìn)顯示與數(shù)據(jù)想分離

AJAX異步處理的缺點(diǎn): 頁(yè)面中存在大量JS,給搜索引擎帶來(lái)困難 AJAX干掉了Back和History功能,即對(duì)瀏覽器機(jī)制的破壞 存在跨域問(wèn)題 只能傳輸及接收utf-8編碼數(shù)據(jù)

三、JSON
Javascript Object Notation,是一種輕量級(jí)的數(shù)據(jù)交換格式 JSON每種語(yǔ)言都認(rèn)識(shí)他所以用他進(jìn)行各種語(yǔ)言的數(shù)據(jù)的轉(zhuǎn)換 JSON支持多種語(yǔ)言 格式 {key:value,key:value,.....}對(duì)象格式 [{key:value,key:value,.....},{key:value,key:value,.....},......]數(shù)組格式 JavaScript處理： eval('('+json+')') //將某個(gè)字符串按照J(rèn)S代碼來(lái)執(zhí)行 例： eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //對(duì)傳過(guò)來(lái)的json字符串進(jìn)行解碼恨课，變成JS認(rèn)識(shí)的對(duì)象 JSON.stringify(obj) //將JS中的值編譯成json字符串

·常用方法：

load()舆乔、$.get()岳服、$.post()剂公、$.getScript()和$.getJson()還有$.ajax()
參考：https://www.cnblogs.com/xiaoxiaoyihan/p/6050854.html
https://www.cnblogs.com/LuckyWinty/p/5279032.html——使用ajaxSetup()方法設(shè)置全局Ajax默認(rèn)選項(xiàng)、使用ajaxStart()和ajaxStop()方法
https://www.cnblogs.com/ranzige/p/4103203.html

一吊宋、load()
load(url [,data] [,callback])
url(String):服務(wù)端資源的url纲辽。
data(Obejct):發(fā)送到服務(wù)器的key/value數(shù)據(jù)
callback(Function):請(qǐng)求完成時(shí)(無(wú)論成功或失敗)的回調(diào)函數(shù)，在響應(yīng)數(shù)據(jù)已經(jīng)加載到包裝集元素之后被調(diào)用璃搜。傳入這個(gè)函數(shù)的參數(shù)是響應(yīng)文本拖吼、狀態(tài)碼、以及xhr實(shí)例这吻。
load()的傳遞方式根據(jù)參數(shù)data來(lái)自動(dòng)指定吊档。如果沒(méi)有參數(shù)，則采用GET方式傳遞唾糯，否則怠硼，會(huì)自動(dòng)轉(zhuǎn)換為POST方式。
load()可以遠(yuǎn)程載入HTML并插入到DOM中移怯。
一定要在一個(gè)標(biāo)簽jquery的基礎(chǔ)上使用香璃，返回一定是頁(yè)面。
load()常用來(lái)從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件舟误。如果要向服務(wù)器傳遞參數(shù)葡秒，可以使用<nobr aria-hidden="true">.get()或</nobr>.post()方法。
例子：
<script type="text/javascript">
$(function () {
// 點(diǎn)擊按鈕嵌溢，觸發(fā)加載動(dòng)作
$("#btn").click(function () {
// 將xxxx.html加載進(jìn)id為“show”的元素里
$("#show").load("xxxx.html");
});
})
</script>
$("#show").load("xxxx.html", function (responseText, textStatus, XMLHttpRequest) {
alert(responseText);// 請(qǐng)求返回的內(nèi)容
alert(textStatus); // 請(qǐng)求狀態(tài)
alert(XMLHttpRequest);// XMLHttpRequest對(duì)象
});

二眯牧、$.get()
$.get(url [, data] [, callback] [, type])
<script type="text/javascript">
$(function () {
$("#send").click(function () {
// 點(diǎn)擊按鈕觸發(fā)get請(qǐng)求
$.get("get1.jsp", {
// 向服務(wù)器傳遞參數(shù)，encodeURI進(jìn)行完整編碼
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
// alert(textStatus); // 返回請(qǐng)求狀態(tài)
// alert(decodeURI(data)); // 返回請(qǐng)求的狀態(tài)
// 將返回的數(shù)據(jù)添加到id為“resText”的元素中
$("#resText").html(decodeURI(data));
})
});
})
</script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$.get("get2.jsp", {
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
alert(textStatus);
var username = data.username;
var location = data.location;
var contentTxt = data.contentTxt;
username = decodeURI(username);
location = decodeURI(location);
contentTxt = decodeURI(contentTxt);
var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username +
"</a><span class='location'>" + location +
"</span></p><p class='contentTxt'>" + contentTxt + "</p></div>";
$("#resText").html(txtHtml);// 將返回的數(shù)據(jù)添加到頁(yè)面
}, "json");
})
})
</script>
上面encodeURI()是用于編碼赖草，否則中文就無(wú)法解析
json的格式非常嚴(yán)格学少，任何一個(gè)括號(hào)的不匹配或缺失都會(huì)導(dǎo)致頁(yè)面的腳本終止運(yùn)行。

三疚顷、$.post()
$. post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
除了對(duì)服務(wù)器的狀態(tài)和應(yīng)用的模型數(shù)據(jù)的影響旱易，<nobr aria-hidden="true">.get()和</nobr>
.post()還有以下區(qū)別：
GET請(qǐng)求會(huì)將參數(shù)跟在url后進(jìn)行傳遞禁偎，POST請(qǐng)求則作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器。在ajax中這種區(qū)別對(duì)用戶(hù)是不可見(jiàn)的阀坏。
GET對(duì)傳輸?shù)臄?shù)據(jù)大小有限制(通常不大于2kb)如暖，使用POST方式傳遞的數(shù)據(jù)量比GET大得多(理論上不受限制)
GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存，這種情況可能帶來(lái)安全問(wèn)題忌堂。
<nobr aria-hidden="true">.get()和</nobr>.post()的結(jié)構(gòu)和使用方式都相同盒至。

四、$.getScript()
$.getScript()用來(lái)加載.js文件士修，與加載一個(gè)HTML片段一樣枷遂，js文件會(huì)自動(dòng)執(zhí)行。
<pre><script type="text/javascript"></pre>
<pre> $(function () {</pre>
<pre> // 點(diǎn)擊按鈕加載js1.js文件</pre>
<pre> $("#send").click(function () {</pre>
<pre> $.getScript("js1.js");</pre>
<pre> })</pre>
<pre> })</pre>
<pre></script></pre>
相當(dāng)于加載并執(zhí)行一段js棋嘲。

五酒唉、.getJSON()
.getJSON()用于加載JSON文件，用法與.getScript()相同沸移。
json數(shù)據(jù)：
[
{
"username": "張三",
"location": "[北京市網(wǎng)友]",
"contentTxt": "一樓獻(xiàn)度娘"
},
{
"username": "李四",
"location": "[山東省濟(jì)南市網(wǎng)友]",
"contentTxt": "沒(méi)搶到沙發(fā)"
},
{
"username": "王五",
"location": "[河南省鄭州市網(wǎng)友]",
"contentTxt": "頂頂頂頂頂"
}
]
$(function () {
$("#send").click(function () {
$.getJSON("demo.json", function (data) {
$("#resText").empty();
var html = '';
$.each(data, function (index, comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
});
})
});

六痪伦、serialize()
使用serialize()方法可以將表單中有name屬性的元素值進(jìn)行序列化，生成標(biāo)準(zhǔn)URL編碼文本字符串雹锣，直接可用于ajax請(qǐng)求网沾，它的調(diào)用格式如下：
$(selector).serialize()
其中selector參數(shù)是一個(gè)或多個(gè)表單中的元素或表單元素本身。

七蕊爵、$.ajax()方法
詳見(jiàn)http://www.w3school.com.cn/jquery/ajax_ajax.asp
$.ajax()是jquery最底層的實(shí)現(xiàn)辉哥。
$.ajax(options)
async類(lèi)型：Boolean默認(rèn)值: true。默認(rèn)設(shè)置下攒射，所有請(qǐng)求均為異步請(qǐng)求醋旦。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false匆篓。
contentType類(lèi)型：String默認(rèn)值: "application/x-www-form-urlencoded"浑度。發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類(lèi)型。
默認(rèn)值適合大多數(shù)情況鸦概。如果你明確地傳遞了一個(gè) content-type 給 $.ajax() 那么它必定會(huì)發(fā)送給服務(wù)器（即使沒(méi)有數(shù)據(jù)要發(fā)送）箩张。
context類(lèi)型：Object
這個(gè)對(duì)象用于設(shè)置 Ajax 相關(guān)回調(diào)函數(shù)的上下文。也就是說(shuō)窗市，讓回調(diào)函數(shù)內(nèi) this 指向這個(gè)對(duì)象（如果不設(shè)定這個(gè)參數(shù)先慷，那么 this 就指向調(diào)用本次 AJAX 請(qǐng)求時(shí)傳遞的 options 參數(shù)）。比如指定一個(gè) DOM 元素作為 context 參數(shù)咨察，這樣就設(shè)置了 success 回調(diào)函數(shù)的上下文為這個(gè) DOM 元素论熙。
就像這樣：
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
data類(lèi)型：String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式摄狱。GET 請(qǐng)求中將附加在 URL 后脓诡。查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換无午。必須為 Key/Value 格式。如果為數(shù)組祝谚，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱(chēng)宪迟。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
dataFilter類(lèi)型：Function
給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)交惯。提供 data 和 type 兩個(gè)參數(shù)：data 是 Ajax 返回的原始數(shù)據(jù)次泽，type 是調(diào)用 jQuery.ajax 時(shí)提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理
————————————————————
還有好多呢席爽。
還有jQuery.Form plugin Ajax
ajaxForm
ajaxSubmit
Ajax在MVC中的使用
Ajax.BeginForm
Ajax.ActionLink
jquery.form與jquery.validate結(jié)合使用
參考http://www.jb51.net/article/85694.htm
jQuery AJAX方法 前臺(tái)往后臺(tái)傳數(shù)據(jù)
http://blog.csdn.net/dreamstar613/article/details/61912717
jQuery AJAX 方法 success()后臺(tái)傳來(lái)的4種數(shù)據(jù)
http://blog.csdn.net/dreamstar613/article/details/61913970
前臺(tái)頁(yè)面先對(duì)中文進(jìn)行編碼意荤，如下紅色字體：
https://www.cnblogs.com/dscs/p/5740425.html