Ajax 初步

Ajax = 异步JS和XML，是一种用于创建快速动态网页的技术。

XMLHttpRequest 对象

用于在后台和服务器交换数据，可使网页的某部分更新的同时，不重新加载整个页面。

1
var request = new XMLHttpRequest();

XMLHttpRequest 对象有许多种方法，其中Send()、Open()方法用于向服务器发送请求。

方法 描述
open(method, url, async) method: 请求类型，“GET”/“POST”
url: 文件在服务器上的位置
async: 同步(false)或异步(true)
send(string) 仅用于POST请求

‘ GET ‘ Or ‘ POST ‘？

GET相较于POST更快更简单，但在以下情况中，使用POST：

  • 无法使用缓存文件（更新服务器上的文件或数据库）

  • 向服务器发送大量数据（POST 没有数据量限制）

  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

1
2
3
4
5
6
//GET请求
request.open("GET","example.txt", true);
request.send();
//POST请求
request.open("POST","example.txt", true);
request.send();

onreadystatechange 事件

onreadystatechange 是一个事件处理函数，它会在服务器给XMLHttpRequest 对象送回响应的时候被触发执行，可能有5个值：

  • 0表示未初始化

  • 1表示正在加载

  • 2表示加载完毕

  • 3表示正在交互

  • 4表示完成

只要readyState的属性变成4，同时status为200（404时，页面不存在），就可以访问服务器发送回来的数据了。一般，会给它制定一个处理函数：

1
2
3
4
5
6
request.onreadystatechange = function(){
    if (request.readyState == 4 && request.status == 200 ){
        //保存数据
        var txt = request.responseText
    }
}

访问服务器发送回来的数据时，需要通过两个属性完成：

  • responseText 用于保存文本字符串形式的数据

  • responseXML 用于保存Content-Type(http中的属性)头部中指定为“text/xml”的数据

Reference :