[JavaScript知识库]原生Ajax

如何创建一个原生Ajax

1. 创建一个XMLHttpRequest实例

var xhr=new XMLHttpRequest();

2. xml的open方法（method:请求方式，url:请求地址，async:同步或异步）

xhr.open('GET',url,false);

3. xml的监听

 xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }

4. 发送请求

整体就是这个样子

var Ajax = {
    get: function(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

HTTP常见状态码

200：一切正常。实体主体中的文档（若存在的话）是某资源的表示。
400：客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。
500：服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
301：当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。
404：当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。
409：当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。

100-199代表通知
200-299表明成功。
300-399表示重定向。
400-499表示客户端错误。
500-599表示服务端错误。

同源与跨域

同源指的是“三个相同”

• 协议相同
• 域名相同
• 端口相同

同源策略：同协议、同IP、同端口被称为同一个域，本域的脚本只能读取本域的资源，无法访问其他域的资源。

同源策略的目的就是为了保护用户的信息，防止恶意的网站窃取数据。
如果非同源那么就会导致cookie、localstorage无法读取，DOM无法获得，Ajax请求被限制，这个时候就需要用到跨域了。

跨域就是指浏览器不允许当前页面的所在源，去请求另一个所在源的数据，它是浏览器的同源策略引起的，协议/域名和端口号 有任何一个不一样，就会出现跨域
url : https://www.baidu.com 协议 (https / http) 域名 (www.baidu.com) 端口号 (8080)

出现的时机：浏览器打开的url 和 请求的url，不一样

解决的办法：

1. cros 后台来写的（最常用的） 设置响应头 res.setHeader(‘Access-Control-Allow-Origin’,’*’)

2. jsonp 在页面添加 script src=‘接口的地址?callback=自定义回调函数名字’ ，后端会返回回调函数执行，并包裹参数callback(data)

3. 中转或者叫代理服务器