认识Ajax的封装
前言相关学习推荐:ajax
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的来凤网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
前面一篇文章讲了ajax的原理,作用和实现。但是都只是实现一个ajax请求响应操作,浏览器和服务器之间请求响应不会只有一次,加入请求响应100次,那么要写100次近似的代码吗?
这篇文章就是解决如何发送多个ajax的问题。如果你对ajax没有了解,我的上一篇文章《认识ajax》用心看完,大约5分钟就可以get到这篇文章内容。
这篇文章其实就是讲了一个函数。接下来一起来看看吧。
封装的思想发送多个请求的操作都是相同的,如果写多个就会有重复的代码。避免代码冗余就可以借助函数的思想,将ajax操作的代码封装到一个函数中,不同的请求函数传递的参数所有不同。如果要多次发送ajax请求的时候,就调用我们封装好的函数就好了。
ajax函数封装的基本实现前面说用函数封装ajax,那么ajax实现的四步放到函数中,然后调用这个函数,因为传递的参数比较多,所以参数用一个对象options来表示。这个对象里面包括请求方式,请求地址,请求发送成功后触发的请求处理函数。
我么看看下面的例子。代码中将ajax操作封装到ajax函数中,调用ajax函数,传入参数,xht下的onload事件触发后,调用了sunccess函数,将相应内容xhr.responsetext打印到控制台中。
function ajax(options) { var xhr = new XMLHttpRequest(); xhr.open(options.type, options.url); xhr.send(); xhr.onload = function () { options.success(xhr.responsetext); } } ajax({ type: 'get', url: 'http://www.example.com', success: function (data) { console.log(data); } })复制代码请求参数的封装
上面代码实现了基本的封装,接下来讲一讲如何对请求参数进行封装,上一篇文章中介绍了post方法和get方法这两种方法发送请求,不同的请求方式请求参数也是放置在不同的位置的,比如get方法拼接在url后,post方法放在send方法里面。我们在ajax方法的实参对象中加一个data属性,data属性值就是请求参数。
在ajax这个函数中利用for-in循环拼接请求参数,将请求参数多余的的&去掉。后然对请求类型做出判断,如果是get请求就把刚刚拼接好的params拼接到url后面;如果是post请求将参数放到send方法中,并使用xhr对象下的setRequestHeader方法设置请求参数格式的类型。
代码如下:
var xhr = new XMLHttpRequest(); // 拼接请求参数的变量 var params = ''; // 循环用户传递进来的对象格式参数 for (var attr in options.data) { // 将参数转换为字符串格式 params += attr + '=' + options.data[attr] + '&'; } // 将参数最后面的&截取掉 // 将截取的结果重新赋值给params变量 params = params.substr(0, params.length - 1); // 判断请求方式 if (options.type == 'get') { options.url = options.url + '?' + params; } // 配置ajax对象 xhr.open(options.type,options.url); // 如果请求方式为post if (options.type == 'post') { // 设置请求参数格式的类型 xhr.setRequestHeader('Content-Type', contentType); // 向服务器端传递请求参数 xhr.send(params); }else { // 发送请求 xhr.send(); } xhr.onload = function () { options.success(xhr.responsetext); } ajax({ type: 'get', url: 'http://www.example.com', data: { name:'linglong', age:20 }, success: function (data) { console.log(data); } })复制代码封装终极版
进过前面两个热身后直接看ajax封装的最后版本。 终极版封装解决了以下几个问题。
服务器返回数据格式的处理浏览器请求参数格式的处理状态码不是200调用失败函数设置默认参数减少冗余这是终极版的代码,代码后面会有针对性的解释。
分析终极版代码:设置默认参数减少冗余在ajax函数中设置defaults参数对象。为什么在调用ajax函数的时候传入了参数还要再在函数里添加默认参数呢,说到底也是为了避免代码冗余,如果创建多个ajax对象的话就会传入可能会相同的参数,我们只在调用的时候传入特定的参数options,让options覆盖默认参数defaults。在函数内部使用defaults就可以完美的解决这个问题。Object.assign(defaults, options)方就是让defaults覆盖options。var defaults = { type: 'get', url: '', data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} }; // 使用options对象中的属性覆盖defaults对象中的属性 Object.assign(defaults, options);复制代码Object.assign方法
补充:Object.assign方法
这里举个代码,够应付这篇文章,具体深入的还是看官方文档
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }复制代码创建ajax对象,拼接请求参数
// 创建ajax对象 var xhr = new XMLHttpRequest(); // 拼接请求参数的变量 var params = ''; // 循环用户传递进来的对象格式参数 for (var attr in defaults.data) { // 将参数转换为字符串格式 params += attr + '=' + defaults.data[attr] + '&'; } // 将参数最后面的&截取掉 // 将截取的结果重新赋值给params变量 params = params.substr(0, params.length - 1);复制代码浏览器请求参数格式的处理判断请求方式是get合适post。如果是get就将请求参数拼接到请求地址后面,再配置ajax对象,用send方法发送请求;如果是post就先配置ajax对象,然后判断请求参数的数据类型,如果是json类型就把数据类型转换成字符串处理,如果是application/x-www-form-urlencoded就直用send方法向服务器传递普通请求参数发送请求。
if (defaults.type == 'get') { defaults.url = defaults.url + '?' + params; } // 配置ajax对象 xhr.open(defaults.type, defaults.url); // 如果请求方式为post if (defaults.type == 'post') { // 用户希望的向服务器端传递的请求参数的类型 var contentType = defaults.header['Content-Type'] // 设置请求参数格式的类型 xhr.setRequestHeader('Content-Type', contentType); // 判断用户希望的请求参数格式的类型 // 如果类型为json if (contentType == 'application/json') { // 向服务器端传递json数据格式的参数 xhr.send(JSON.stringify(defaults.data)) }else { // 向服务器端传递普通类型的请求参数 xhr.send(params); } }else { // 发送请求 xhr.send(); }复制代码服务器返回数据格式的处理
4.当请求发送成功,就会触发onload事件,执行函数。我们要对服务器响应的数据进行格式判断,用getResponseHeader方法获取响应头的数据,Content-Type是响应头的属性名称。如果响应头中包含application/json这个字符,就说明响应的是json对象,但是传输的时候是字符串形式传输,所以用json下的parse方法转字符串为对象。 如果http的状态码是200就说明客户端发来的请求在服务器端得到了正确的处理。调用success函数,否则调用错伏处理函数。
xhr.onload = function () { // xhr.getResponseHeader() // 获取响应头中的数据 var contentType = xhr.getResponseHeader('Content-Type'); // 服务器端返回的数据 var responseText = xhr.responseText; // 如果响应类型中包含applicaition/json if (contentType.includes('application/json')) { // 将json字符串转换为json对象 responseText = JSON.parse(responseText) } // 当http状态码等于200的时候 if (xhr.status == 200) { // 请求成功 调用处理成功情况的函数 defaults.success(responseText, xhr); }else { // 请求失败 调用处理失败情况的函数 defaults.error(responseText, xhr); } } }复制代码
完整的封装代码贴出来,如下所示:
复制代码文章结束
ok,到此封装ajax函数完毕,为什么要封装,减少使用多个ajax请求的时候代码冗余。把代码用函数封装起来使用的时候调用函数就可。封装ajax函数要考虑到以下几点:
请求方式(get),请求参数要与地址拼接后放到open方法中。请求方式post,请求参数类型是json数据类型,要将json转字符串后放到send方法中。对服务器响应处理时获取响应头中的响应数据格式。响应的格式是json对象,处理响应结果要将字符串转json对象。设置ajax函数的默认参数减少代码冗余。其他相关学习推荐:javascript
分享名称:认识Ajax的封装
转载来于:http://scyanting.com/article/cggeoj.html