AJAX的使用详解(javascript实现)

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对象追加一个“键值对”

至此，我们已经可以完成向服务器发送请求，并携带“键值对”数据的工作了。

二、响应的获取

响应的获取主要靠XMLHttpRequest的两个属性

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.未找到对应的资源

AJAX的使用详解(javascript实现)

猜你喜欢