AJAX学习

Posted 2020-08-01

    面试问了关于这方面的知识，之前只是走马观花的看了一下，基本什么都不懂，所以看廖大的文章学习一下。

    AJAX是Asynchronous javascript and XML，JavaScript执行异步网络请求。

    一个Form的提交，一旦用户点击”Submit”按钮，表单开始提交，浏览器就会刷新页面，然后再新页面告诉你操作是成功了还是失败了。Web的基本运作原理就是一次HTTP请求对应一个页面。

     AJAX让用户停留在当前页面中，同时发出新的HTTP请求，用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户感觉自己仍然停留在当前页面，但是数据可以不断地更新。AJAX请求是异步执行的，也就是说，要通过

    在现代浏览器上写AJAX主要依靠XMLHttpRequest对象:

1.1、创建XMLHttpRequest（兼容低版本ie）

function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){
            if(typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"]
                        , i,len;
                for(i = 0,len = versions.length;i < len;i++){
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch(ex){
                        //pass
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }else{
            throw new Error("No XHR object avaliable")
        }
    }

1.2、XHR的用法

    open()接收3个参数：要发送的请求的类型(“get”、”post”)、请求的URL和表示是否异步发送请求的布尔值。

xhr.open("get","example.php",false)

    发送特定的请求，则使用这样的调用：xhr.send(null) ，send接收作为请求主体发送的数据，如果不需要发送数据，则必须传入null。

    在接收到响应之前还可以调用abort()方法来取消异步请求。

    由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性:

responseText:作为响应主体被返回的文本

responseXML:如果响应的内容类型是”text/xml”或”application/xml”

status:响应的HTTP状态 //200成功 304资源没有被修改

statusText:HTTP状态的说明

    例子:

var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                console.log(xhr.responseText);
            }else{
                console.log("Request was unsuccessful:" + xhr.status);
            }
        }
    };
    xhr.open("get","example.txt",true);
    xhr.send(null)

1.3、HTTP头部信息

Accept：浏览器能够处理的内容类型

Accept-Charset：浏览器能够显示的字符集

Accept-Encoding：浏览器能够处理的压缩编码

Accept-Language：浏览器当前设置的语言

Connection：浏览器与服务器之间连接的类型

Cookie：当前页面设置的任何Cookie

Host：发出请求的页面所在的域

Referer：发出请求的页面的URL

User-Agent：浏览器的用户代理字符串

还可通过setRequestHeader自定义头部信息

1.4、GET请求

可以将查询字符串参数添加到URL的末尾，以便将信息发送给服务器。

1.5、POST

与GET请求相比，POST请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可达到POST请求的两倍。

1.6、XMLHttpRequest2级

实现跨域的方法

1、JSONP

只能用GET请求，并且要求返回JavaScript，这种方式跨域实际上是利用浏览器允许跨域引用的JavaScript资源。

2、CORS

html5规范定义的如何跨域访问资源