AJAX,全称是Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML。首先要提到的是,AJAX不是新的语言,是一种解决方案。有的时候你会涉及到jquery中的ajax,如果在某块你没有用到jquery,那你可能涉及到不涉及框架的javascript的ajax。本文对后者详细介绍。
一、核心对象
ajax常用的对象有两个,XMLHttpRequest和FormData。
1.XMLHttpRequest
该对象代表发往服务器端的请求,通过如下代码创建一个新的XMLHttpRequest对象
var request=new XMLHttpRequest();
但此时还没有指定用什么样的方法(POST或GET或其它的一些)向哪个服务器发送请求。我们通过open方法完成这个工作。
xmlhttp.open("POST","www.eee.com/eee",true);其中,第一个参数指的是方法,第二个参数是目标服务器中目标程序的URL,第三个参数指是否异步(true为异步)。异步是指请求发送之后,不在原地等待服务器的响应,继续执行之后的代码。反之,程序则阻塞于send方法,直到服务器发来了响应。接下来说说这个send方法。open方法只是在客户端确定了请求的一些参数,并没有把请求发往服务器,send方法完成这个工作。
request.send();//POST和GET方法皆可使用该方法或
request.send(data);//存在附加数据的时候,不能用GET方法
我们来解释一下有附加数据的那个形式中的参数,这个就是ajax第二个常用的对象,FormData。这个对象通过“键值对”的方式存储数据。代码如下:
var data=new FormData(); data.append("key",value);//这个方法向data对象追加一个“键值对”至此,我们已经可以完成向服务器发送请求,并携带“键值对”数据的工作了。
二、响应的获取
request.responseText; request.responseXML;前者直接返回服务器发来的字符串(一般是html等),后者返回的是用响应的字符串看作XML文本,并创建相应的的Document对象,用来对XML 进行DOM解析。
我们现在知道了在服务器发来响应之后如何去获取,那么问题来了,我们如何知道服务器的响应什么时候会到客户端呢?这分为两种情况,即request是否异步。对于同步的比较简单。
request.send(); request.responseText;就像这样,直接在send方法之后写获取响应的代码即可(因为响应不到,程序阻塞)。
异步的呢,就需要注册一个监听器。
request.onreadystatechange=function(){ if (request.readyState==4 && request.status==200){ } }
每当request的状态发生变化时,就触发function,然后在function中对readyState和status进行判断,然后执行响应的逻辑。
readyState有如下几个值:
0.请求未初始化;
1.服务器连接已建立;
2.请求已接收;
3.请求处理中;
4.请求已完成,且响应已就绪.
status常用的值有下面两个:
202.OK
404.未找到对应的资源