Ajax

1 简介

作用：获取服务器数据，对页面进行局部异步刷新
Asynchronous Javascript And XML，使用JS代码获取服务器数据

2 GET & POST

2.1 get 和 post 的区别

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中。
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

2.2 get请求

将查询的字符串参数放到 URL 末尾发送

    // 1. 创建XMLHttpRequest对象
    var xhr = null;       //兼容IE6及以下
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {//IE6浏览器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    // 2. 使用XHR对象,第三个参数为true时，异步操作
    xhr.open("get", "example.php ? name1 = value1 & name2 = value2", true);
    // 3. 发送参数
    xhr.send(null);
    // 4. 设置回调函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var result = xhr.responseText / xhr.responseXML;    //得到数据
            // 执行的操作
            ...
            }
        }
    };

2.3 post请求

将查询的字符串参数放在请求体中

// 1. 创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
} else {
   //IE6浏览器
   xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 2. 使用XHR对象,第三个参数为true时，异步操作
xhr.open("post", "example.php", true);
// 3. 发送参数
//对于post请求来说的话，我们的参数应该放到请求体中 
//设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
var param = "name1=" + value;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(param);
// 4. 设置回调函数
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            var result = xhr.responseText / xhr.responseXML;    //得到数据
            // 执行的操作
            ...
        }
    }
};

2.4 readyState状态值：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

2.5 setRequestHeader( content-type，属性值 )

常用属性值	传输的类型	用途
text/plain	纯文本	用不着
application/x-www-form-urlencoded	url编码方式&&	简单数据
multipart/form-data	定界符分割各个数据(文件上传)	上传文件

3 Ajax封装

/*
* ajax封装
*
* 封装思路
* 1. 将get & post方法写一起
* 2. 把需要的变化的数据作为参数
* 3. 对比两者不同之处，进行条件判断
* 4. 增强健壮性
* 1）encodeURIComponent
*/
function ajax(options) { 
// 文件地址，数据（json），post/get，成功回调，失败回调
// url, data, type, success, err
    options = options || {}
    options.data = options.data || {};
    options.type = options.type || 'get';
    options.dataType = options.dataType || 'text';

    let xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObeject('Microsoft.XMLHttp');
    }

    // data数据拼成字符串
    let dataArr = [];
    for (let name in options.data) {
        dataArr.push(`${encodeURIComponent(name)}=${encodeURIComponent(options.data[name])}`);
    }
    let dataStr = dataArr.join('&');

    // get
    if (options.type == 'get' || options.type == 'GET') {
        xhr.open(options.type, options.url + '?' + dataStr, true);
        xhr.send(null);
    } else {
        // post
        xhr.open(options.type, options.url, true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(dataStr);
    }

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                let data = xhr.responseText;
                // 成功
                switch (options.dataType) {
                    case 'json':
                        if (window.JSON && JSON.parse) {
                            data = JSON.parse(data);
                        } else {
                            data = eval('(' + str + ')');
                        }
                        break;
                    case 'xml':
                        data = xhr.responseXML;
                        break;
                }
                options.success && options.success(data);
            } else {
                // 错误
		        options.error && options.error();
            }
        }
    };
}

使用

ajax({
    url: '',
    type: GET,
    data: {
        name1: value1;
    },
    dataType: "", //json text xml
    success(result) {
        ...
    }, 
    error(err) {
        ...
    }
});

4 跨域

4.1 概念

跨域是为了获取别人服务器的数据，Ajax只能访问自己服务器的数据（同源的数据）
浏览器有一个安全机制为同源策略
同源的三个相同：协议相同、域名相同、端口相同
跨域的本质就是服务器返回了个方法调用，这个方法是我们自己先定义好的，只要获取方法调用里的参数

4.2 方式

1. jsonp

2. ajax cors

3. WebSocket

4. formData