原⽣AJAX请求JSON数据⽅式
1.实例化XMLHttpRequest对象
var request;
if (window.XMLHttpRequest) {
  request = new XMLHttpRequest()
} else {
  request = new ActiveXObject('Microsoft.XMLHTTP'); // 兼容IE5 6
}
2.将请求发送给服务器
request.open("GET","url", true);//请求
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
/
/设置我们的请求头信息
3.获取响应的⽅法
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
4.监听readystate属性
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调⽤该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发⽣变化。
0: 请求未初始化
1: 服务器连接已建⽴
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未到页⾯
5.完整请求信息(包含完整请求及加载该连接数据⽅式)
var request;
if (window.XMLHttpRequest) {
  request = new XMLHttpRequest()
} else {
  request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open("GET","picode/posts", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
if (adyState===4&&request.status===200) {
  var sponseText;
  //json字符串转换成为json对象
data=JSON.parse(data);
  var html = ''
  for (var i =0; i< data.length; i++) {
    if (data[i].userId == 1) {
      html += '<div><h2>' +data[i].userId +'_'+ data[i].id + '.' + data[i].title + '</h2>';
发送ajax请求的步骤      html +='<p>' + data[i].body + '</p></div>'
    }
  }
    d.innerHTML = html;
    console.log(1 + '加载成功')
} else {
  console.log(2 + '加载失败')
    }
  }
//发送数据
request.send();
(以上程序未封装)
总结:(摘⾃ web前端技术圈)
其实,实现ajax操作⾮常的简单,我们现在是以异步加载的效果为例;所以同学们在学习的时候可以按照下⾯的⼏个步聚去写:AJAX请求步骤
1、创建ajax对象
2、配置ajax,创建http连接
3、创建ajax对象变化的监听
4、向服务器发送请求
5、接收服务器端的响应数据
(有错误⿇烦给我指出来谢谢)

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。