`
zhouyrt
  • 浏览: 1172640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

基本的封装---Ajax之一

阅读更多

Ajax,或许已经是老掉牙的话题。我学习总结一下。大概会有6篇,从基本的ajax直至高级的ajax应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码,大概三个步骤。

 

1,创建Ajax的核心对象XMLHttpRequest


因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式,有的复杂很多行代码,有的则简洁很少代码。当然复杂的考虑的情形更多一些。
如下几乎将IE中所有的情况都考虑到了

 

function cretaeXHR(){
	try{ return new XMLHttpRequest();}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}
	try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
	try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}
	return null;
}

 

代码较少的采用对象特性判断,

 

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

这里采用精简方式,暂不考虑创建异常的情况。

 

2,发送请求

xhr.open
xhr.send

 

3,处理响应

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
			//callback
		}
	}
}
 

嗯,写到这里没什么特别的,所有的书籍上都是这么几个步骤来着。对于初学者来说,要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码,偶刚学的时候就是这样的。现在想想是对一门语言没有足够的掌握,尤其是闭包。

这里采用 单例模式 封装成一个对象,即只有一个全局的变量将其赋值给Ajax,该对象有一个request方法。
request有两个参数,第一个为请求的url(必要的),字符串类型,第二个opt为配置参数(可选的),对象类型。
结果处理使用内部私有的_onStateChange函数。

完整代码如下

 

/**
 * 执行基本ajax请求,返回XMLHttpRequest
 * Ajax.request(url,{
 * 		async 	是否异步 true(默认)
 * 		method 	请求方式 POST or GET(默认)
 * 		data 	请求参数 (键值对字符串)
 * 		success 请求成功后响应函数,参数为xhr
 * 		failure 请求失败后响应函数,参数为xhr
 * });
 *
 */
var Ajax = 
function(){
	function request(url,opt){
		function fn(){}
		var async   = opt.async !== false,
			method  = opt.method 	|| 'GET',
			data    = opt.data 		|| null,
			success = opt.success 	|| fn,
			failure = opt.failure 	|| fn;
			method  = method.toUpperCase();
		if(method == 'GET' && data){
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;
			data = null;
        }
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
		xhr.onreadystatechange = function(){
			_onStateChange(xhr,success,failure);
		};
		xhr.open(method,url,async);
		if(method == 'POST'){
			xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
		}
		xhr.send(data);
		return xhr;	
	}
	function _onStateChange(xhr,success,failure){
		if(xhr.readyState == 4){
			var s = xhr.status;
			if(s>= 200 && s < 300){
				success(xhr);
			}else{
				failure(xhr);
			}
		}else{}
	}
	return {request:request};	
}();
 

如下请求后台的一个servlet,发送参数name=jack,age=20,默认使用异步,GET方式。

 

Ajax.request('servlet/ServletJSON',{
		data : 'name=jack&age=20',
		success : function(xhr){
			//to do with xhr
		},
		failure : function(xhr){
			//to do with xhr
		}
	}
);
 

以上是一个简单封装,用了不到40行的代码。这里的请求参数data只能是键值字符串,有时候希望可以js对象,以便可以更灵活的传参,下一篇将从改善参数开始。

 

分享到:
评论
4 楼 sghcel 2010-08-18  
不错。。值得一看
3 楼 zhouyrt 2010-08-18  
select*from爱 写道
写的很不错,总结的一目了然,你们这些投新手的人啊,哎。。。。浮躁的JE

呵呵,谢谢select。
习惯了,不用理会。
记录下,印象更深刻。
如过有看源码的提出不同意见的更好了,当然有志同道合的偶更喜欢。
2 楼 nj_first 2010-08-18  
写的是不错,值得一看。
1 楼 select*from爱 2010-08-18  
写的很不错,总结的一目了然,你们这些投新手的人啊,哎。。。。浮躁的JE

相关推荐

    dojo-0.4.3-ajax

    Dojo Toolkit的核心组件之一是`dojo.xhr`模块,它提供了多种与服务器进行异步通信的方法。在"dojo-0.4.3-ajax"中,我们可以找到这些功能的实现,包括基本的xhrGet和xhrPost方法,它们分别用于GET和POST请求。这些...

    JQUERY插件--ajax搜索

    在现代网页开发中,实时、无刷新的用户体验已经成为提升网站质量的关键因素之一。jQuery 插件利用 Ajax(异步 JavaScript 和 XML)技术,可以实现在用户输入时动态搜索并显示结果,极大地提高了用户的交互体验。本篇...

    Jquery 封装下的ajax异步加载

    这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载,通过与Servlet配合,实现了客户端与服务器间JSON数据的交换。理解这些概念和实践,对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...

    Ajax 动态表单验证封装类附示例

    Ajax动态表单验证是Web开发中的一个重要技术,它允许在不刷新整个页面的情况下与服务器进行交互,提升用户体验。本文将详细介绍Ajax动态表单验证...理解并熟练运用Ajax动态表单验证,是每个前端开发者必备的技能之一。

    简单ajax封装小工具

    这个小工具的便利之处在于,它将这些基本操作打包成易于理解和使用的API,让开发者可以快速地进行Ajax交互,而无需关心底层实现的复杂性。 总之,这个"简单ajax封装小工具"是一个实用的JavaScript库,它简化了Ajax...

    ajax:一个ajax封装实现

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...理解并掌握Ajax的工作原理及其封装技巧,对于任何JavaScript开发者来说都是必备的技能之一。

    封装了jQuery的Ajax请求全局配置

    - jQuery库广泛应用于网页前端开发,因其简化的DOM操作、封装的AJAX调用、丰富的插件生态而成为开发者最爱使用的库之一。 2. Ajax请求的基本原理和重要性: - Ajax(Asynchronous JavaScript and XML)是一种在...

    使用Ajax动态加载JSON文件

    在现代Web开发中,动态加载数据是提升用户体验的关键技术之一。"使用Ajax动态加载JSON文件"这个主题就涉及到了两个核心概念:Ajax和JSON。Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下...

    Ajax on Rails (PPT)

    在当今的Web开发领域,Ajax技术已经成为了提升用户体验的重要手段之一。Rails作为一种高效、优雅的Web开发框架,与Ajax技术结合能够创造出功能强大且易于维护的应用程序。本篇文章将基于给定的PPT文档“Ajax on ...

    JQueryAjax的简介

    Ajax 是 Asynchronous JavaScript and XML(异步 JavaScript 和 XML)的缩写,它并不是一种单一的技术,而是一系列用于创建交互式网页应用程序技术的集合。通过 Ajax 技术,开发者可以在不重新加载整个网页的情况下...

    AJAX经典图书

    - **异步通信**:Ajax的核心优势之一在于异步通信,它可以实现在不重新加载整个页面的情况下更新部分内容。 - **同步通信**:虽然较少使用,但在某些情况下同步通信仍然具有一定的应用场景。 ##### 2. AOP横切...

    Ajax常用方法

    该方法是 jQuery 的底层 AJAX 实现,相比 $.get 和 $.post 等高级封装方法更为灵活,适用于复杂场景下的 AJAX 调用。 **2. 语法结构** ```javascript jQuery.ajax([settings]) ``` 其中 `settings` 参数是一个可...

    Struts2+Jquery+Ajax

    Struts2是一个强大的Java web应用程序开发框架,它基于Model-View-Controller(MVC)设计模式,用于构建可维护性高、结构清晰的企业级应用。Struts2提供了丰富的功能,如拦截器、结果类型、国际化支持等,使得开发者...

    AJAX书籍

    AJAX是Web2.0的重要组成部分之一,Web2.0强调用户参与和互动,而AJAX技术则提供了实现这一目标的技术基础。通过AJAX,网页可以像桌面应用一样实时响应用户的操作,提高了用户的参与度和满意度。 #### 五、学习AJAX...

    Ajax基础之原生js封装

    在JavaScript中,Ajax(异步JavaScript和XML)技术允许我们实现页面无刷新的数据交互,提高用户体验。本篇文章将探讨如何使用原生JavaScript封装一个...但这个基本的封装示例提供了一个很好的起点,便于理解和扩展。

    Ajax技术介绍及应用.pdf

    相比之下,Ajax通过异步数据交换,能够在后台与服务器通信,仅更新需要改变的部分,实现了更加流畅的应用过程。 #### Ajax的Demo体验及原理 Ajax的核心在于使用`XMLHttpRequest`对象进行异步请求和处理数据。当...

    ASP.NET-AJAX总结.txt

    - **定义**: `Page`对象是ASP.NET中的核心对象之一,代表一个ASP.NET页面。每个页面都是`System.Web.UI.Page`类的实例。 - **生命周期**: 包括初始化、加载、渲染等多个阶段。 - **属性和方法**: - `IsPostBack`: ...

    head first ajax 源码

    可以使用库如jQuery或axios来封装AJAX操作,以解决跨浏览器问题。 **6. 使用框架和库** 为了简化AJAX的使用,有许多JavaScript库和框架提供了高级API,如jQuery的`$.ajax()`,AngularJS的$http服务,以及React的...

    Ajax离线开发文档

    离线开发文档通常会包含Ajax的基本概念、工作原理、API使用方法以及常见问题的解决方案,帮助开发者在没有网络连接的情况下也能学习和参考。 **一、Ajax基础** 1. **工作原理**:Ajax的核心是XMLHttpRequest对象,...

    Pro Ajax and Java Frameworks.pdf

    5. **安全性和跨域问题**:Ajax应用的安全性也是本书关注的重点之一。作者讲解了如何防范常见的安全威胁,如XSS(Cross-Site Scripting)和CSRF(Cross-Site Request Forgery)攻击,并讨论了处理跨域资源共享(CORS...

Global site tag (gtag.js) - Google Analytics