ajax入门
Ajax
异步对象:
var xmlHttpRequest = new XMLHttpRequest();
ajax
:saynchronous js and xml
步骤
创建异步对象
var xmlHttpRequest = new XMLHttpRequest();
给异步对象绑定事件
onreadystatechange
:当异步对象发起请求,获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化。例如:
xmlHttpRequest.onreadystatechange = function() {处理请求的状态变化}
onreadystatechange
属性:一个js函数名或直接定义函数,每当readyState
的属性改变时,就会调用该函数
readyState
属性:存在XMLHttpRequest
的状态,从0到4发生变化。
- 0: 请求未初始化,创建异步请求对象
var xmlHttpRequest = new XMLHttpRequest();
- 1: 初始化异步请求对象,
xmlHttp.open(请求方式,请求地址,true)
;- 2: 异步对象发送请求,
xmlHttpRequest.send()
- 3: 异步对象接收应答数据(从服务器段返回的数据),
xmlHttpRequest
内部处理- 4: 异步对象已经将数据解析完毕,此时才可以读取数据。开发人员在此时处理数据。开发人员在这时进行页面的更新。
status
属性:表示网络的状况。常见有200,404,500...当status === 200时,表示网络的请求成功。初始化异步请求对象
异步的方法为open()
xmlHttpRequest.open("请求的方式get/post","请求的服务器访问地址",true(表示发送的请求为异步请求,默认值)/false(表示发送的请求为同步请求))
使用异步对象发送请求
xmlHttpRequest.send()
获取服务器端返回的数据,使用异步对象的属性
xmlHttpRequest.responseText
向后端传送数据
在
xmlHttpRequest.send()
方法中加入需要传入的参数即可。
获得后端发送的数据
通过
xmlHttpRequest.responseText
就可以获得后端发送的数据如果后端发送的数据为
json
类型的,可以通过下面两种方式将后端传入的数据转为json
类型
var json =eval("(" + xmlHttpRequest.responseText + ")") ;
然后就可以使用获得的json对象,通过
.属性名
的方式就可以获得相关的属性
var json = JSON.parse(xmlHttpRequest.responseText);
两种方法的区别是第二种方法在解析json数据时会对其进行格式的检查,如果不正确就不进行解析。而第一种方法可以解析任何的字符串,是不安全的。推荐使用第二种解析json数据的方法。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
2021-03-10 RISC / CISC