`
seyaa
  • 浏览: 55587 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

自己写的Ajax的工具类js

    博客分类:
  • AJAX
阅读更多
   相信Ajax是很多开发人员会使用。自己最开始是使用挺多的后来换使用jQuery了,就很少再使用,不过,最近自己对JavaScript挺上心的,自己也想多研究更深入的知识。就把之前是Ajax从新拿出来练习了下,并进行了下改进。
    代码如下:
   
function Ajax(method,url,flag,content,type,charset){
	this.method = method;
	this.url = url;
	this.flag = flag;
	this.content = content;
	this.type = type;
	this.charset = charset;
	this.header = null;
	this.value = null;
	var xmlHttp = null;
	{
		try{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
	   		if (xmlHttp.overrideMimeType) {
	   		  xmlHttp.overrideMimeType(type);
	   		}
	   	}catch (e){
			// Internet Explorer
		  	try{
		  		for( var i = 5; i; i-- ){
		  		  try{
		  		    	if( i != 2 ){
		  		     	xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
		  		    	}
		  		   	xmlHttp.setRequestHeader("Content-Type",type);
		  		   	xmlHttp.setRequestHeader("Content-Type",charset);
		  		   	break;
		  		  }catch(e){
		  		   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		  		  }
		  		}
		  	}catch(e2){
		     	try{
		     		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		     	}catch(e3){
		        	alert("您的浏览器不支持AJAX!");
		        	xmlHttp =  null;
		     	}
		   	}
		}
	   	this.xmlHttp = xmlHttp;
	}

	this.onReady = function(xmlHttp){
		xmlHttp.onreadystatechange=function(){
			//alert(xmlHttp.readyState);
			if(xmlHttp.readyState==0){
			  	//请求未初始化(在调用 open() 之前)
				//alert("请求未初始化(在调用 open() 之前)");
		    }else if(xmlHttp.readyState==1){
			    //请求已提出(调用 send() 之前)
		    	//alert("请求已提出(调用 send() 之前)");
		    }else if(xmlHttp.readyState==2){
		    	// 请求已发送(这里通常可以从响应得到内容头部)
		    	//alert("请求已发送(这里通常可以从响应得到内容头部)");
		    }else if(xmlHttp.readyState==3){
		    	// 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
		    	//alert("请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)");
		    }else if(xmlHttp.readyState==4){
		    	// 请求已完成(可以访问服务器响应并使用它)
		    	//alert("请求已完成(可以访问服务器响应并使用它)");
		    	if (xmlHttp.status == 200){
		    		alert(xmlHttp.responseText);
		    	} 
		    }
		 }
	}

	//终止当前请求;
	this.sTop =function(){
		xmlHttp.abort();
	}

	//把HTTP所以响应首部作为键/值对返回;
	this.getAllResponseHeaders=function(){
		return xmlHttp.getAllResponseHeaders();
	}

	//返回指定首部的串值;
	this.getResponseHeader=function (header){
		return xmlHttp.getResponseHeader(header);
	}

	//把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
	this.setRequestHeader = function(header,value){
		xmlHttp.setRequestHeader(header,value);
	}

	//处理下默认参数不存在的情况
	this.process = function(){
		if(this.flag==null||this.flag=="undefined"||this.flag==""){
			this.flag = true;
		}
		if(this.content==null||this.content=="undefined"||this.content==""){
			this.content = null;
		}
		if(this.type==null||this.type=="undefined"||this.type==""){
			this.type = "text/xml";
		}
		if(this.charset==null||this.charset=="undifind"||this.charset==""){
			this.charset = "utf-8";
		}
		if(this.method==null||this.method=="undefined"||this.method==""){
			this.method = "POST";
		}
	}
	
	//一个是指示所用方法(通常是GET或POST,PUT很少用)的串,另一个是表示目标资源URL的串,
	//还有一个Boolean值,指示请求是否是异步的。
	this.processRequest = function(){
		this.process();
		if(xmlHttp!=null){
			this.onReady(xmlHttp);
			xmlHttp.open(this.method,this.url,this.flag);
			xmlHttp.send(this.content);
		}else{
			alert("您的浏览器不支持ajax!");
		}
	}
	
	//------------无参数-----------------------
	this.request=function(){
		this.processRequest();
	}
	
	//------------有参数-----------------------
	this.requestWithParams=function(method,url,flag,content,type,charset){
		this.method = method;
		this.url = url;
		this.flag = flag;
		this.content = content;
		this.type = type;
		this.charset = charset;
		this.processRequest();
	}
	
}


   

   
    不再是像以前那样直接的把各个函数(function )写成同一级别的代码段相互调用,而是类似于Java的对象形式;
    有了上面的js,就可以在页面简单的进行调用了;
    首先当然是导入js文件了:
   
 <script type="text/javascript" language="javascript" src="ajax.js"></script>
   

   然后就是来使用了,为了灵活化,我写了两种方式;
   第一种: 
  
<script type="text/javascript">
	var url = "areq.xml";
	var content = "";
	var ajax = new Ajax("POST",url,true,content,'text/xml',"utf-8");
	ajax.request();
</script>
   

   第二种:
  
 <script type="text/javascript">
	var url = "areq.xml";
	var content = "";
	var ajax = new Ajax();
	ajax.requestWithParams("POST",url,true,content,'text/xml',"utf-8");
 </script>
   


   同样也可以从ajax里面取得一些属性自己进行实现,比如:
  
<script type="text/javascript">
	var url = "areq.xml";
	var content = "";
	var ajax = new Ajax("POST",url,true,content,'text/xml',"utf-8");
	ajax.request();

	//var ajax = new Ajax();
	//ajax.requestWithParams("POST",url,true,content,'text/xml',"utf-8");

	alert(ajax.xmlHttp);
	var headers = ajax.xmlHttp.getAllResponseHeaders();
	alert(headers.length);

</script>
   


   因为我不知道自己最终将会做一个什么样的效果,可能会加上请求过程中给用户展示一些页面效果,也可能会屏蔽屏幕。
  
   所以如果你要借鉴上面的js你必须实现你自己的处理,即对js进行完善:
  完善js中的下面代码段:
 
this.onReady = function(xmlHttp){
		xmlHttp.onreadystatechange=function(){
			//alert(xmlHttp.readyState);
			if(xmlHttp.readyState==0){
			  	//请求未初始化(在调用 open() 之前)
				//alert("请求未初始化(在调用 open() 之前)");
		    }else if(xmlHttp.readyState==1){
			    //请求已提出(调用 send() 之前)
		    	//alert("请求已提出(调用 send() 之前)");
		    }else if(xmlHttp.readyState==2){
		    	// 请求已发送(这里通常可以从响应得到内容头部)
		    	//alert("请求已发送(这里通常可以从响应得到内容头部)");
		    }else if(xmlHttp.readyState==3){
		    	// 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
		    	//alert("请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)");
		    }else if(xmlHttp.readyState==4){
		    	// 请求已完成(可以访问服务器响应并使用它)
		    	//alert("请求已完成(可以访问服务器响应并使用它)");
		    	if (xmlHttp.status == 200){
		    		alert(xmlHttp.responseText);
		    	} 
		    }
		 }
	}
  
分享到:
评论

相关推荐

    AJAX工具类,简单实用

    一个简单实用的javascript AJAX 工具类; 简单应用的时候, 你不需导入像prototype,jQuery那样大的类库

    自己封装的一个ajax的小工具

    在压缩包中的`ajax_util.js`文件很可能是这个自定义Ajax工具的源代码,而`readme.txt`文件可能包含了使用说明、示例代码或者关于工具的一些额外信息,例如如何引入、如何调用其方法、注意事项等。 总的来说,这个小...

    javascript后台调用的工具类

    JavaScript 后台调用工具类是一种实用的编程资源,它为开发者提供了在后台环境中使用 JavaScript 进行操作的便利。这个工具类旨在简化JavaScript代码,让开发者能够更高效地进行项目开发,尤其对于不熟悉JavaScript...

    ajax技术工具

    本压缩包包含了Ajax工具的详细说明,可能包括Ajax库的安装指南、示例代码、使用教程以及相关的调试技巧。通过学习和实践,你可以熟练掌握Ajax技术,提升Web应用的交互性和用户体验。 总之,Ajax技术是现代Web开发中...

    ajax js和java封装好的工具

    标题中的“ajax js和java封装好的工具”指的是一个已经整合了AJAX、JavaScript以及Java的工具包,方便开发者在基于Struts2框架的应用中快速实现异步数据交互功能。Struts2是一个流行的Java web框架,它允许开发人员...

    Ajax工具 核心组件

    **Ajax工具核心组件详解** Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,...在实际开发中,选择合适的JavaScript库和Ajax工具,结合良好的编程实践,可以显著提高开发效率和代码质量。

    AjaxTools适用于后台快速开发ajax的小工具

    AjaxTools是一款专为后台开发者设计的便捷工具集合,旨在简化JavaScript中的AJAX(Asynchronous JavaScript and XML)开发,提高开发效率。它包含了一系列实用的函数和类,帮助开发者快速处理异步数据请求,实现网页...

    实体类反射非空赋值,AjaxJson工具类

    在“实体类反射非空赋值,AjaxJson工具类”这个主题中,我们将探讨如何使用反射来安全地为实体类的属性赋值,并结合Ajax与JSON进行数据的转换和交互。 首先,让我们深入了解反射的概念。Java反射API提供了Class类,...

    MicrosoftAjax.js 实现Ajax类库

    总的来说,MicrosoftAjax.js为.NET开发者提供了一个强大且易用的Ajax实现工具,使得在ASP.NET环境中构建动态、交互性强的Web应用变得更加便捷。它集成了完整的生命周期管理、错误处理、状态维护等功能,极大地提高了...

    js版分页类,ajax效果无刷新

    总结来说,这个"js版分页类,ajax效果无刷新"是一个使用JavaScript和AJAX技术实现的轻量级分页解决方案,旨在提高网页加载速度和用户体验。通过学习和理解这个示例,开发者可以更好地掌握动态加载数据和页面局部更新...

    mymvc自己写的ajax框架

    这里我们关注的“mymvc自己写的ajax框架”显然是一款基于MVC(Model-View-Controller)模式构建的个人项目,它允许开发者通过Ajax技术实现页面的异步更新,提高用户体验,同时保持服务器负载均衡。以下将详细介绍...

    自己写的一些东西,包含java工具类,js插件类,小游戏等等。.zip

    在这个名为“自己写的一些东西,包含java工具类,js插件类,小游戏等等”的压缩包文件中,我们可以发现丰富的IT知识资源,主要集中在Java编程语言和JavaScript领域。下面将详细阐述这两个领域的相关知识点。 首先,...

    uni-app 自己封装的utils.js

    uni-app 自己封装的utils.js 常用工具类(封装的ajax,上传,查看文档,富文本解析)

    web ajax 的使用 js封装

    8. "Util.js":这是一个可能包含实用函数的JavaScript文件,可能包括对AJAX操作的封装,是实际开发中常见的工具类库。 综上所述,学习和掌握AJAX的使用以及JavaScript的类库封装,不仅需要理解JavaScript的基本概念...

    ajax与开发工具InterlliJ开发工具

    在调试JavaScript时,可以使用内置的开发者工具或者Internet Explorer的调试器,设置断点进行单步调试。 总的来说,IntelliJ IDEA与AJAX的结合为Web开发提供了高效、智能的环境,通过合理配置和熟练使用其各种功能...

    sqlhelper类以及ajax

    在"AjaxHelper.js"中,可能定义了一个JavaScript函数库,用于实现AJAX请求。这个库可能包括了创建XMLHttpRequest对象,设置HTTP请求方法(GET或POST),处理响应数据,以及触发异步请求的方法。在Web开发中,AJAX常...

    Js和ajax进行交互

    JavaScript(Js)与Ajax(异步JavaScript和XML)的交互是Web开发中的核心技术,它使得网页无需刷新就能实现与服务器的数据交换,极大地提升了用户体验。本文将深入探讨Js与Ajax的交互原理、应用场景以及实现方法。 ...

    已封装Ajax操作类

    在提供的文件列表中,`index.htm`很可能是用来展示如何使用这个Ajax类的示例页面,而`ajaxDom.js`则可能是包含了这个Ajax类的JavaScript文件。通过查看这两个文件,我们可以更具体地了解这个Ajax类的实现细节和使用...

    JRex 爬虫ajax网页 API文档

    一般在浏览器中查看页面代码 是浏览器直接下载到的页面代码 在未经渲染前 对于JS AJAX输出的内容是无法得到的 这样我们得到的页面内容和直接走socket抓取回来无任何区别 还是无法得到需要的页面内容。 JS函数及页面...

    ajax 工具包下载

    **Ajax工具包**是开发人员在构建Web应用程序时用于简化Ajax实现的集合,它们通常包含一系列预先封装好的组件和函数,方便开发者快速构建具有Ajax功能的界面。在本例中提到的是**AjaxControlToolkit**,这是一个非常...

Global site tag (gtag.js) - Google Analytics