手写js实现ajax功能
1.实现aginx
<script type="text/javascript">//通过createXHR()函数创建一个XHR对象:function createXHR() {if (window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safarireturn 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);};
