AJAX原理

最新推荐文章于 2022-09-07 21:17:45 发布

Rnger

最新推荐文章于 2022-09-07 21:17:45 发布

阅读量270

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Rnger/article/details/82820779

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Asynchronous JavaScript and XML，用JavaScript执行异步网络请求。

AJAX是客户端与服务器端的交互技术，通过异步请求的方式，实现页面无刷新式提交。

使用AJAX，请求响应模式不再是请求对应页面的模式，服务器端的响应不要求重新加载整个页面，而可能仅仅更新部分内容。而且发送的请求是异步的，不需要等待服务器对该异步请求做出响应，还可以继续当前页面的操作，当服务器对异步请求相应完成后，浏览器才对页面的局部内容进行更新。下面来看看AJAX技术在哪些地方得到了广泛的应用。

验证注册名是否已使用
网站页面局部登陆和退出
文本框自动补全功能
地图拖动、放大、缩小功能

（1）在现代浏览器上写AJAX主要依靠对象XMLHttpRequest对象：

XMLHttpRequest对象的方法
open(methods,url,async(true/false))	建立与服务器的连接。method参数可以是GET/POST/PUT,，url参数指定请求的地址，async参数指定是否异步，默认为true,千万不要设置为false
setResquestHeader(header,value)	b把指定的请求头信息设置为所提供的值，必须放在open()之后
send(content/null)	向服务器发送请求，content参数指定请求的参数，为了考虑兼容性问题，如果不设置此参数，建议用null
abort()	停止当前请求
getRequestHeader(header)	返回指定的响应头的信息的值
getAllRequestHeaders()	f返回所有响应头信息作为键值对返回

XMLHttpRequest对象的属性
onreadystatechange()	指定当XMLHttpRequest对象的readyState属性发生变化时调用的函数进行处理
readyState	表示XMLHttpRequest对象的状态，0表示为初始化；1 open已调用，没有调用send；2 已调用send,未收到响应；3 接收到响应；4 响应接受完毕，可以使用了
status	f服务器返回的HTTP协议状态码，其中200表示服务器正常响应，只有readyState的值为3或者4时，该属性才可以使用
statusText	HTTP状态码的相应文本，例如ok Not Found
responseText	服务器响应的文本内容，当readyState的值为4时，信息完整
responseXML	服务器的响应，表示为XML，可以解析为一个DOM对象

（2）编写createXMLHttpRequest()方法因为不同浏览器创建XMLHttpRequest对象的的方法是不同的，所以为了兼容不同版本的浏览器，将创建XMLHttpRequest对象的方法写成如下形式：

function createXMLHttpRequest() {
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try {
            xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
            } catch (e) {
                alert("对不起，您的浏览器不支持xmlHttpRequest对象！");
            }
        }   
    }
}

（3）作为客户端浏览器，需要根据XMLHttpRequest对象状态的改变编写相应的代码，对页面进行处理。下面的代码完成的功能是当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('请求已发送，请等待响应...');

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

当创建了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的域名必须和当前页面完全一致。

常用的跨域方法：JSONP和CORS