前端面试题之ajax

谈谈你对ajax的理解，以及用原生JS实现有哪些要点需要注意。

ajax，全称是异步JavaScript和XML，是用来和服务器进行数据交互的，让无刷新页面替换数据变成了可能。

ajax最核心的就是依赖于浏览器提供的XMLHttpRequest对象

原理就是通过XMLHttpRequest对象向服务器发出异步请求，从服务器获取数据，然后用JavaScript来操作DOM实现页面的局部刷新。

至于有哪些要点呢，来一个简短点的ajax请求：

var xhr = new XMLHttpRequest()		//首先新建一个XMLHttpRequest的实例。
1

然后，向远程主机发出一个HTTP请求。

xhr.open("GET","XXXX")
xhr.send()							//get方法send参数null或者不传,直接传递header请求头											//post的send则是传递值
12

接着,就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数。

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200 ){
       	alert(xhr.responseText)		
     }else{
     	alert(xhr.statusText)      	
     }
}
1234567

onreadystatechange 每次状态改变时触发的事件

readyState HTTP请求状态 4表示数据已经接受完毕

status 服务器返回状态码，等于200表示一切正常

responseText 服务器返回的文本数据

stateText 服务器返回的状态文本

responseXML 服务器返回的XML格式的数据

需要注意的是XMLHttpRequest对象的open方法有三个参数，第一个参数指定是GET和POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。但是要注意的就是这，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到ajax请求完成。如果这个请求耗时过长，那么你会发现你的浏览器在这段时间内处于“假死状态”。最后调用send()方法才真正发生请求。GET请求不需要参数，POST请求需要把body部分以字符串或者formDate对象传进去。

面试时可以通过自己话述表达。