原生JavaScript手写Ajax
1 <script> 2 // 封装通用的xhr对象，兼容各个版本 3 function creatXHR() { 4 // 判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7,firefox, opera等 5 if (typeof XMLHttpRequest != "undefined") { 6 return new XMLHttpRequest(); 7 } 8 else if (typeof ActiveXObject != "undefined") { 9 // 将所有可能出现的ActiveXObject版本放在一个数组中 10 var xhrArr = [ 11 'Microsoft.XMLHTTP', 12 'MSXML2.XMLHTTP.6.0', 13 'MSXML2.XMLHTTP.5.0', 14 'MSXML2.XMLHTTP.4.0', 15 'MSXML2.XMLHTTP.3.0', 16 'MSXML2.XMLHTTP.2.0' 17 ]; 18 // 遍历创建XMLHttpRequest对象 19 var xhr; 20 for (let i = 0; i < array.length; i++) { 21 try { 22 // 创建XMLHrrpRequest对象 23 xhr = new ActiveXObject(xhrArr[i]); 24 break; 25 } catch (error) { 26 27 } 28 29 } 30 return xhr; 31 } 32 else{ 33 throw new Error('不支持XMLHttpRequest对象'); 34 } 35 } 36 // 创建xhr 37 var xhr = creatXHR(); 38 // 存储获取到的数据 39 var data; 40 41 // 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发 42 xhr.onreadystatechange = function (/* callback */) { 43 // 异步调用成功，响应内容解析完成，可以在客户端调用 44 if (xhr.readyState == 4) { 45 // 200 OK，304 读取缓存 46 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { 47 // 获取服务器返回的数据 48 // 数据以字符串类型存放在 xhr.responseText 49 // json序列化解析xhr.responseText 50 // 将ajax获取到的数据传递出去 51 data = JSON.parse(xhr.responseText); 52 // 或者在参数中传入callback，在此处执行回调函数 53 // callback && callback(); 54 } 55 } 56 }; 57 58 59 // 创建请求，这里只是创建，并不发送 60 xhr.open("get", "./xxx.json", true); 61 62 // 发送请求 63 xhr.send(null); 64 65 /* 使用post方法，传参方式 66 // 创建请求，这里只是创建，并不发送 67 xhr.open("post", "./xxx.json", true); 68 // 设置http头部信息 69 xhr.setRequestHeader("Content-type", "application/x-www-form-urlcoded"); 70 xhr.send({param1:'strrr', param2:789}); 71 */ 72 </script>
想不起来Ajax实现，就来看看。
