动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

30天自动登录
微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

浅谈Ajax封装

05-08 17:01 384浏览
举报 T字号
  • 大字
  • 中字
  • 小字

Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。但在使用Ajax技术时,发送多个请求的操作都是相同的,如果写多个就会有重复的代码。避免代码冗余就可以借助函数的思想,将ajax操作的代码封装到一个函数中,不同的请求函数传递的参数所有不同。如果要多次发送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为什么要封装呢?除了能够减少使用多个ajax请求的时候代码冗余之外,我们把代码用函数封装起来使用的时候调用函数就可,极大地提高了开发效率。当然,这也只是Ajax封装的一种方法,想要学习更多的方法可以在动力节点在线网站的视频课程中学习。

0人推荐
共同学习,写下你的评论
0条评论
代码小兵279
程序员代码小兵279

75篇文章贡献270037字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 04-06 20:49

发评论

举报

0/150

取消