[JavaScript知识库]原生ajax

原生ajax四步

    function sendXML() {

        var xhr;

        //原生Ajax 的四步骤
        //  1.  创建XMLHTTpRequest对象
               // 创建不同版本的Request对象
        if (window.XMLHttpRequest){

               //IE7+， Firefox，chrome,Opera,Safari 浏览器代码
            xhr=new XMLHttpRequest();

        }else {
            //IE6 ，IE5  浏览器代码
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }


       // console.log(xhr.readyState)


        // 2.   设置 onreadystatechange 的回调函数
            //（这个函数是自己写的 可以拿到里面的内容）
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4 && xhr.status==200){
                    document.getElementById("imgs").innerHTML=xhr.responseText;
                /*
                * innerHTML 将文本内容进行显示，带有标签的部分会自动解析
                * innerText 直接将文本内容显示，不会解析各种html标签
                * */

                }
            }
        // 3. open() 打开链接
        xhr.open("GET","pretty.html",false)


        // 4. 发送请求
        xhr.send();

    }

http 状态码

1xx（临时响应）

2xx （成功）

200：成功，并返回数据
201：已创建
202：已接受
203：成为，但未授权
204：成功，无内容
205：成功，重置内容
206：成功，部分内容

3xx （重定向）

表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向

常见的 3 字开头的状态码有：

301：永久移动，重定向
302：临时移动，可使用原有url
304：资源未修改，可使用缓存
305：需代理访问

4xx（请求错误）? 这些状态代码表示请求可能出错，妨碍了服务器的处理。

常见的 4 字开头的状态有：404 – 请求的网页不存在

5xx（服务器错误）

这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

常见的以 5 开头的状态码有：

500???? （服务器内部错误）?? 服务器遇到错误，无法完成请求。

同源策略和跨域

所谓的同源策略指的是相同的协议、域名、端口号我们称之为同源策略,只要协议、域名、端口号有一个不一致的话就会产生跨域,而解决跨域的方式有跟多钟:

1. 使用cors 让 后端允许前端进行跨域操作

2. 使用nodejs做一层代理

3. jsonp

4. iframe

5. websocket