谈谈你对ajax的理解,以及用原生JS实现有哪些要点需要注意。
ajax,全称是异步JavaScript和XML,是用来和服务器进行数据交互的,让无刷新页面替换数据变成了可能。
ajax最核心的就是依赖于浏览器提供的XMLHttpRequest对象
原理就是通过XMLHttpRequest对象向服务器发出异步请求,从服务器获取数据,然后用JavaScript来操作DOM实现页面的局部刷新。
至于有哪些要点呢,来一个简短点的ajax请求:
var xhr = new XMLHttpRequest() //首先新建一个XMLHttpRequest的实例。
然后,向远程主机发出一个HTTP请求。
xhr.open("GET","XXXX")
xhr.send() //get方法send参数null或者不传,直接传递header请求头 //post的send则是传递值
接着,就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化,指定回调函数。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
alert(xhr.responseText)
}else{
alert(xhr.statusText)
}
}
onreadystatechange 每次状态改变时触发的事件
readyState HTTP请求状态 4表示数据已经接受完毕
status 服务器返回状态码,等于200表示一切正常
responseText 服务器返回的文本数据
stateText 服务器返回的状态文本
responseXML 服务器返回的XML格式的数据
需要注意的是XMLHttpRequest对象的open方法有三个参数,第一个参数指定是GET和POST,第二个参数指定URL地址,第三个参数指定是否使用异步,默认是true,所以不用写。但是要注意的就是这,千万不要把第三个参数指定为false,否则浏览器将停止响应,直到ajax请求完成。如果这个请求耗时过长,那么你会发现你的浏览器在这段时间内处于“假死状态”。最后调用send()方法才真正发生请求。GET请求不需要参数,POST请求需要把body部分以字符串或者formDate对象传进去。
面试时可以通过自己话述表达。