手写js实现ajax功能

Posted 2021-06-16 aginx

1.实现aginx

<script type="text/javascript">//通过createXHR()函数创建一个XHR对象：function createXHR() { if (window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari return new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE6 及以下 var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP']; for (var i = 0,len = versions.length; i<len; i++) { try { return new ActiveXObject(version[i]); break; } catch (e) { //跳过 }  } } else { throw new Error('浏览器不支持XHR对象！'); }}//封装ajax，参数为一个对象function ajax(obj) { var xhr = createXHR(); //创建XHR对象 //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题 obj.url = obj.url + '?rand=' + Math.random(); obj.data = params(obj.data); //通过params()将名值对转换成字符串 //若是GET请求，则将数据加到url后面 if (obj.method === 'get') { obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data; } if (obj.async === true) { //true表示异步，false表示同步 //使用异步调用的时候，需要触发readystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { //判断对象的状态是否交互完成 callback(); //回调 } }; } //在使用XHR对象时，必须先调用open()方法， //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。 xhr.open(obj.method, obj.url, obj.async); if (obj.method === 'post') { //post方式需要自己设置http的请求头，来模仿表单提交。 //放在open方法之后，send方法之前。 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); //post方式将数据放在send()方法里 } else { xhr.send(null); //get方式则填null } if (obj.async === false) { //同步 callback(); } function callback() { if (xhr.status == 200) { //判断http的交互是否成功，200表示成功 obj.success(xhr.responseText); //回调传递参数 } else { alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText); }  }}//名值对转换为字符串function params(data) { var arr = []; for (var i in data) { //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理 arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join('&');}</script>

2.封装get请求

const httpGet = (url, callback, err = console.error) => { let request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { request = new ActiveXObject("Microsoft.XMLHTTP"); } request.open("GET", url, true); request.onreadystatechange = () => { console.log(request.readyState); if (request.readyState == 4) { if (request.status == 200) { callback(request.responseText); } else { err(request.status); } } }; request.onerror = () => err(request); request.send();};

3.封装post请求

const httpPost = (url, data, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('POST', url, true); request.setRequestHeader('Content-type', 'application/json; charset=utf-8'); request.onload = () => callback(request.responseText); request.onerror = () => err(request); request.send(data);};