原生js ajax请求
什么是ajax
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,也就是我们所说的局部更新。
简单示例
function play(){
var ajax = new XMLHttpRequest();
ajax.open("get","https://api.apiopen.top/recommendPoetry");
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState == 4 && ajax.status == 200){
console.log(JSON.parse(ajax.responseText));
}
}
}
play();
XMLHttpRequest 对象
如果需要使用ajax 我们需要创建一个XMLHttpRequest对象。代码如下:
var ajax = new XMLHttpRequest();
它接收3个参数:
1.method:请求类型,如get、post。
2.url:请求地址。
3.async:规定当前请求是否异步,默认(不填)是异步的。(true为异步,false为同步)
ajax.open("get","https://api.apiopen.top/recommendPoetry");
接下来我们通过setRequestHeader方法设置请求头。注意:这个方法必须要在open()方法执行之后才能设置。(也就是必须先调用open()方法)。代码如下:
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send方法
send方法表示将请求发送到服务器。
当请求类型为post时,send()方法接受一个参数,就是你需要传给后台的参数。get请求可以不填或者填null
ajax.send();
这时请求已经发送出去了,那我们如何知道服务器是否接收到了请求?如何接收服务器给我们的响应呢?
readyState属性
readyState是XMLHttpRequest对象中的一个属性,它存有服务器响应给我们的状态信息。readyState属性一共有5个值:
- 0: 请求未初始化(代理被创建,但尚未调用 open() 方法)
- 1: 服务器连接已建立(
open
方法已经被调用) - 2: 请求已接收(
send
方法已经被调用,并且头部和状态已经可获得) - 3: 请求处理中(下载中,
responseText
属性已经包含部分数据) - 4: 请求已完成,且响应已就绪(下载操作已完成)
onreadystatechange方法
每当readyState属性改变时,就会触发onreadystatechange()方法,所以我们可以在这个方法里面去获取服务器给我们的响应。
当readyState的值等于4的时候,表示请求已经完成,并且服务器已经把结果返回给我们了。
ajax.onreadystatechange=function(){
//readyState等于4 并且status等于200(表示请求成功)
if(ajax.readyState==4 && ajax.status==200){
console.log(ajax.responseText);//服务器响应的结果
}
}
responseText和responseXML属性
responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
我们上面使用的是responseText属性,但一般需要的是json格式数据,我们可以使用JSON.parse()让字符串转换成json对象。代码如下:
ajax.onreadystatechange=function(){
//readyState等于4 并且status等于200(表示请求成功)
if(ajax.readyState==4 && ajax.status==200){
console.log(JSON.parse(ajax.responseText));//服务器响应的结果
}
}
最新文章
- UWP开发之ORM实践:如何使用Entity Framework Core做SQLite数据持久层?
- HotApp小程序统计之自定义事件统计
- Linux时间设置及同步
- NO.3 CAS配置问题汇总
- validate jquery 注册页面使用实例 详解
- XMLHttpRequest upload属性
- Jquery_笔记
- 新浪微博授权时出现";关注 *** 的微博";
- 用Module元素实现SharePoint Webpart Page的自动生成
- TCP/IP(84) 详解
- Eclipse混淆文件导入Android Studio Gradle编译报input jar file is specified twice
- 乱译文档--Musca介绍
- Java类与类之间关系总结
- Power oj2470/DFS
- Storm入门(十二)Twitter Storm: DRPC简介
- js判断是微信、QQ内置浏览器打开页面
- jmeter的学习路线
- [转]微软商店 打开就显示无法加载该页面 代码0x80131500?
- 自学Zabbix4.0之路
- sqlserver 无法打开备份文件a.bak