/* Ajax 的有优缺点
优点 1.浏览器默认支持(一般浏览器都是支持JavaScript的) 2.提高用户体验(不需要刷新页面, 局部刷新) 3.提高页面性能 缺点 1.破坏了浏览器的前进和后退功能, （Ajax不会改变网页URL，因此不会在浏览器记录前后页面） 2.对搜索引擎的支持较弱（搜索引擎无法监测到JS引起的数据变化） Ajax的使用 Ajax的基本流程: 创建XHR 对象 => 发送数据 =>接收数据 xhr的基本使用 在使用xhr 之前, 我们需要创建一个xhr 的实例对象 let xhr = new XMLHttpRequest() 然后再调用xhr 对象上的open() 方法, 表示创建一个请求 open() 方法接收三个参数 第一个参数: 请求的类型(例如get / post) 第二个参数: 请求的URL 第三个参数:是否异步发送请求 (默认为true) // 创建一个Ajax 请求 xhr.open('get', 'example.php', 'true') 光调用管理open() 方法还是不够的, 它只是创建个了一个请求, 但还是没有发送请求, 因此我们 还要调用xhr 对象上的另一个方法. 即 send() 方法, 表示将请求发送给 目标URL send() 方法接收一个参数 第一个参数: 作为请求主体发送的数据 (例如post携带请求的数据) xhr.send() 请求发送出去后 , 客户端需要接收服务器端回来的数据, xhr对象中的一些属性 , 他们存储着服务器返回来的一些数据信息 属性名 含义 responseText 服务端返回的文本信息 responseXML 服务端返回的XML DOM文档 status HTTP状态码 statusText HTTP状态码说明 readyState xhr对象的请求响应阶段 既然我们要获取服务器端返回的数据,我们就要知道服务端是怎么样返回数据的, 这就可以通过上面表格中的 readyState 属性来判断了 readyState 属性一共有5个值，分别表示不同的请求响应阶段： 0： 还未创建请求，即未调用 open() 方法 1： 已调用 open() 方法，但未发送 send() 方法 2： 已调用 send() 方法，但未接收到响应 3： 已接收到部分响应 4： 已接收到全部的响应 */ // 利用promiss 封装$ajax方法 let $ = { createXHR: function () { if (window.XMLHttpRequest) { return new XMLHttpRequest() } else { return new ActiveXObject() } }, ajax: function (params) { // 初始化参数 let type = params.type? params.type.toLowerCase() : 'get' let isAsync = params.isAsync ? params.isAsync : 'true' let url = params.url let data = params.data ? params.data : {} let dataType = params.dataType.toLowerCase() // 用我们封装的方法动态生成XHR对象 let xhr = this.createXHR() let str = '' // 拼接字符串 Object.keys(data).forEach(key => str += `${key}={data[key]}&`) str = str.slice(0, -1) //如果事get 请求就把携带参数 拼接到 url 后面 if(type === 'get') url + '?${str}' // 返回promise对象, 便于外部then和catch函数调用 return new Promiss((resolve,reject) =>{ // 创建请求 xhr.open(type, url, isAsync) if(type === 'post') { xhr.setRequsetHeader('Content-Type','application/x-www-form-rulencoded') xhr.send(str) } else { xhr.send() } xhr.onreadystatechange = function() { if(xhr.readyState === 4) { if(xhr.status >=200 && xhr.status <300 || xhr.status == 304) { let res = dataType == 'json'? JSON.parse(xhr.responseText) :xhr.responseText resolve(res) // 请求成功 , 返回数据 } else { rejext(xhr.status) // 请求失败, 返回状态码 } } } }) } } // 该方法既可以发送get请求又可以发送post请求 $.ajax({ url: 'example.php', // 请求的URL type: 'get', //请求类型,若为post,则表示发送post请求 data: {query: 4, em: 0}, // 请求携带数据 dataType: 'json', // 接收的数据类型 isAsync: true // 是否异步请求 }) .then(data => { console.log(`请求成功，数据为${data}`) }) .catch(err => { console.log(`请求失败，状态为${err}`) })