AJAX
AJAX:通過 JS 異步的向服務器發送請求並接受響應數據,響應數據的格式原來是xml,後來變成了JSON
同步請求:
當客戶端向服務器發送請求時,服務器在處理的過程中,瀏覽器只能等待,效率較低
異步請求:
當客戶端向服務器發送請求時,服務器在處理的過程中,瀏覽器可以做其他的操作,不需要一直等待
AJAX的優點：
- 異步訪問
- 局部刷新
AJAX的使用場景：
- 搜索建議
- 表單驗證
- 前後端完全分離時使用
2.AJAX核心對象 - 異步對象(XMLHttpRequest)
-
什麼是XMLHttpRequest
簡稱爲 xhr，稱爲 “異步對象” 代替瀏覽器向服務器發送異步的請求並接收響應
-
創建異步對象
主流的異步對象是 XMLHttpRequest 類型的.並且所有主流瀏覽器(IE7+,Chrome,Firefox,Safari,Opera)也都支持 XMLHttpRequest.但在IE低版本瀏覽器(IE7以及以下),就不支持XMLHttpRequest,需要使用 ActiveXObject() 來創建異步對象
如果支持 XMLHttpRequest var xhr = new XMLHttpRequest() 如果不支持 XMLHttpRequest var xhr = new ActiveXObject("Microsoft.XMLHTTP") -
xhr 的成員
1.方法 - open() 作用:創建請求 語法:open(method,url,async) method:請求方式,取值 'get' 或 'post' url:請求地址,字符串 async:是否採用異步的方式發送請求 true:異步請求 false:同步請求 ex: xhr.open('get','/server',true); 2.屬性 - readyState 作用:請求狀態,通過不同的請求狀態值來表示xhr與服務器的交互情況 由 0-4 共 5 個值表示5個不同的狀態 0 : 請求尚未初始化 1 : xhr已經與服務器建立連接 2 : 服務器端已經接收請求 3 : 請求正在處理中 4 : 響應已經完成 3.屬性 - status 作用:服務器端的響應狀態碼 200 : 表示服務器已經正確處理請求並給出響應 404 : 請求資源不存在 500 : 服務器內部錯誤 4.屬性 - responseText 作用 : 接收服務器端響應回來的數據 5.事件 - onreadystatechange 作用 : 每當 xhr 的 readyState 值發生改變的時候都要觸發的行爲操作 - 回調函數 關注: 1.xhr 的 readyState 是否爲 4 2.xhr 的 status 是否爲 200 如果以上兩點同時滿足的話,則可以接收響應數據(responseText) ex: xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); } } 6.方法 - send() 作用:通知 xhr 開始向服務器發送請求 語法:xhr.send(body) get : body的值爲 null xhr.send(null) post: body的值爲具體請求提交的數據 xhr.send("請求數據")
4.AJAX的操作步驟
- GET請求
- 創建 xhr 對象
- 創建請求 - open()
- 設置回調函數 - onreadystatechange # 判斷狀態,接收響應,業務處理
- 發送請求 - send(null)
- POST請求
- 創建 xhr 對象
- 創建請求 - open()
- 設置回調函數 - onreadystatechange # 判斷狀態,接收響應,業務處理
- 發送請求 - send(具體數據)
5.原生的AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function btnAjax(){
//1.創建xhr
var xhr = createXhr();
//2.創建請求
//xhr.open('get','/server',true);
xhr.open('get','/server?uname=wangwc',true);
//3.設置回調函數
xhr.onreadystatechange=function(){
//判斷xhr的狀態以及服務器的狀態
if(xhr.readyState==4&&xhr.status==200){
document.getElementById('show').innerHTML=xhr.responseText
}
}
//4.發送請求
xhr.send(null);
}
</script>
<!--<button οnclick="console.log(createXhr())">測試異步對象</button>-->
<div id="show"></div>
<button onclick="btnAjax()">AJAX請求</button>
</body>
</html>
js 遍歷json對象
packJson = [
{"name":"nikita", "password":"1111"},
{"name":"tony", "password":"2222"}
];
for(var p in packJson){//遍歷json數組時，這麼寫p爲索引，0,1
alert(packJson[p].name + " " + packJson[p].password);
}
for(var i = 0; i < packJson.length; i++){
alert(packJson[i].name + " " + packJson[i].password);
}
jqury 遍歷json對象
$arr.each(function(i,obj){
i : 遍歷出來的元素的下標
obj : 遍歷出來的元素
});
$.each(arr,function(i,obj){
i : 遍歷出來的元素的下標
obj : 遍歷出來的元素
});
6.使用 jquery 操作 AJAX
1. $obj.load(url[,data][,callback])
作用:遠程加載數據並加載到$obj元素中
url : 遠程請求的地址
data : 要傳遞的參數
1.字符串拼參數,採用 get 方式發送請求
2.使用 JSON 格式拼參數,採用 post 方式發送請求
callback : 請求和響應完成之後的回調函數
function(resText,statusText){
resText : 響應回來的文本
statusText : 響應回來的狀態文本
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnLoad").click(function(){
var params = {
"uname":"wangwc",
"uage":30
}
$("#show").load('/02-jq-load',params,function(resText,statusText){
console.log("響應回來的文本是:"+resText);
console.log("狀態文本是:"+statusText);
$(this).html("<h1>"+resText+"</h1>");
});
});
});
</script>
</head>
<body>
<button id="btnLoad">使用load方法加載數據</button>
<div id="show"></div>
</body>
</html>
2.$.get(url[,data][,callback][,type])
作用:使用 get 方式異步的向服務器發送請求
url : 遠程請求的地址
data : 請求參數 (可選)
callback : 響應成功後的回調函數(可選)
function(resText){
resText : 表示響應回來的數據
}
type : 響應回來的數據的數據類型
1.html : 響應回來的文本當成HTML文本處理
2.text : 響應回來的文本當成text文本處理
3.json : 響應回來的文本當成JSON進行處理(轉換成JS對象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnGet").click(function(){
$.get('/03-jq-get',function(resText){
//resText表示的是響應回來的數據
console.log(typeof(resText));
console.log(resText);
console.log(resText.uname);
console.log(resText.uage);
},'json');
});
});
</script>
</head>
<body>
<button id="btnGet">使用get方式發送請求</button>
</body>
</html>
$.post(url[,data][,callback][,type])
url : 遠程請求的地址
data : 請求參數 (可選)
callback : 響應成功後的回調函數(可選)
function(resText){
resText : 表示響應回來的數據
}
type : 響應回來的數據的數據類型
1.html : 響應回來的文本當成HTML文本處理
2.text : 響應回來的文本當成text文本處理
3.json : 響應回來的文本當成JSON進行處理(轉換成JS對象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnPost").click(function(){
var params = {
'uname':'wangwc',
'ugender':'男'
}
$.post('/04-jq-post',params,function(data){
$("#show").html(data);
});
});
});
</script>
</head>
<body>
<button id="btnPost">發送post請求</button>
<div id="show"></div>
</body>
</html>