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();

})