ajax封装
ajax
是2005年被Jesse James Garrett提出的新术语,它是一种web数据交互的方式,我们也叫它异步JavaScript和XML,可以快速的将数据呈现在用户面前,而不需要整体页面进行刷新(★)。接下来就是简单的ajax封装:
ajax运行原理图
ajax
1.ajax底层运行原理就是通过
JavaScript
来操作。ajax他并不是一门编程语言,而是为了更好与web端产生交互的技术。
2.ajax通过httpRequest
来向服务器端发送请求,通过httpRequest
, JavaScript 可在不重载页面的情况与 Web 服务器交换数据,也就是说在不需要刷新的情况下,就可以产生局部刷新的效果。服务器进行数据处理之后,通过XML
返回给ajax需要的数据。
3.通过HTML,和css进行页面展示数据,显示给用户界面。
function ajax(data){ let xhr = null; let params = formsData(data.data); //创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //链接 if (data.type === 'GET') { //open三个参数,请求方式,请求数据,是否同步异步 xhr.open(data.type,data.url + "?" + params,data.async); xhr.send(null) //发送数据 }else if(data.type === 'POST'){ xhr.open(data.type,data.url,data.async); //设置请求头(POST) xhr.setRequestHeader("Authori-zation","Bearer " + '需要拼接的token' ); xhr.send(params) //发送数据 } xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { data.success(xhr.responseText); } } //循环post传输数据分解成formData格式 function formsData(data){ let arr = []; for (const i in data) { arr.push(i + '=' + data[i]) } return arr.join('&'); }}
通过上面的ajax封装,我们进行简单的调用
ajax({ type:'GET', //请求方式 url:'url' , //路径 async:true, //同步异步 data:null, //传输数据 success:function(data){ console.log(data); }})
以上就是对ajax的简单封装!
作者:whhh
链接:https://www.jianshu.com/p/4edaa9da11c3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。