ajax调用框架

最新推荐文章于 2021-08-06 02:27:34 发布
最新推荐文章于 2021-08-06 02:27:34 发布
阅读量783 收藏 3
点赞数
分类专栏： Java Web 文章标签： ajax function xmlhttprequest callback url null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolong8/article/details/7422088
版权

jian_ajax.js: 

/**
 * ============================================================ 
 * A J A X
 * ============================================================ 
 * DESCRIPTION: ajax调用框架，供页面简单快速调用来实现ajax通信
 * @AUTHOR: xiaolong8
 * @VERSION: 1.0.0
 * @SEE:   
 * @CREATION DATE: 2012‎年‎3‎月‎24‎日，‏‎9:59:30
 * @DATE: 2012-3-25 16:57:44
 * COPYRIGHT: 失业中
 ***************************************************************/
 
/** 
 * 使用方法：
 * 一、将js文件引入需使用ajax的HTML文档，在HTML文档添加：<script type="text/javascript" src="jian_ajax.js"></script>
 * 二、调用方法。
 * 1) GET方式：
 * @example   ajax.get("servlet/AjaxServlet", {
 * 							item0: document.getElementById("item0").value,
 * 							item1: document.getElementById("item1").value
 * 						}, {
 * 							sucess: function(responseXML, responseText){
 * 										alert(responseText);
 * 									},
 *							fail: function(responseXML, responseText){
 *										alert("fail");
 *									}
 *						});
 *
 * 2) POST方式：
 * @example   1) URL编码形式提交。
 * 				 ajax.post("servlet/AjaxServlet", 
 * 							ajax.CONTENT_TYPE_URLENCODED,  {
 * 								item0: document.getElementById("item0").value,
 * 								item1: document.getElementById("item1").value
 *	 						}, {
 * 								sucess: function(responseXML, responseText){
 * 											alert(responseText);
 * 										},
 *								fail: function(responseXML, responseText){
 *											alert("fail");
 *										}
 *							});
 *			  2) 大块二进制数据形式提交,如文件上传。
 *				ajax.post("servlet/AjaxServlet", 
 * 							ajax.CONTENT_TYPE_DATA, 
 * 							"send content.", {
 * 								sucess: function(responseXML, responseText){
 * 											alert(responseText);
 * 										},
 *								fail: function(responseXML, responseText){
 *											alert("fail");
 *										}
 *							});
 */
 

	/* 全局变量ajax */
	var ajax = {
			/** 常量: POST提交请求报文头方式 */
			/* application/x-www-form-urlencoded: 表示客户端提交给服务器文本内容的编码方式是URL编码 */
			CONTENT_TYPE_URLENCODED: "application/x-www-form-urlencoded", 
			/* multipart/form-data: 表示客户端提交给服务器的为数据，一般都是大块二进制数据，如文件。 */
			CONTENT_TYPE_DATA: "multipart/form-data",
			
			/* XMLHttpRequest对象 */
			xhr: null,
			
			/* 请求回应后的回调函数对象
			 * 约定格式: 
			 * {
			 *  	sucess: function(responseXML, responseText){
			 *  				...//请求成功执行的操作
			 *				},
			 *		fail: function(responseXML, responseText){
			 *  				...//请求失败执行的操作
			 *  			}
			 * } 
			 */
			callback: null,

			/**
			 * 创建XMLHttpRequest对象
			 * @param 
			 * @return 
			 * @example   
			 */
			createXhr: function(){
					if(ajax.xhr == null){
						if(window.XMLHttpRequest){
							ajax.xhr = new XMLHttpRequest();
						} else if(window.ActiveXObject){
							try {
								ajax.xhr = new ActiveXObject("MSXML2.XMLHTTP");
							} catch(e){
								try {
									ajax.xhr = new ActiveXObject("Microsoft.XMLHTTP");
								} catch(e_){}
							}
						}
					}
				},
				
			/**
			 * 编码参数。将对象编码成url形式
			 * @param   params   请求附带参数对象。
			 * 				约定格式：普通非嵌套对象，即每个属性名 对应 一个非对象的属性值，
			 * 				如{username: "xiaolong", password: "xxxxxx"}
			 * @return   url形式的字符串，如：username=xiaolong&password=xxxxxx
			 * @example   var urlSuffix = encodeParams({username: "xiaolong", password: "xxxxxx"});
			 */
			 encodeParams: function(params){
			 	var s = "";
			 	for (var i in params) {
			 		s += "&" + i + "=" +params[i];
			 	}
			 	s = s.substr(1);	
			 	
			 	return s;
			 },
			 
			/**
			 * 以get方式获取数据
			 * @param   url   请求的地址
			 * @param	params   请求附带参数对象，
			 * 				约定格式：普通非嵌套对象，即每个属性名 对应 一个非对象的属性值，
			 * 				如{username: "xiaolong", password: "xxxxxx"}
			 * @param	callback   请求回应后的回调函数对象
			 * 				约定格式: 
			 * 				{
			 *  				sucess: function(responseXML, responseText){
			 *  					...//请求成功执行的操作
			 *					},
			 *					fail: function(responseXML, responseText){
			 *  					...//请求失败执行的操作
			 *  				}
			 * 				} 
			 * @return 
			 * @example   ajax.get("servlet/AjaxServlet", {
			 * 							item0: document.getElementById("item0").value,
			 * 							item1: document.getElementById("item1").value
			 * 						}, {
			 * 							sucess: function(responseXML, responseText){
			 * 										alert(responseText);
			 * 									},
			 *							fail: function(responseXML, responseText){
			 *										alert("fail");
			 *									}
			 *						});
			 */
			 get: function(url, params, callback){
					ajax.callback = callback;
			 		if (!ajax.xhr) {
			 			ajax.createXhr();
			 		}
			 		if (ajax.xhr) {
				 		ajax.xhr.open("GET", encodeURI(url + "?" + ajax.encodeParams(params)), true);
				 		ajax.xhr.onreadystatechange = ajax.handleStateChange;
				 		ajax.xhr.send(null);
				 	}
			 },
			 
			/**
			 * 以post方式获取数据
			 * @param   url   请求的地址
			 * @param   enctype   POST提交请求报文头编码类型
			 * @param	content   发送内容
			 * @param	callback   请求回应后的回调函数对象
			 * 				约定格式: 
			 * 				{
			 *  				sucess: function(responseXML, responseText){
			 *  					...//请求成功执行的操作
			 *					},
			 *					fail: function(responseXML, responseText){
			 *  					...//请求失败执行的操作
			 *  				}
			 * 				} 
			 * @return 
			 * @example   1) ajax.post("servlet/AjaxServlet", 
			 * 							ajax.CONTENT_TYPE_URLENCODED,  {
			 * 								item0: document.getElementById("item0").value,
			 * 								item1: document.getElementById("item1").value
			 *	 						}, {
			 * 								sucess: function(responseXML, responseText){
			 * 											alert(responseText);
			 * 										},
			 *								fail: function(responseXML, responseText){
			 *											alert("fail");
			 *										}
			 *							});
			 *			  2) ajax.post("servlet/AjaxServlet", 
			 * 							ajax.CONTENT_TYPE_DATA, 
			 * 							"send content.", {
			 * 								sucess: function(responseXML, responseText){
			 * 											alert(responseText);
			 * 										},
			 *								fail: function(responseXML, responseText){
			 *											alert("fail");
			 *										}
			 *							});
			 */
			 post: function(url, enctype, content, callback){
			 	ajax.callback = callback;
			 	if(!ajax.xhr){
			 		ajax.createXhr();
			 	}
			 	if(ajax.xhr){
			 		ajax.xhr.open("POST", encodeURI(url), true);
			 		ajax.xhr.onreadystatechange = ajax.handleStateChange;
			 		if(ajax.CONTENT_TYPE_URLENCODED == enctype){
				 		ajax.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				 		ajax.xhr.send(encodeURI(ajax.encodeParams(content)));
			 		} else if(ajax.CONTENT_TYPE_DATA == enctype){
				 		ajax.xhr.setRequestHeader("Content-Type", "multipart/form-data");
				 		ajax.xhr.send(content);
			 		}
			 	}
			 },
			 
			/**
			 * 处理readyState属性改变时的事件
			 * @param   
			 * @return 
			 * @example
			 */
			 handleStateChange: function(){
			 	if(ajax.xhr.readyState == 4){// 数据接收完毕,此时可以通过通过responseXML和responseText获取完整的回应数据
			 		if(ajax.xhr.status == 200){// 200: OK
			 			ajax.callback.sucess(ajax.xhr.responseXML, ajax.xhr.responseText);
			 		} else{
			 			ajax.callback.fail(ajax.xhr.responseXML, ajax.xhr.responseText);
			 		}
			 	}
			}
		};
    
//		var ajaxTools = function(){
//			this.xmlHttpReq = null;
//			this.callback = null;
//			
//			this.createXmlRequest = function(){
//				if(window.XMLHttpRequest){
//					this.xmlHttpReq = new XMLHttpRequest();
//				} else if(window.ActiveXObject){
//					try {
//						this.xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
//					} catch(e){
//						try {
//							this.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
//						} catch(e_){}
//					}
//				}
//			};
//
//			this.get = function(url, callbackFunc) {
//				this.callback = callbackFunc;
//				if(!this.xmlHttpReq){
//					this.createXmlRequest();
//				}
//				if(this.xmlHttpReq){
//					this.xmlHttpReq.open("GET", url, true);
//					this.xmlHttpReq.onreadystatechange = this.processResponse;
//					this.xmlHttpReq.send(null);
//				}
//			};
//
//			this.processResponse = function (){
//				if(this.readyState == 4){// 数据接收完毕,此时可以通过通过responseXML和responseText获取完整的回应数据
//					if(this.status == 200){// 200: OK
//						//var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
//						parent.callback.sucess(this.responseXML, this.responseText);
//					} else{
//						parent.callback.fail(this.responseXML, this.responseText);
//					}
//				}
//			};
//			return this;
//		}();

PS:

POST提交请求报文头编码类型，表单enctype属性：
1） application/x-www-form-urlencoded： 默认值，只要是能输出网页的服务器端环境都可以
2） multipart/form-data： 上传二进制数据，只有使用multipart/form-data ，才能完整的传递文件数据，进行上传操作

xiaolong8
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用ajax调用方法,web前端之4种常用的Ajax请求方式
weixin_39553753的博客
08-05 690
在jQuery中，Ajax常见的请求方式主要有一下4种：1、$.ajax()返回其创建的XMLHttpRequest对象。$.ajax()只有一个参数：参数key/value对象，包含各配置及回调函数信息。如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如xml返回"text/xml")。实例：保存数据到服务器，成功时显示信息。2.通过远程HTTP...
ajax异步调用
chenjingshen1214的博客
12-22 3245
1、名称： ajax 的全称是AsynchronousJavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。 2、同步和异步 异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。 举个例子来说同步和异步，同步就好像排队体...
ajax基本调用以及说明
见证自己学习,成长的记录
06-02 6161
ajax在项目中主要用作前后端交互,用的还是很多的,开发者应该掌握,面试的时候也是经常会被问到一些基本理论,先总结以下常用理论再举例说明实例 1 什么是ajax AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2 ajax的工作原理 Ajax的工作原理相当于在用户
Ajax调用webservice
Sayesan的专栏
07-27 3962
原文出处：http://blog.csdn.net/vs_sundaylove/article/details/6586113 一些感悟：  最近工作一直都很忙。很久没有更新自己的博客了。有很多东西要写。也只能慢慢写。真正能讲出来的东西，才能叫做真正掌握了吧。 我很喜欢一句话：“纸上学来终觉浅，绝知此事要躬行”。所以，在工作之余，自己做一些Dome并且测试通过，才放到网上来，要不就是对知识的不...
ajax公共调用,创建公共调用 jQuery Ajax 带返回值
weixin_42501373的博客
08-06 232
创建公共调用 jQuery Ajax 带返回值发布于 2016-09-11 07:54:13 | 75 次阅读 | 评论: 0 | 来源: 网友投递jQuery javascript框架jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸...
Java开源AJAX框架
02-27
火龙果软件工程技术中心 DWR DWR(DirectWebRemoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接...
ajax 调用后台方法大家可以讨论下
10-29
AjaxPro是一个.NET库，用于简化ASP.NET中的AJAX调用。它可以自动生成JavaScript代理，使得调用后台方法就像调用本地函数一样方便。然而，AjaxPro已经不再维护，可能不支持较新的浏览器特性和框架，因此现在使用较少...
Ajax 框架学习笔记
10-30
Ajax框架则是为了简化Ajax开发，提供了一套完整的解决方案，包括了处理请求、解析响应、更新页面等核心功能的库。在本篇学习笔记中，我们将重点探讨XMLHttpRequest对象的三个关键属性以及一个基本的Ajax源码示例。 ...
Ajax异步调用框架
10-29
这个Ajax异步调用框架适用于简单的数据获取和页面局部更新，但现代Web开发中，更常见的是使用jQuery、axios、fetch等库来简化Ajax操作，它们提供了更友好的API和更好的兼容性。例如，jQuery的`$.ajax()`方法或者...
一个选择框的选项决定另一个选框的选项
有無
10-29 1329
选择框处理 - 防止在同一班组中选择。根据一个选择框的值，决定另一选择框的选项。 <!-- Description: 选择框处理 - 防止在同一班组中选择。根据一个选择框的值，决定另一选择框的选项。 Author: xiaolong8 Date: 2009年9月4日, 11:16:47 -->  所在班组: ==请选择== ==非班组人员==话务10组
测试Oracle数据库的连接
有無
10-29 1310
测试Oracle数据库的连接。  代码包含两种方法： 1）加载驱动     2）查找数据源  <!-- Description: 测试Oracle数据库连接 Author: xiaolong8 Date: 2009-09-28 19:30:20 --> <% response.setCharacterEncoding("GBK"); %>
HTML表单复选框及JSP处理Demo
有無
10-28 1133
复选框的使用及JSP对数据的处理   <!-- Description: HTML表单复选框及JSP处理测试 Author: xiaolong8 Date: 2009-08-05 15:12:43 --> <% String[] cheArray1=request.getParameterValues("chkbox1"); String[] cheArray2=reques
UL及LI元素的控制 - HttpConnTestDemo
有無
10-28 1098
UL及对其中LI元素的设置。 <!-- Description: UL及LI元素的控制。 Author: xiaolong Date: 2009年9月10日, 9:59:17 --> My JSP 'testHttpConn.jsp' starting page
HTML表单复选框及JSP处理测试
有無
08-05 1009
写了这么多的程序，一直没怎么用过复选框，今天要用，于是就去揭开了她的神秘面纱：   <% String[] cheArray1=request.getParameterValues("chkbox1"); String[] cheArray2=request.getParameterValues("chkbox2"); %> My JSP 'test.jsp'
子窗口与父窗口的控制及参数传递
有無
11-05 937
子窗口与父窗口的控制，及参数传递：window.showModalDialog、window.open、iframe    子窗口与父窗口的控制.htm: <!-- Description: 子窗口与父窗口的控制，及参数传递：window.showModalDialog、window.open、iframe Author: xiaolong Date: 2009-08-14 1
利用Cookie记住用户操作习惯
有無
10-28 791
利用Cookie记住用户操作习惯。   文件1 - 读Cookie: <!-- Description: 利用Cookie记住用户操作习惯 Author: xiaolong8 Date: 2009年8月14日, 11:28:45 --> 利用Cookie记住用户操作.jsp <% Cookie cks[]=request.getCookies(); Coo
求邊數為N的正方形所含的小正方形數目，并打印出子正方形
有無
02-21 694
<!-- Description: 求邊數為N的正方形所含的小正方形數目，并打印出子正方形 Version 2012/2/21 8:59:02 Author: xiaolong Date: 2012/2/21 8:58:31 --> <!-- /// 參數设置 // 表格背景色 var SQ_COLOR="#
自定义下拉选择框，仿下拉选择框
有無
10-29 554
无聊没事干，仿下拉选择框  <!-- Description: 自定义下拉选择框，仿下拉选择框 Author: xiaolong8 Date: 2009-9-20 13:48:55 --> <!-- .a_opt{ margin:0px; padding:0px 0px 0px 2px; width:100%; text-decoratio
DWR实战：Ajax框架的Java对象调用与整合
《ajax框架：dwr实战》是一本实战教程，由胡东峰编著，主要关注于利用dwr（Direct Web Remoting）这个强大的Ajax框架来简化前端与后端的交互。dwr作为一个Java语言编写的服务器端框架，它允许JavaScript在浏览器端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值