这里先给大家一个有实际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、接收服务器端的响应数据
(有错误麻烦给我指出来谢谢)