JS学习笔记之ajax

发表于 | 分类于
字数统计: 466

Ajax（Asynchronous JavaScript + XML）在2005年被Jesse James Garrett引入，他综合了许多当时现有技术，产生了ajax。ajax使得浏览器可以额外地向服务器请求数据而不用重新刷新页面，ajax从服务器或许到数据后，可用javascript操作DOM以改变页面。虽然ajax中的x代表XML，但目前JSON的使用要更加广泛一点。JSON更加轻量级以及是原生javascript的一部分。

实现ajax的核心是XMLHttpRequest对象，其使用主要是open()、send()等函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//1.new
//2.event
//3.open
//4.send

var xhr = new XMLHttpRequest();

//为了兼容性，事件回调需在open之前定义
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was failed.");
        }
    }
}
//以get的方式请求example.txt，这里用相对路径，相对当前页面；最后一个参数代表是否异步。调用open之后，请求并没有发送，只是启动一个请求以备发送。
xhr.open("get", "example.txt", true);

//请求主体无数据。调用send之后，请求就会被发送出去。
xhr.send(null);

对象xhr中有一个readyState属性，这个属性表示目前ajax处于哪个状态，一般我们多使用4:已经接收到全部响应数据。当readyState状态改变时，会触发readystatechange事件。我们将该事件以DOM0级的方式添加到xhr对象上。在这个事件中，我们要检测readyState是否等于4，还要检测status。
还有一个在使用上比readystatechange事件要简单一点的是load事件，该事件就是在响应接收完毕后触发的，也就没有必要去检测readyState了。

1
2
3
4
5
6
7
xhr.onload = function() {
    if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was failed.");
    }
}