JavaScript AJAX 技术

虽然 AJAX 不是 JavaScript 规范的一部分,但它们的关系非常紧密,因此我们决定还是在这里介绍一下 AJAX。

AJAX 全称为 Asynchronous JavaScript And XML,意为异步 JavaScript 和 XML。AJAX 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

两者区别

JavaScript 是一种在客户端执行的脚本语言。AJAX 是基于 JavaScript 的一种技术,它主要用途是提供异步刷新(只刷新页面的一部分,而不是整个页面都刷新)。一个是语言,一个是技术,两者有本质区别。

使用示例

AJAX 的使用分为以下几个步骤。

1、创建 XMLHttpRequest 对象,代码如下:

var xmlhttp;
if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2、向服务器发送请求,代码如下:

xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();

说明:

  • open 方法中第1个参数为请求的类型(GET 或 POST),第2个参数为 URL(请求接口地址),第3个参数为是否异步处理请求(true 为异步,false 为同步)。
  • send方法是将请求发送到服务器。

3、等待 onreadystatechange 事件

当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText);
    }
}

readyState 属性存有 XMLHttpRequest 的状态,并从 0 到 4 发生变化。

  • 0:请求未初始化。
  • 1:服务器连接已建立。
  • 2:请求已接收。
  • 3:请求处理中。
  • 4:请求已完成,且响应已就绪。

status 属性是 http 状态码,常用的 200 表示请求成功,404 表示找不到网页,500 一般表示服务端出错。

Leave a Reply