前端之AJAX
JSONjavascript
是一種輕量級的數據交換格式。JSON是用字符串來表示Javascript對象；html
json字符串就是js對象的一種表現形式(字符串的形式)java
var person = {"name":"alex",
"sex":"men",
"teacher":{
"name":"tiechui",
"sex":"half_men",
},
"bobby":['basketball','running'],
"getName":function() {return 80;}
};
alert(person.name);
alert(person.getName());
alert(person.teacher.name);
alert(person.bobby[0]);
複製代碼
parse()和.stringify()jquery
parse() 用於從一個json字符串中解析出json對象,如
var str = '{"name":"yuan","age":"23"}'
結果：JSON.parse(str) ------> Object {age: "23",name: "yuan"}
stringify()用於從一個json對象解析成json字符串，如
var c= {a:1,b:2}
結果： JSON.stringify(c) ------> '{"a":1,"b":2}'
注意1：單引號寫在{}外，每一個屬性名都必須用雙引號，不然會拋出異常。
注意2:
a={name:"yuan"}; //ok
b={'name':'yuan'}; //ok
c={"name":"yuan"}; //ok
alert(a.name); //ok
alert(a[name]); //undefined
alert(a['name']) //ok
複製代碼
什麼是AJAXajax
AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML，如今用的較多的是json）。json
同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；後端
異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。跨域
AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）數組
AJAX的優缺點瀏覽器
優勢：
• AJAX使用Javascript技術向服務器發送異步請求；
• AJAX無須刷新整個頁面；
• 由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此AJAX性能高；
缺點：
• AJAX並不適合全部場景，不少時候仍是要使用同步交互；
• AJAX雖然提升了用戶體驗，但無形中向服務器發送的請求次數增多了，致使服務器壓力增大；
• 由於AJAX是在瀏覽器中使用Javascript技術完成的，因此還須要處理瀏覽器兼容性問題；
AJAX技術
四步操做：
• 建立核心對象；
• 使用核心對象打開與服務器的鏈接；
• 發送請求
• 註冊監聽，監聽服務器響應。
XMLHTTPRequest
• open(請求方式, URL, 是否異步)
• send(請求體)
• onreadystatechange，指定監聽函數，它會在xmlHttp對象的狀態發生變化時被調用
• readyState，當前xmlHttp對象的狀態，其中4狀態表示服務器響應結束
• status：服務器響應的狀態碼，只有服務器響應結束時纔有這個東東，200表示響應成功；
• responseText：獲取服務器的響應體
AJAX核心（XMLHttpRequest）
其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。全部的異步交互都是使用XMLHttpServlet對象完成的。也就是說，咱們只須要學習一個Javascript的新對象便可。
var xmlHttp = new XMLHttpRequest()；（大多數瀏覽器都支持DOM2規範）
複製代碼
注意，各個瀏覽器對XMLHttpRequest的支持也是不一樣的！爲了處理瀏覽器兼容問題，給出下面方法來建立XMLHttpRequest對象：
function createXMLHttpRequest() {
var xmlHttp;
// 適用於大多數瀏覽器，以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 適用於IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 適用於IE5.5，以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
複製代碼
打開與服務器的鏈接（open方法）
當獲得XMLHttpRequest對象後，就能夠調用該對象的open()方法打開與服務器的鏈接了。open()方法的參數以下：
open(method, url, async)：
• method：請求方式，一般爲GET或POST；
• url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若爲GET請求，還能夠在URL後追加參數；
• async：這個參數能夠不給，默認值爲true，表示異步請求；
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/", true);
複製代碼
發送請求
當使用open打開鏈接後，就能夠調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數爲POST請求參數，即對應HTTP協議的請求體內容，如果GET請求，須要在URL後鏈接參數。
注意：若沒有參數，須要給出null爲參數！若不給出null爲參數，可能會致使FireFox瀏覽器不能正常發送請求！
xmlHttp.send(null);
複製代碼
接收服務器響應
當請求發送出去後，服務器端Servlet就開始執行了，但服務器端的響應尚未接收到。接下來咱們來接收服務器的響應。 XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：
• 0：初始化未完成狀態，只是建立了XMLHttpRequest對象，還未調用open()方法；
• 1：請求已開始，open()方法已調用，但還沒調用send()方法；
• 2：請求發送完成狀態，send()方法已調用；
• 3：開始讀取服務器響應；
• 4：讀取服務器響應結束。
onreadystatechange事件會在狀態爲一、二、三、4時引起。 下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！
xmlHttp.onreadystatechange = function() {
alert('hello');
};
複製代碼
但一般咱們只關心最後一種狀態，即讀取服務器響應結束時，客戶端纔會作出改變。咱們能夠經過XMLHttpRequest對象的readyState屬性來獲得XMLHttpRequest對象的狀態。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
alert('hello');
}
};
複製代碼
其實咱們還要關心服務器響應的狀態碼是否爲200，其服務器響應爲404，或500，那麼就表示請求失敗了。咱們能夠經過XMLHttpRequest對象的status屬性獲得服務器的狀態碼。 最後，咱們還須要獲取到服務器響應的內容，能夠經過XMLHttpRequest對象的responseText獲得服務器響應內容。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
複製代碼
if 發送POST請求：
須要設置請求頭：xmlHttp.setRequestHeader(「Content-Type」, 「application/x-www-form-urlencoded」)；
複製代碼
請求完整代碼：
<h1>AJAX</h1>
<button onclick="send()">測試</button>
<div id="div1"></div>
<script>
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數瀏覽器
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function send() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var div = document.getElementById("div1");
div.innerText = xmlHttp.responseText;
div.textContent = xmlHttp.responseText;
}
};
xmlHttp.open("POST", "/ajax_post/", true);
post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("b=B");
}
</script>
複製代碼
AJAX實例（用戶名是否已被註冊）
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function send() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if(xmlHttp.responseText == "true") {
document.getElementById("error").innerText = "用戶名已被註冊！";
document.getElementById("error").textContent = "用戶名已被註冊！";
} else {
document.getElementById("error").innerText = "";
document.getElementById("error").textContent = "";
}
}
};
xmlHttp.open("POST", "/ajax_check/", true, "json");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var username = document.getElementById("username").value;
xmlHttp.send("username=" + username);
}
</script>
//--------------------------------------------------
<h1>註冊</h1>
<form action="" method="post">
用戶名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
密 碼：<input type="text" name="password"/><br/>
<input type="submit" value="註冊"/>
</form>
複製代碼
jquery實現的ajax
快捷API：
<1>$.get(url, [data], [callback], [type]) //[]裏的表示能夠不填
<2>$.post(url, [data], [callback], [type]) //type: text|html|json|script
應用：
//請求參數應該儘可能放在data參數中，由於能夠自動編碼，手動拼接url要注意編碼問題
function testWithDataAndCallback() {
//$.post...
$.get('/user/list', {type: 1}, function (data, callbacktype, jqXHR) {
console.log(data);//將json字符串解析成json對象
});
}
－－－－－－－－－－－－－－
<4>$.getJSON()
與$.get()是同樣的，只不過就是作後一個參數type必須是json數據了。
通常同域操做用$.get()就能夠，
$.getJson 最主要是用來進行jsonp跨域操做的。
複製代碼
核心API的基本使用：
<1> $.ajax的兩種寫法：
$.ajax("url",{})
$.ajax({})
<2> $.ajax的基本使用
$.ajax({
url:"//",
data:{a:1,b:2},
type:"GET",
success:function(){}
})
<3> 回調函數
$.ajax('/user/allusers', {
success: function (data) {
console.log(arguments);
},
error: function (jqXHR, textStatus, err) {
// jqXHR: jQuery加強的xhr
// textStatus: 請求完成狀態
// err: 底層經過throw拋出的異常對象，值與錯誤類型有關
console.log(arguments);
},
complete: function (jqXHR, textStatus) {//成功失敗都執行
// jqXHR: jQuery加強的xhr
// textStatus: 請求完成狀態 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments); //注意：後端模擬errror方式：HttpResponse.status_code=500
},
'400': function () {
}
}
});
複製代碼
核心API的重要字段(參數)：
<1> ----------請求數據相關: data, processData, contentType, traditional--------------
data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
(urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。
# function testData() {
# $.ajax("/test",{ //此時的data是一個json形式的對象
# data:{
# a:1,
# b:2
# }
# }); //?a=1&b=2
processData：聲明當前的data數據是否進行轉碼或預處理，默認爲true，即預處理；
if爲false，那麼對data：{a:1,b:2}會調用json對象的toString()方法，
即{a:1,b:2}.toString()最後獲得一個［object，Object］形式的結果。
{"1":"111","2":"222","3":"333"}.toString();//[object Object]
該屬性的意義在於，當data是一個dom結構或者xml數據時，咱們但願數據不要進行處理，直接發過去，
就能夠講其設爲true。
contentType：默認值: "application/x-www-form-urlencoded"。發送信息至服務器時
內容編碼類型。
用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；若是想以其餘方式提交數據，
好比contentType:"application/json"，即向服務器發送一個json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
# 注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象
traditional：通常是咱們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]},
traditional爲false會對數據進行深層次迭代；
<2> ------------------------ 響應數據: dataType、dataFilter------------------------
dataType：預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析後，傳遞給回調函數。
# 默認不須要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換；好比咱們的服務器響應的
# content Type爲json格式，這時ajax方法就會對響應的內容進行一個json格式的轉換，if轉換成功，咱們在
# success的回調函數裏就會獲得一個json格式的對象；轉換失敗就會觸發error這個回調函數。若是咱們明確地指
# 定目標類型，就可使用data Type。
# dataType的可用值：html｜xml｜json｜text｜script
# 見下dataType實例
dataFilter: 類型：Function 給 Ajax返回的原始數據的進行預處理的函數。見下dataFilter實例
<3> 請求類型 type：
類型：String 默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，
如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。
<4> 前置處理 beforeSend(XHR)
類型：Function 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest
# 對象是惟一的參數。這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求。
# 見下beforeSend實例
<5> jsonp 類型：String
# 在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL
# 參數裏的 "callback" 部分，好比 {jsonp:'onJsonPLoad'} 會致使將 "onJsonPLoad=?" 傳給服務器。
<6> jsonpCallback 類型：String
# 爲 jsonp 請求指定一個回調函數名。這個值將用來取代 jQuery 自動生成的隨機函數名。這主要用來讓 jQuery 生
# 成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存 GET 請求
# 的時候，指定這個回調函數名。
複製代碼
- 1. 前端之AJAX
- 2. 前端之Ajax(HTTP)
- 3. 前端之ajax XMLHttpRequest請求
- 4. 前端之ajax解析
- 5. 前端學習之路---Ajax
- 6. 前端學習之-Ajax
- 7. 前端基礎之Ajax
- 8. 前端Ajax
- 9. web前端----ajax
- 10. 前端Ajax（一）
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • AJAX 簡介 - PHP教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP Ajax 跨域問題最佳解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端之AJAX
- 2. 前端之Ajax(HTTP)
- 3. 前端之ajax XMLHttpRequest請求
- 4. 前端之ajax解析
- 5. 前端學習之路---Ajax
- 6. 前端學習之-Ajax
- 7. 前端基礎之Ajax
- 8. 前端Ajax
- 9. web前端----ajax
- 10. 前端Ajax（一）