javascript ajax类AJAXRequest2007-12-31 更新

JavaScript AJAX类AJAXRequest2007-12-31是一种用于发送AJAX请求的JavaScript类。使用AJAXRequest类可以实现在不刷新页面的情况下，通过后台服务器获取数据并动态更新网页的应用。

下面是使用该类的详细攻略：

1. 引入AJAXRequest类

在使用AJAXRequest类之前，需要将类的代码引入到网页中。可以将AJAXRequest类的代码保存到一个单独的.js文件中，然后通过script标签引入到网页中，如下所示：

<script src="AJAXRequest.js"></script>

2. 创建AJAXRequest对象

在使用AJAXRequest类之前，需要先创建AJAXRequest对象。可以通过以下代码来创建一个AJAXRequest对象：

var ajaxReq = new AJAXRequest();

3. 发送AJAX请求

使用AJAXRequest对象可以发送AJAX请求，可以通过AJAXRequest对象的open()和send()方法来实现，如下所示：

ajaxReq.open('GET', 'url', true);
ajaxReq.send(null);

其中，open()方法的第一个参数指定请求的方法（GET或POST），第二个参数指定请求的URL，第三个参数指定请求是否采用异步方式（true表示异步，false表示同步）。

send()方法的参数为请求的消息体，对于GET请求通常为null。

4. 处理服务器响应

当服务器响应到达时，可以通过AJAXRequest对象的onreadystatechange事件来处理响应。可以将一个回调函数赋值给onreadystatechange事件，当AJAXRequest对象的状态发生变化时，该回调函数会被自动调用。在回调函数中可以获取服务器响应并进行相应的处理，如下所示：

ajaxReq.onreadystatechange = function() {
  if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    // 处理服务器响应
  }
};

其中，readyState属性表示AJAXRequest对象的状态（0表示未初始化，1表示已调用open()方法，2表示已调用send()方法，3表示正在接收服务器响应，4表示服务器响应已完成）。

status属性表示服务器响应的HTTP状态码（例如200表示成功，404表示未找到，500表示服务器内部错误等）。

示例1：使用AJAXRequest获取JSON数据

以下示例演示了如何使用AJAXRequest获取JSON数据，并将数据展示在页面上：

var ajaxReq = new AJAXRequest();
ajaxReq.open('GET', 'data.json', true);
ajaxReq.send(null);

ajaxReq.onreadystatechange = function() {
  if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    var data = JSON.parse(ajaxReq.responseText);
    var list = document.createElement('ul');
    for (var i = 0; i < data.length; i++) {
      var item = document.createElement('li');
      item.textContent = data[i].name + ' - ' + data[i].age;
      list.appendChild(item);
    }
    document.body.appendChild(list);
  }
};

在上述代码中，AJAXRequest对象发送了一个GET请求，请求的URL为data.json，该请求采用异步方式发送。当AJAXRequest对象接收到服务器响应时，解析JSON数据，并将数据展示在一个无序列表中。

示例2：使用AJAXRequest发送POST请求

以下示例演示了如何使用AJAXRequest发送POST请求，并将服务器响应展示在页面上：

var ajaxReq = new AJAXRequest();
ajaxReq.open('POST', 'submit.php', true);
ajaxReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ajaxReq.send('name=John&age=30');

ajaxReq.onreadystatechange = function() {
  if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
    var result = document.createElement('div');
    result.textContent = ajaxReq.responseText;
    document.body.appendChild(result);
  }
};

在上述代码中，AJAXRequest对象发送了一个POST请求，请求的URL为submit.php，该请求采用异步方式发送。请求的消息体为name=John&age=30，使用setRequestHeader()方法设置请求头信息，通知服务器请求消息体的类型为application/x-www-form-urlencoded。当AJAXRequest对象接收到服务器响应时，将响应内容展示在页面上。

以上就是使用AJAXRequest类实现AJAX请求的完整攻略。