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('请求已发送,请等待响应...');

----------------------------------------------------------------------------------------------------

当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。

XMLHttpRequest对象的open()方法有3个参数,第一个参数指定是GET还是POST,第二个参数指定URL地址,第三个参数指定是否使用异步,默认是true,所以不用写。

注意,千万不要把第三个参数指定为false,否则浏览器将停止响应,直到AJAX请求完成。如果这个请求耗时10秒,那么10秒内你会发现浏览器处于“假死”状态。

最后调用send()方法才真正发送请求。GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去。

-------------------------------------------------------------------------------------------------------------

安全策略

默认情况下,JavaScript在发送AJAX请求时,URL的域名必须和当前页面完全一致。

完全一致的意思是,域名要相同(www.example.com和example.com不同),协议要相同(http和https不同),端口号要相同(默认是:80端口,它和:8080就不同)。有的浏览器口子松一点,允许端口不同,大多数浏览器都会严格遵守这个限制。

你可能感兴趣的:(AJAX的回调函数代码及意义)