ajax+json數據處理

時間 2019-11-29

原文原文鏈接

1、Ajax
定義：js提供的一種鏈接後臺的方式
特色：異步請求，頁面不須要刷新，不須要跳轉就能夠從後臺拿到數據。

步驟：
（1）建立實例化對象
低版本：new XMLHttpRquest()
高版本：new ActiveXObject('Microsoft.XMLHTTP')
兼容性：if(window.XMLHttpRequst){var xhr=new XMLHttpRequst}
else{var xhr=new ActiveXObject();}
（2）鏈接後臺
方式：xhr.open('請求方式'，'路徑'，'是否異步')
參數一：get/post
參數二：獲取後臺文件的路徑(.php/.JSON處理後臺數據文件)
注意：a：get方式中路徑加「？」拼接傳遞參數，post方式中只有路徑不傳參
xhr.open('get','try.php?username='+username+'&password='+$password);
xhr.open('post','try.php')
b：只能請求本地（本服務器）的文件，不能跨域
c:注意拼接用「+」
參數三：布爾值默認是true異步，false不是異步
（3）發送數據
方式：xhr.send();
get方法中：xhr.send();
post方法中：【請求頭】+【發送數據】
請求頭：xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
發送數據：xhr.send("name="+uname+"&pwd="+mima);
（4）接收數據
描述：接收後臺返回來的數據，讓後臺數據交給前臺處理
監聽方法：onreadystatechange()
監聽狀態：

（a）ajax狀態碼格式：xhr.readyState
0: 剛建立Ajax實例化對象
1: 調用open方法
2: 調用send方法
3: 後臺開始返回數據，先返回數據頭
4: 接收數據完成
能看到的狀態碼2,3,4。使用的是4的時候的數據
（b）http服務器狀態碼
格式：xhr.status
描述：表示服務器是否正常返回數據
成功的監聽範圍：xhr>=200 && xhr<=207 || xhr==304
當ajax狀態和http狀態都成功時候正常接收數據:使用xhr.responseText接收返回的數據是字符串格式
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if（xhr.status>=200 && xhr.status<=207 || xhr.status==304){
console.log(xhr.responseText)
}
}

上海尚學堂前端培訓原創，請多關注，ajax、html5等相關技術文章陸續奉上！php

2、JSON請求數據
（1）將接收數據轉化爲對象JSON.parse(xhr.responseText)
（2）將數據顯示在頁面並綁定事件
a：字符串方式

//顯示：遍歷數組，經過js湖區元素將元素內容進行字符串拼接

function stringfn(data)

{

for(var i in data)

{

table.innerHTML+="< tr >< td >"+i+"</ td >< td >"+data[i]['name']+"</ td >< td >"+data[i]['sex']+"</ td >< td >"+data[i]['shouji']+"</ td >< td class=‘caozuo’>"+data[i]['address']+"</ td ></ tr >";

}

//綁定事件

事件委託：給本來存在的父類元素添加事件，經過e.target.className篩選真正觸發者

table.onclick=function(e)

{

e= e || window.event;

if(e.target.className.trim()=='caozuo')

{

alert(e.target.innerHTML);

}

b、DOM建立元素添加

function createEle(data)

{

for(var i in data)

{

var trN=document.createElement('tr');

var tdN1=document.createElement('td');

var tdN2=document.createElement('td');

var tdN3=document.createElement('td');

var tdN4=document.createElement('td');

var tdN5=document.createElement('td');

tdN1.innerHTML=i;

tdN2.innerHTML=data[i]['name'];

tdN3.innerHTML=data[i]['sex'];

tdN4.innerHTML=data[i]['shouji'];

tdN5.innerHTML=data[i]['address'];

trN.appendChild(tdN1);

trN.appendChild(tdN2);

trN.appendChild(tdN3);

trN.appendChild(tdN4);

trN.appendChild(tdN5);

table.appendChild(trN);

}

c、Jq方式添加與綁定事件

//遍歷數組將拼接成的字符創=串做爲對象追加到table中

function Jqfun(data)

{

for(var i in data)

{

$("< tr >< td >"+i+"</ td >< td >"+data[i]['name']+"</ td >< td >"+data[i]['sex']+"</ td >< td >"+data[i]['shouji']+"</ td >< td >"+data[i]['address']+"</ td ></ tr >").appendTo('table');

}

//綁定事件

slideToggle()能夠切換狀態

$('table').on('click','.xianshi',function()

{

$(this).parents('tr').siblings().slideToggle();

})