一、Ajax簡介
概念
Ajax (阿賈克斯 Asynchronous Javascript And Xml ) 異步JavaScript和XML办绝，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術, 可以訪問服務器數(shù)據(jù)的局部刷新的技術. AJAX不是一種新的編程語言愕提。Ajax作用
允許客戶端發(fā)送HTTP請求, 去異步請求服務器的數(shù)據(jù)來創(chuàng)建動態(tài)網(wǎng)頁。
異步獲取數(shù)據(jù)，即是數(shù)據(jù)交互(通過ajax獲取某一文本文件的內容)鳞尔。Ajax核心
Ajax 技術核心是JavaScript對象XMLHttpRequest(簡稱XHR)。使用的場景
a.在百度中進行關鍵字搜索早直，會提示相關的所有內容
b.在賬號注冊的時候寥假，其中某一項會直接提示錯誤
二、Ajax操作
- 創(chuàng)建對象XMLHttpRequest()
- open()方法
- send()
- request.onreadystatechange = function(){}
// 1霞扬、打開瀏覽器
// 創(chuàng)建一個ajax對象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2糕韧、在地址欄輸入地址
/*open方法
參數(shù)一: 打開方法 get/post
參數(shù)二: 請求地址
參數(shù)三: 是否異步 (true異步: 非阻塞 / false同步: 阻塞)
*/
request.open('get', '00-test.txt', true);
// 3、提交請求(回車)
request.send();
// 4喻圃、等待服務器返回內容
/**
responseText: ajax請求返回的數(shù)據(jù)即存放在該屬性下(都為字符串):
readyState屬性: 請求狀態(tài)
0: (初始化)還沒有調用open()方法
1: (載入)已調用send()方法萤彩，正在放請求
2: (載入完成)send()方法完成，已收到全部響應內容
3: (解析)正在解析響應
4: (完成)響應內容解析完成斧拍，可以在客戶端調用
on readystate change: 當readyState改變的時觸發(fā)
status: 服務器狀態(tài)雀扶，http狀態(tài)碼
1字開頭: 消息類
2字開頭: 成功類
3字開頭: 重定向類
4字開頭: 請求錯誤類
5字開頭: 服務器錯誤類
*/
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
// 請求到數(shù)據(jù)，顯示
var oP = document.createElement('p');
document.body.appendChild(oP);
oP.innerHTML = request.responseText;
} else {
alert('錯誤了');
}
}
}
三肆汹、同步愚墓、異步
- 同步：小店吃飯，小店老板廚師都是一個人
程序中：如果程序在下載數(shù)據(jù)昂勉，UI界面就無法響應浪册；
- 異步：飯?zhí)贸燥垼浙y臺硼啤，打飯的议经，廚師，各自互不影響
程序中：異步下載數(shù)據(jù)和UI界面兩個線程谴返；
四煞肾、HTTP協(xié)議
HTTP協(xié)議：
HTTP是一個屬于應用層的面向對象的網(wǎng)絡協(xié)議, 由于其簡捷,快速的方式, 適用于分布式超媒體信息系統(tǒng)。
HTTP協(xié)議的主要特點有: Client/Server模式嗓袱， Brower/Server模式
1, 支持客戶端/服務端模式. 即請求(request)-響應(response)模式, 必須先請求才能得到響應籍救， 服務器不能通過http協(xié)議直接發(fā)送數(shù)據(jù)給客戶端
2, 簡單快速, 客戶端向服務端發(fā)送請求時, 只需要傳送請求方式和路徑即可,所以簡單, 由于HTTP協(xié)議簡單, 使得HTTP服務器的程序規(guī)模小, 因而速度很快;
3, 靈活, 傳輸數(shù)據(jù)類型種類多
4, 無連接, 請求一次服務器后立刻斷開連接, 即非長連接 即短連接
5, 無狀態(tài), HTTP協(xié)議對事務處理沒有記憶能力; 【會話技術cookie、session】
HTTP協(xié)議的請求方式: get/post/options/head/put/delete/trace/connect/patch渠抹，但通常都是get和post蝙昙，即常說的使用http的get或post請求闪萄。
HTTP包含: 請求頭和請求體
- GET請求
在Ajax使用的過程中，GET的使用頻率又要比POST高得多. GET請求最常用于向服務器獲取數(shù)據(jù), 也可以將少量字符串參數(shù)提交給服務器奇颠。
get請求：在請求URL后面以 ? 的形式跟上發(fā)給服務器的參數(shù)败去，多個參數(shù)之間用&隔開。
get請求地址:
http://193.112.122.210/study/login_get.php
參數(shù)說明:
user 用戶名
password 密碼
例如:
http://193.112.122.210/study/login_get.php?user=qingbuyaodianwo&password=123321
注：由于瀏覽器和服務器對URL長度有限制烈拒，因此在URL后面附帶的參數(shù)是有限制的圆裕，通常不能通常不能超過1KB
- POST請求
POST請求可以包含非常多的數(shù)據(jù), 我們在使用表單提交的時候, 很多就是使用的POST傳輸方式。發(fā)給服務器的參數(shù)全部放在請求體(URL中看不到)中荆几。
POST請求向服務器發(fā)送的數(shù)據(jù), 不會跟在URL后面, 而是通過send()方法向服務器提交數(shù)據(jù)吓妆。
xhr.send('user =Zhang& password=123321');
POST請求和Web表單提交不同, 需要使用XHR來模仿表單提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
post請求地址:
http://193.112.122.210/study/login_post.php
參數(shù)說明:
user 用戶名
password 密碼
var request = null;
try{
request = new XMLHttpRequest();
} catch(e) {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('post', ' http://193.112.122.210/study/login_post.php', true);
// 請求頭,傳輸?shù)臄?shù)據(jù)類型(post默認是沒有設置的)
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 請求參數(shù)
request.send('user=EndEvent& password=123321');
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
alert(request.responseText);
} else {
alert('獲取數(shù)據(jù)失敗');
}
}
};
注: post傳遞的數(shù)據(jù)量沒有顯示，這具體還得看服務器的處理能力吨铸。
注: 從性能上來講POST請求比GET請求消耗更多一些, 用相同數(shù)據(jù)比較, GET比 POST快. 這也是我們GET請求的使用率大于POST的原因行拢。
五、JOSN數(shù)據(jù)解析
JSON.parse()將一個符合JSON語法的字符串解析成一個對應類型的值或對象诞吱。
// 轉為JSON對象
var dataSource = JSON.parse(request.responseText);
例如:
http://193.112.122.210/json/JSON1.json
在線解析:
http://json.cn
http://tool.oschina.net/codeformat/json
六舟奠、jQuery-Ajax
- $.ajax()
執(zhí)行一個異步的HTTP（Ajax）的請求。
/*
* 文檔注釋
* type: HTTP的請求方式（get或post）狐胎， 默認是get
* url: 接口鸭栖， 必需
* data: 參數(shù)（需要提交給服務器的數(shù)據(jù)）
* async: 是否異步， 默認是true
* success: 表示請求成功之后的響應
* error: 表示請求失敗之后的響應
*/
$(document).on('click', function(){
$.ajax({
type:"get",
url:"http://193.112.122.210/study/login_get.php",
data: {'user':'qingbuyaodianwo', 'password':'123321'},
async:true,
success: function(data){
console.log(data)
},
error: function(err){
console.log(err)
}
});
})
- $.get()
使用一個HTTP GET請求從服務器加載數(shù)據(jù)握巢。
語法:
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
url: 請求地址
data: 發(fā)送給服務器的字符串或Key/value鍵值對
success(data, textStatus, jqXHR): 當請求成功后執(zhí)行的回調函數(shù)
dataType: 從服務器返回的預期的數(shù)據(jù)類型晕鹊。默認：智能判斷（xml, json, script, or html）
$.get("http://193.112.122.210/json/JSON2.json", function(data){
// console.log(data)
var arr = JSON.parse(data)
})
注: http://193.112.122.210/json/JSON1.json
注: http://193.112.122.210/json/JSON2.json
注: 帶參數(shù)時，可以拼接到url后面暴浦，也可以設置data對象溅话。
jQuery中封裝的get請求快捷方式。
- $.post()
使用一個HTTP POST 請求從服務器加載數(shù)據(jù)歌焦。
語法:
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
url: 請求地址
data: 發(fā)送給服務器的字符串或Key/value鍵值對
success(data, textStatus, jqXHR): 當請求成功后執(zhí)行的回調函數(shù)
dataType: 從服務器返回的預期的數(shù)據(jù)類型飞几。默認：智能判斷（xml, json, script, or html）
$.post("http://193.112.122.210/study/login_post.php", {"user":"zhangsan","password":"123321"}, function(data){
//console.log(data)
console.log("post")
})
jQuery中封裝的post請求快捷方式。
七独撇、實際案例
- 蘑菇街商品列表效果
默認第1頁: http://193.112.122.210/study/getData.php
帶參數(shù)page頁碼: http://193.112.122.210/study/getData.php?page=1
帶參數(shù)page頁碼: http://193.112.122.210/study/getData.php?page=2
操作步驟:
1屑墨、基本HTML(模擬頁面顯示)
2、添加CSS樣式
3纷铣、通過ajax動態(tài)獲取數(shù)據(jù)
4卵史、JSON數(shù)據(jù)解析
5、DOM操作(渲染到頁面中)
