一、ajax介绍
ajax(Asynchronous Javascript And XML), 在前端的开发中主要是用来进行数据的交互,它不是一门新的编程语言,只是前端js中的一种异步的数据交互技术。
二、ajax实现异步数据交互
ajax最核心的就是XMLHttpRequest对象,要使用ajax第一步就是通过new XMLHttpRequest()穿件一个对象(假设叫xhr),然后通过xhr的open()方法请求数据该方法需要传入三个参数第一个是请求数据的方法,我们常用的方法有GET和POST,第二个参数是请求数据的url,第三个参数是一个布尔值,表示是否使用异步方式,当为true时表示异步,反之则表示同步。在数据传输的过程中会出现4种状态readyState,每一次状态的改变都会触发onreadystatechange方法,当readyState的值为4时说明数据的交互已经完成,我们可以通过xhr的responseText属性获取服务器返回的数据。整个过程的代码实现如下:
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.stadus = 200){
//可获取返回值xhr.responseText,执行想要执行的代码
}
}
如果需要想服务器发送数据,在使用GET和POST时发送数据的方法有点区别,GET方法实在url后面加问号,数据通过键值对的形式传递如:url?name=value&name=value的形式。而POST方法则是在xhr的send方法中传入键值对参数的形式发送数据。