Ajax

amity
233 阅读3分钟

ajax:用javascript执行异步网络请求，加载数据无需刷新整个页面

核心：创建XHR对象并调用XHR对象的方法

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

思路

（1）通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。注意，不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。

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

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

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

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

安全限制

（1）上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。

（2）这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。

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

常用的两种解决方式

（1）第一种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：
    function getPrice() {
        var js = document.createElement('script'),
        head = document.getElementsByTagName('head')[0];
        js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
        head.appendChild(js);
    }
    function refreshPrice(data) {
        var p = document.getElementById('test-jsonp');
        p.innerHTML = '当前价格：' +
            data['0000001'].name +': ' + 
            data['0000001'].price + '；' +
            data['1399001'].name + ': ' +
            data['1399001'].price;
    }
    JSONP有两部分组成，‘回调函数’和‘数据’;在请求中指定回调函数callback=functionName;请求的数据作为回调函数的参

（2）第二种方式成为CORS
    如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。
    CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。
    Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，
    首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
    比如加载css字体时，如果CDN未正确设置“Access-Control-Allow-Origin”,则无法获取该字体
    /* CSS */
    @font-face {
        font-family: 'FontAwesome';
        src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
    }
avatar
文章
阅读
粉丝