谈谈你对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对象传进去。

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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐