原生AJAX 请求JSON数据方式

时间:2022-09-15 12:32:34

这里先给大家一个有实际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、接收服务器端的响应数据

(有错误麻烦给我指出来谢谢)