## :-: 原生 Ajax请求 ``` // Ajax function Ajax(url, type, data, callback) { var xhr = null; // 兼容IE浏览器、 if (window.XMLHttpRequest) { // 主流浏览器方法、Google Opera xhr = new XMLHttpRequest(); } else { // IE方法 xhr = new ActiveXObject('Microsoft.XMLHttp') } // 给xhr绑定状态事件、onreadystatechange xhr.onreadystatechange = function() { // 请求过程中的进度 1 2 3 4 (4为完成) console.log(xhr.readyState); if (xhr.readyState == 4) { // 返回的状态吗 200 302 404 503 if (xhr.status == 200) { console.log(xhr.responseText); typeof callback === 'function' && callback(xhr.responseText); } } } // 判断请求类型 if (type == 'POST') { // 当post类型时需要在 .send 中传递数据、 xhr.send(data); // 设置请求协议头、(默认类型) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 1.请求类型 2.url true 是否异步加载、 xhr.open(type, url, true); } else { // 1.请求类型 2.url true 是否异步加载、 xhr.open(type, url + '?' + data, true); } } // 回调函数、 function callback(data) { console.log(data); } ``` ## :-: 笔记 ``` 1. ajax XMLHTTPRequest 2. 网络的基础知识 （1） 同源策略 （协议 ， 域名 ， 端口号三者均相同 ---》 同源） 浏览器提出的 浏览器再判断同源的时候是在数据返回的时候判断的 Access-Control-Allow-Origin: * ===> CORS跨域 （2） 请求方式 GET POST HEAD PUT DELETE （3） 状态码 2xx ===> 服务器成功返回数据 3xx 重定向 4xx 客户端错误 400 查看请求参数 大小写 数据格式等 5xx 服务器错误 找服务器端工作人员 （4） HTTP 和 HTTPS 区别 ---》 安全性 RSA （5） 跨域 客户端与服务器端的跨域 1. JSONP 原理 ： src属性不受同源策略的限制 适合所有浏览器的 大多使用get请求方式 jquery提出 搜索功能经常用到jsonp 2. document.domain 基础域名相同 3. 服务器代理中转 ===》 最常见的方式 公司里面最常用 4. CORS 跨域 服务器端设置响应头 w3c新标准里面出现的 IE10之前不兼容 ------------------ 6. iframe ---》 页面与页面之间的 父页面请求子页面的方式： window.name 需要中间层 子页面请求父页面的方式： location.hash postMessage ====> h5新增的 第一个参数 是传递的数据 第二个参数是往哪个页面传递数据 哪个页面的域 ``` > ## :-: [HTTP 状态消息 - 状态码](http://www.w3school.com.cn/tags/html_ref_httpmessages.asp)