这里先给大家一个有实际json数据的连接: https://jsonplaceholder.typicode.com/posts
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","https://jsonplaceholder.typicode.com/posts", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
request.onreadystatechange=function(){
if (request.readyState===4&&request.status===200) {
var data=request.responseText;
//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>';
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、接收服务器端的响应数据
(有错误麻烦给我指出来谢谢)