JS学习笔记——ajax

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

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

//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了。

xhr.onload = function() {
    if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was failed.");
    }
}
posted @ 2017-05-24 16:13  水煮海鲜  阅读(142)  评论(0编辑  收藏  举报