ajax

转载于-----廖雪峰的官方网站

ajax不是JavaScript的书写规范，只是一哥们发明的缩写，全称为：Asynchronous JavaScript and XML

意思是用javascript执行异步请求。

如果仔细观察一个form提交，你就会发现，一旦用户点击提交按钮，浏览器就会刷新页面，然后再新的页面里告诉我们是否成功；如果不行因为网络太慢或者其他原因，我们就会看到一个404页面。

这就是web运作的原理：一次http请求对应一个页面；

如果要让用户留在当前页面中，同时发出新的http请求，就必须用js来发送这个请求，接收到数据后，再用js更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断的更新。

最早大规模使用ajax的是Gmail，Gmail的页面在首次加载之后，剩下的所有数据都依赖于ajax更新；

用javascript写一个完整的ajax代码并不复杂，但是要注意的是，ajax的请求时异步的，也就是说要通过回调函数来获得响应；

现代浏览器上写ajax主要依赖于XMLHttpRequest对象

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}


function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}


var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象


request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}


// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送，请等待响应...');

对于低版本的IE，需要换成ActiveXObject对象

function success(text) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = text;
}


function fail(code) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = 'Error code: ' + code;
}


var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象


request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}


// 发送请求:
request.open('GET', '/api/categories');
request.send();


alert('请求已发送，请等待响应...');