封装原生Ajax
我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。于是自己造轮子，下面封装了原生JS ajax 。你可以直接复制拿过来用。
function ajax(obj) { // 对实参处理 obj = obj || {}; // 定义局部变量 var xmlhttp, type, url, async, dataType, data; // 默认type为GET type = obj.type || 'GET'; type = trim(type).toUpperCase(); // 接口 url = obj.url url = trim(url); // 默认为异步请求 async = obj.async || true; // 设置跨域 dataType = obj.dataType || 'HTML'; dataType = trim(dataType).toUpperCase(); // 发送参数 data = obj.data || {}; // 删除左右空格 function trim(str) { return str.replace(/^\s+|\s+$/g, ""); }; // 定义格式化参数函数 var formatParams = function () { if (typeof (data) == "object") { var str = ""; for (var pro in data) { str += pro + "=" + data[pro] + "&"; } data = str.substr(0, str.length - 1); } if (type == 'GET' || dataType == 'JSONP') { if (url.lastIndexOf('?') == -1) { url += '?' + data; } else { url += '&' + data; } } } // 第一步，创建xmlhttprequest对象用来和服务器交换数据。 if (window.XMLHttpRequest) { //Chrome || Firefox xmlhttp = new XMLHttpRequest(); } else { //IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 跨域请求 if (dataType == 'JSONP') { if (typeof (obj.beforeSend) == 'function') obj.beforeSend(xmlhttp); var callbackName = ('jsonp_' + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName('head')[0]; data.callback = callbackName; var ele = document.createElement('script'); ele.type = "text/javascript"; ele.onerror = function () { console.log('failed'); obj.error && obj.error("failed"); }; oHead.appendChild(ele); window[callbackName] = function (json) { oHead.removeChild(ele); window[callbackName] = null; obj.success && obj.success(json); }; formatParams(); ele.src = url; return; } else { formatParams(); // 第二步，打开链接 xmlhttp.open(type, url, async); // 设置响应头 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); if (typeof (obj.beforeSend) == 'function') obj.beforeSend(xmlhttp); // 第三步，发送请求 xmlhttp.send(data); // 第四步，响应处理 xmlhttp.onreadystatechange = function () { if (xmlhttp.status != 200) { console.log(xmlhttp.status + 'failed'); obj.error && obj.error(xmlhttp.status + 'failed'); return; } if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (dataType == 'JSON') { try { res = JSON.parse(xmlhttp.responseText); } catch (e) { console.log('json格式错误'); obj.error('json格式错误'); } } else if (dataType == 'XML') { res = xmlhttp.responseXML; } else { res = xmlhttp.responseText; } obj.success && obj.success(res); } } } }
上面是封装Ajax的js代码。 下面是一个示例代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>封装原生js_Ajax</title> <style> #btn{ font-size:20px; padding:10px; } </style> </head> <body> <button id="btn" onclick="myFunction()">请求数据</button> </body> <script src="./ajax.js"></script> <script> var btn=document.querySelector("#btn"); var url="https://free-api.heweather.com/v5/weather?city=qingdao&key=18c650b4fad546ac9d384e6858526267";//示例网址 var url1="http://192.168.2.62/test5.php/";//测试网址 function myFunction(){ ajax({ url: url, type: "get", dataType: "json", success: function(data) { var list = data; console.log(list);}, error: function(err) { alert('请求数据失败'); } }) } </script> </html>
