<b>Ajax全稱：</b>Asynchronous JavaScript and XML（異步的JavaScript和XML）
<b>特點(diǎn)：</b>在不必刷新整個(gè)網(wǎng)頁(yè)的情況下實(shí)現(xiàn)局部更新拾并，帶來更好的用戶體驗(yàn)繁疤。
因?yàn)?lt;code>XMLHttpRequest</code>（XHR）對(duì)象的出現(xiàn)才有了異步的概念睁蕾。通過<code>XMLHttpRequest</code>對(duì)象實(shí)現(xiàn)后臺(tái)和服務(wù)器進(jìn)行數(shù)據(jù)的交換而不必刷新整個(gè)頁(yè)面。
概念介紹
- 運(yùn)用HMTL和CSS來實(shí)現(xiàn)頁(yè)面族阅，表達(dá)信息篓跛。
- 運(yùn)用XMLHttpRequest和Web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換。
- 運(yùn)用JavaScript操作DOM元素坦刀，實(shí)現(xiàn)動(dòng)態(tài)局部刷新愧沟。
實(shí)例化一個(gè)XHR對(duì)象
var request =new XMLHttpRequest();
對(duì)于IE6及更老版本的IE：
var request;
if(windows.XMLHttpRequest){
request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...
}
else{
request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
"HTTP請(qǐng)求"概念介紹
一個(gè)完整的HTTP請(qǐng)求過程，通常需要下面7個(gè)步驟：
- 建立TCP連接
- Web瀏覽器向Web服務(wù)器發(fā)送請(qǐng)求命令
- Web瀏覽器發(fā)送請(qǐng)求頭信息
- Web服務(wù)器應(yīng)答
- Web服務(wù)器發(fā)送應(yīng)答頭信息
- Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)
- Web服務(wù)器關(guān)閉TCP連接
一個(gè)HTTP請(qǐng)求一般由四部分組成：
- HTTP請(qǐng)求的方法或者動(dòng)作鲤遥，Get/Post
- 正在請(qǐng)求的地址URL
- 請(qǐng)求頭沐寺，包含一些客戶端環(huán)境信息，身份驗(yàn)證信息等
- 請(qǐng)求體盖奈，也就是請(qǐng)求正文混坞，請(qǐng)求正文中可以包含客戶提交的查詢字符串信息，表單信息
GET與POST
<code>GET</code>：一般用于信息獲取
使用URL傳遞參數(shù)（變量會(huì)放在URL里邊）
對(duì)所發(fā)送信息的數(shù)量也有限制钢坦，一般在2000個(gè)字符
冪等究孕，執(zhí)行N次與執(zhí)行1次效果相同，都不會(huì)改變數(shù)據(jù)庫(kù)的信息
<code>POST</code>：一般用于修改服務(wù)器上的資源
對(duì)所發(fā)送信息的數(shù)量無限制
** 一個(gè)HTTP響應(yīng)一般由三部分組成：**
- 一個(gè)數(shù)字和文字組成的狀態(tài)碼爹凹，用來告訴客戶端請(qǐng)求是成功還是失敗
- 響應(yīng)頭厨诸，響應(yīng)頭也和請(qǐng)求頭一樣包含許多有用的信息，例如服務(wù)器類型禾酱，日期時(shí)間微酬，內(nèi)容類型和長(zhǎng)度等
- 響應(yīng)體，也就是響應(yīng)正文颤陶，服務(wù)器傳來的內(nèi)容
| <b>HTTP狀態(tài)碼分類</b> |
|-|-|
| 分類 | 分類描述 |
| 1XX 信息 | 服務(wù)器收到請(qǐng)求颗管，需要請(qǐng)求者繼續(xù)執(zhí)行操作|
| 2XX 成功 | 操作被成功接收并處理，例如 200 OK |
|3XX 重定向|需要進(jìn)一步的操作以完成請(qǐng)求|
| 4XX 客戶端錯(cuò)誤|請(qǐng)求包含語法錯(cuò)誤或無法完成請(qǐng)求指郁，例如 404 NOT FOUND|
|5XX 服務(wù)器錯(cuò)誤|服務(wù)器在處理請(qǐng)求的過程中發(fā)生了錯(cuò)誤 例如 500|
XHR發(fā)送請(qǐng)求
- open(method,url,async) async->true異步(默認(rèn))/false同步
- send(string)
例如：
request.open("GET","get.php",true);
request.send();//因?yàn)镚ET請(qǐng)求內(nèi)容一般在url中忙上，所以send()可以為空，但是post請(qǐng)求需要在send()中添加信息
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//請(qǐng)求頭信息(一定是寫在open()和send()中間)
request.send("name=王二狗&sex=男");
XHR取得響應(yīng)
- <code>responseText</code>：獲取字符串形式的響應(yīng)數(shù)據(jù)
*<code>responseXML</code>：獲取XML形式的響應(yīng)數(shù)據(jù)
*<code>status</code>和<code>statusText</code>：以數(shù)字和文本形式返回HTTP狀態(tài)碼 - <code>getAllRespondseHeader()</code>：獲取所有的響應(yīng)報(bào)頭
- <code>getResponseHeader()</code>：查詢響應(yīng)中的某個(gè)字段的值
-
監(jiān)聽<code>readyState</code>屬性
- 0：請(qǐng)求未初始化闲坎，open還沒有調(diào)用
- 1：服務(wù)器連接已經(jīng)建立疫粥，open已經(jīng)調(diào)用了
- 2：請(qǐng)求已接收，也就是接收到頭信息了
- 3：請(qǐng)求處理中腰懂，也就是接收到響應(yīng)主體了
- 4：請(qǐng)求已完成梗逮，且響應(yīng)已就緒，也就是完成響應(yīng)了
var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200){
//做一些事情request.responseText
}
}
舉個(gè)栗子(基于之前的數(shù)據(jù)庫(kù)绣溜，有學(xué)生表)~
【前端】
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#search").click(function() {
var request = new XMLHttpRequest();
request.open("GET", "/Ajax/Details?id=" + parseInt($("#keyWord").val()), true); //通過GET方法去請(qǐng)求AjaxController下面的Details方法慷彤，并傳入id的值作為查詢條件
request.send();
});
})
</script>
<label>請(qǐng)輸入要查詢的學(xué)生編號(hào)：</label>
<input type="text" id="keyWord"/>
<button id="search">查詢</button>
【后端】AjaxController控制器Details方法
public ActionResult Details(int id)
{
if (dbContext.StudentSet.Find(id) == null)
{
return Content("Fail");
}
else
{
return Content("Success");
}
}
【結(jié)果】我的數(shù)據(jù)庫(kù)中沒有id為1的數(shù)據(jù)，有id為6的數(shù)據(jù)
JSON基礎(chǔ)
** 簡(jiǎn)介 JSON： ** JavaScript對(duì)象表示法（JavaScript Object Notation） JSON是存儲(chǔ)和交換文本信息的語法，類似XML底哗，它采用鍵值對(duì)的方式來組織岁诉，易于閱讀和編寫，同時(shí)也易于機(jī)器解析和生成* JSON是獨(dú)立于語言的跋选，也就是說不管什么語言涕癣，都可以解析Json，只需要按照json的規(guī)則來就行
JSON與XML比較
- Json的長(zhǎng)度和XML格式比起來很短星氨辍（減少帶寬）
- Json讀寫的速度更快
- Json可以使用JavaScript內(nèi)建的方法直接進(jìn)行解析坠韩，轉(zhuǎn)換成JavaScript對(duì)象，非常方便
JSON語法規(guī)則
- ** JSON數(shù)據(jù)的書寫格式是：名稱/值對(duì) **
名稱/值對(duì)組合中的名稱寫在前面（在雙引號(hào)中）炼列，值對(duì)寫在后面（同樣在雙引號(hào)中）只搁，中間用冒號(hào)隔開，比如俭尖，"name":"郭靖" - ** JSON的值可以是下面這些類型： **
- 數(shù)字(整型或浮點(diǎn)數(shù))氢惋，比如123,1.23
- 字符串（在雙引號(hào)中）
- 邏輯值（true，false）
- 數(shù)組（寫在方括號(hào)中）
- 對(duì)象（寫在花括號(hào)中）
- null
例如：
{
"staff":[
{"name":"宏碁","age":70},
{"name":"郭靖","age":35},
{"name":"黃蓉","age":30}
]
}
{
"nane": "los",
"success": "True",
"message": "請(qǐng)求成功",
"info": [{
"name": "laosiji",
"age": "100",
"asdas": "121",
"hobby": ["daqiu", "youyong"],
"aa": [{
"anme": "aa",
"age": 20
}, {
"aa": "asdas",
"age": 5565
}]
}]
}
JSON解析
** 方式一： **
var jsondata='{"staff":[{"name":"黃蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=eval('('+jsondata+')'); //如果在json數(shù)據(jù)中存在js腳本的話會(huì)直接執(zhí)行目溉。（危險(xiǎn)）
alert(jsonobj.staff[0].name);
** 方式二 **
var jsondata='{"staff":[{"name":"黃蓉","age":25},{"name":"王五","age":25},{"name":"升水","age":22}]}';
var jsonobj=JSON.parse(jsondata); //如果在json數(shù)據(jù)中存在js腳本的話會(huì)報(bào)錯(cuò)(常用明肮，安全，方便)缭付。
alert(jsonobj.staff[0].name);
在線JSON格式化和校驗(yàn)工具jsonlint
用jQuery實(shí)現(xiàn)Ajax
- jQuery.ajax({[settings]}) $.ajax([{settings]})
- type：Method類型柿估，"POST"或者“GET”，默認(rèn)為“GET”
- url：發(fā)送請(qǐng)求的地址
- data：一個(gè)對(duì)象陷猫，連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)
- dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型秫舌，如果不指定，jQuery將自動(dòng)根據(jù)HTTP包MIME信息來智能判斷绣檬，一般我們采用json格式足陨，可以設(shè)置為“json”
- success：是一個(gè)方法，請(qǐng)求成功后的回調(diào)函數(shù)娇未。傳入返回后的數(shù)據(jù)墨缘，以及包含成功的字符串
-
error：是一個(gè)方法，請(qǐng)求失敗時(shí)調(diào)用此函數(shù)零抬。傳入XMLHttpRequest對(duì)象
** 例如 **
GET
$.ajax({格式設(shè)置镊讼，注意success和error返回的數(shù)據(jù)是不同的})
POST
跨域
JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象平夜。什么是跨域呢蝶棋，簡(jiǎn)單地理解就是因?yàn)镴avaScript同源策略的限制，a.com域名下的js無法操作b.com或c.a.com域名下的對(duì)象忽妒。
處理跨域的方法一：代理
處理跨域方法二：JSONP
處理跨域方法三：XHR2
