AJAX(Asynchronous Javascript And XML)
概念：無需加載整個網(wǎng)頁就可更新部分網(wǎng)頁的技術(shù)
- 運用HTML和CSS來實現(xiàn)頁面，表達信息；
- 運用XMLHttpRequest和web服務(wù)器進行數(shù)據(jù)的異步交換 ；
- 運用JavaScript操作DOM，實現(xiàn)動態(tài)局部刷新。
XMLHttpRequest
- XMLHttpRequest對象創(chuàng)建
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5,IE6- XMLHttpRequest發(fā)送請求
open(method,url,async) (async默認(rèn)為true，異步)
send(string)（GET請求可不填寫，POST請求一定要填寫）
（setRequestHeader方法要寫在open和send之間，否則會拋出異常。）
request.open("POST","create.php",true);//POST方法
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=李二狗&sex=女");- XMLHttpRequest取得響應(yīng)
- requestText：獲得字符串形式的響應(yīng)數(shù)據(jù)
requestXML：獲得XML形式的響應(yīng)數(shù)據(jù)
status和statusText：以數(shù)字和文本形式返回HTTP狀態(tài)碼
getAllResponseHeader()：獲取所有的響應(yīng)報頭
getResponseHeader()：查詢響應(yīng)中的某個字段的值
- readyState屬性
0：請求未初始化，open還沒有調(diào)用。
1：服務(wù)器連接已經(jīng)建立，open已經(jīng)調(diào)用了。
2：請求已接受，也就是接收到頭信息了。
3：請求處理中，也就是接收到響應(yīng)主體了。
4：請求已完成，且響應(yīng)已就緒，也就是響應(yīng)完成了。
- onreadystatechange事件監(jiān)聽
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200)}
document.getElementById("searchResult").innerHTML = request.responseText
}else {
alter("發(fā)生錯誤" + request.status);} }
HTTP
- 概念
HTTP是計算機通過網(wǎng)絡(luò)進行通信的規(guī)則，是一種無狀態(tài)協(xié)議。（不建立持久的連接，也就是服務(wù)端不保留連接的相關(guān)信息）- 步驟
1.建立TCP連接
2.Web瀏覽器向Web服務(wù)器發(fā)送請求命令
3.Web瀏覽器發(fā)送請求頭信息
4.Web服務(wù)器應(yīng)答
5.Web服務(wù)器發(fā)送應(yīng)答頭信息
6.Web服務(wù)器想瀏覽器發(fā)送數(shù)據(jù)
7.Web服務(wù)器關(guān)閉TCP連接- HTTP請求的組成部分
1.HTTP請求的方法或動作（GET或POST請求）
2.正在請求的URL
3.請求頭（客戶端環(huán)境信息，身份驗證信息等）
4.請求體（客戶提交的查詢字符串信息，表單信息等）
GET：信息獲取、使用URL傳遞參數(shù)**（發(fā)送信息的數(shù)量一般限制在2000個字符）
POST：修改服務(wù)器上的資源（對發(fā)送信息數(shù)量無限制）- HTTP響應(yīng)的組成部分
1.數(shù)字和文字組成的狀態(tài)碼（用來顯示請求成功還是失敗）
2.響應(yīng)頭（服務(wù)器類型、日期時間、內(nèi)容類型和長度等）
3.響應(yīng)體- 狀態(tài)碼
1XX：信息類。表示收到Web瀏覽器請求，正在進一步的處理中。
2XX：成功。表示用戶請求被正確接收。（200 OK）
3XX：重定向，表示請求沒有成功，客戶必須采取進一步的動作。
4XX：客戶端錯誤，表示客戶端提交的請求有錯誤。（404 NOT Found，意味著請求中引用的文檔不存在。）
5XX：服務(wù)器錯誤，表示服務(wù)器不能完成對請求的處理。
JSON
- JSON：JavaScript對象表示法（JavaScript）
1.JSON是存儲和交換文本信息的語法，類似XML。它采用鍵值對的方式來組織，已于人們閱讀和編寫，同時也易于機器解析和生成。
2.JSON是獨立于語言的，什么語言都可以解析json。- JSON解析：eval和JSON.parse
1.eval：不會去看JSON字符串是否合法，字符串中的一些js方法會直接執(zhí)行，比較不安全。
var jsonobj = eval( '(' + jsondata + ')' );
2.JSON.parse：可預(yù)報json字符串中的錯誤。
var jsonobj = JSON.parse(jsondata);- JSON校驗工具
JSONLint
JQuery中的AJAX
jQuery.ajax([settings])
- type：類型，“POST”或"GET"，默認(rèn)為“GET”。
- url：發(fā)送請求的地址。
- data：對象，連同請求發(fā)送到服務(wù)器的數(shù)據(jù)。
- dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery將自動根據(jù)HTTP包MIME信息來智能判斷，一般我們采用json格式，可以設(shè)置為“json”
- success：方法，請求成功后的回調(diào)函數(shù)。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串。
- error：方法，請求失敗時調(diào)用此函數(shù)。傳入XMLHttpRequest對象。
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"GET",
url:"service.php?number=" + $("#keyword").val(),
dataType:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}else {
$("#searchResult").html("出現(xiàn)錯誤：" + data.msg); }
} ,
error:function(jqXHR){
alter(“發(fā)生錯誤：” + jqXHR.status); }
}); });
(POST方法多加一個data屬性 data:{ })
($(document).ready() 與window.onload的區(qū)別)
(http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js 百度靜態(tài)資源jquery庫，可直接引入)
跨域（JS同源策略的限制）
- 1.域名地址：協(xié)議 + 子域名 + 主域名 + 端口號 + 請求資源地址
2.當(dāng)協(xié)議、子域名、主域名、端口號重任意一個不相同時，都算作不同域。
3.不同域之間相互請求資源，就算作“跨域”。- 處理跨域方法一：代理
- 處理跨域方法二：JSONP
JSONP可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。（不支持POST請求）
前端：
data:"jsonp"
jsonp:"callback"- 處理跨域方法三：XHR2
1.HTML5提供的XMLHttpRequest Level2已經(jīng)實現(xiàn)了跨域訪問以及其他的一些新功能。
2.IE10以下的版本都不支持。
3.在服務(wù)器端做一些改造即可：
header('Access-Control-Allow-Origin:*');(*表示所有域都可以訪問)
header('Access-Control-Allow-Methods:POST,GET');
