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

我的Ajax简单封装简单调用

阅读更多

记得JavaEye上有一位牛人用JavaScript封装过Ajax,在他发文的几个月前,我也写个这样的封装。诚然,我写的没有他写的功能全面与封装完美,我的属于简单的方法封装,没有用到面向对象的思想。贴一下我的代码,对于一般的Ajax请求也够用。

 

我提供了post和get这两种请求方式,方法命名用了易于记忆的"doGet"和"doPost",用法上,类似于Jquery的get方法和post方法,只是没有用到JavaScript的面向对象编程而已。

 

先看下两个简单的用法:

 

//异步Get请求
var url1 = "user/deleteUser.action?id=12";
doGet(url1, null, function(data){
	//Todo something ...
	alert(data);
});

//异步Post请求
var url2 = "user/addUser.action";
var formData = "username=rongxinhua&sex=male";
doPost(url, formData, function(data){
	//Todo something ...
	alert(data);
});

 

 

我的Ajax方法库,除了支持get请求和post请求外,还支持三个回传的数据格式,分别是文本格式、XML格式和JSON格式,此外,还支持异步、同步两种交互方式。那好,我们来看一下代码吧:

 

/**
 * 初始化XMLHttpRequest对象
 * 
 * @return
 */
function initXmlHttp() {
	//XMLHttpRequest对象
	var xmlHttp = false;
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE6及其以下的IE版本
		var activeXNames = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activeXNames.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activeXNames[i]);
				break;
			} catch (e) {
			}
		}
	}
	if (!xmlHttp) {
		alert("无法获取XMLHttpRequest, 你的浏览器不支持Ajax。");
	}
	
	return xmlHttp;
}

// info/user.action
// info/user.action?id=123
// info/user.action?id=123&name=tom
// info/user.action?name=tom&name=marry

/**
 * @param url 要访问的路径
 * @param data 要传送的数据,格式:"key1=value1&key2=value2"
 * @param callback 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断, 
 *            可选,若不输入时,则会根据返回的值字符串作判断
 * @param asyn 执行方式,支持2种方式:true(异步), false(同步)
 * 			  可选, 若不输入时,默认用异步方式执行
 */
function doGet(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	
	var url = url;
	if(data != null && data != '') {
		if (url.indexOf("?") == -1) {
			url = url + "?" + data;
		} else {
			url = url + "&" + data;
		}
	}
	var xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function() {
		callbackAjax(responseFunction, responseContentType, xmlHttp);
	};
	
	if(asyn==undefined){
		xmlHttp.open("GET", url, true);
	}else if(asyn==false){
		xmlHttp.open("GET", url, false);
	}else{
		xmlHttp.open("GET", url, true);
	}
	xmlHttp.send(null);
}

/**
 * 
 * @param url 要访问的路径
 * @param data 要传送的数据,格式:"key1=value1&key2=value2"
 * @param callback 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断, 
 *            可选,若不输入时,则会根据返回的值字符串作判断
 * @param asyn 执行方式,支持2种方式:true(异步), false(同步)
 * 			  可选, 若不输入时,默认用异步方式执行
 */
function doPost(url, data, responseFunction, responseContentType,asyn) {
	if(asyn==undefined){
		if(responseContentType!=undefined){
			if(typeof responseContentType =='boolean'){
				asyn = responseContentType;
			}
		}
	}
	var  xmlHttp = initXmlHttp();
	xmlHttp.onreadystatechange = function(){
		callbackAjax(responseFunction, responseContentType,xmlHttp);
	};
	if(asyn==undefined){
		xmlHttp.open("POST", url, true);
	}else if(asyn==false){
		xmlHttp.open("POST", url, false);
	}else{
		xmlHttp.open("POST", url, true);
	}
	xmlHttp.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded");
	xmlHttp.send(data);
}

/**
 * Ajax回调函数
 * @param responseFunction 回调函数(留给使用者实现)
 * @param responseContentType 响应内容的类型,支持3种类型:"TEXT","XML","JSON", 没有时自动判断
 * @param xmlHttp XMLHttpRequest对象
 * @return
 */
function callbackAjax(responseFunction, responseContentType, xmlHttp) {
	// 判断对象的状态是否交互完成
	if (xmlHttp.readyState == 4) {
		// 判断http的交互是否成功
		if (xmlHttp.status == 200) {
			if (responseContentType == "XML") {
				var responseXml = xmlHttp.responseXML;
				responseFunction(responseXml);
			} else {
				var responseText = xmlHttp.responseText;
				if (responseContentType == "JSON") {
					var responseJson = eval("(" + responseText + ")");
					responseFunction(responseJson);
				} else if(responseContentType == "TEXT") {
					responseFunction(responseText);
				} else {
					//没有responseContentType参数的情况
					if(responseText.indexOf("<")==0) {
						var responseXml = xmlHttp.responseXML;
						responseFunction(responseXml);
					} else if(responseText.indexOf("{")==0 || responseText.indexOf("[")==0) {
						var responseJson = eval("(" + responseText + ")");
						responseFunction(responseJson);
					} else {
						responseFunction(responseText);
					}
				}
			}
		}
	}
}

 

 

 

3
4
分享到:
评论

相关推荐

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    html5页面开发源代码(含ajax封装及调用方法)

    提供完整的html5页面开发流程和开发方式,包括html5页面开发代码,含ajax封装方法,以及调用的方式

    java中对ajax经典封装

    "ajax封装2_files"、"ajax基本封装_files"和"ajax封装3_files"很可能包含了示例代码的HTML、CSS和JavaScript文件。这些文件可能包含用于演示Ajax请求的按钮、表单和结果显示区域,以及处理Ajax响应的JavaScript函数...

    ajaxRequest.js(ajax get post方法封装,方便前端调用)

    封装jquery ajax方法,方便调用,避免在代码中频繁使用 $.ajax({ type: 'GET', url: url, ...... )}; 统一调用公共方法即可,区分同步异步,get post!希望对大家有帮助

    jquery Ajax 全局调用封装实例详解

    一个简洁的Ajax封装类通常包括几个参数:请求地址`url`、发送的数据`data`、请求方式`type`、请求类型`dataType`、请求成功回调函数`successfn`和请求失败回调函数`errorfn`。根据这些参数,可以封装成多个不同的...

    简单封装Ajax

    【简单封装Ajax】这篇文章主要探讨的是如何在JavaScript中对原生的XMLHttpRequest对象进行简单的封装,以便于在实际开发中更方便地进行异步数据请求。在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种...

    ajaxTest 实用简单封装

    **AjaxTest 实用简单封装** Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了...

    ajax封装实例代码

    Ajax封装则是将常见的Ajax操作进行模块化处理,方便开发者在项目中快速、高效地实现数据交互。本篇文章将深入探讨Ajax封装实例代码及其相关知识点。 首先,我们来看Ajax的核心原理:通过JavaScript创建...

    Ajax的小封装 get,post请求

    在描述中提到了对Ajax的get请求的小封装,这意味着我们将会讨论如何用JavaScript来构建一个简易的Ajax GET请求函数,并可能涉及POST请求的实现。 ### 1. Ajax GET 请求小封装 GET请求是最常见的HTTP方法,用于从...

    对jquery的ajax封装

    对常用jquery的ajax函数进行封装,便于调用,会有不同错误的错误提醒

    简单ajax封装小工具

    这个“简单ajax封装小工具”可能是将常见的Ajax请求功能如GET、POST等进行了抽象和简化,方便开发者快速调用。通常,一个简单的Ajax封装可能包括以下组成部分: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,...

    JS封装的AJAX函数

    总结来说,AJAX封装函数是将复杂的HTTP请求过程简化为易于调用的函数,使得开发者能够更高效地实现异步通信。在实际开发中,这样的封装是非常常见的,它提高了代码的可读性和复用性,降低了开发难度。对于`right.js`...

    JS的DLL封装及调用

    "JS的DLL封装及调用"这个主题主要涉及以下几个知识点: 1. **DLL封装**:这个过程包括将JS代码转换为可以在DLL中运行的形式。这通常需要使用C#或Visual Basic .NET等.NET语言,因为这些语言可以直接创建DLL。首先,...

    JavaScript-初识ajax、ajax封装、及json简单实战案例(下).pdf

    Ajax封装** 为了减少代码重复,提高可维护性,通常会将Ajax请求封装成函数。以下是一个简单的Ajax函数封装示例: ```javascript function ajaxRequest(url, method, callback, data) { var xhr = new ...

    jquery ajax方法的再封装

    一个基本的`$.ajax()`调用可能如下所示: ```javascript $.ajax({ url: 'https://api.example.com/data', type: 'GET', dataType: 'json', success: function(data) { console.log(data); }, error: ...

    web ajax 的使用 js封装

    【标题】"Web AJAX 使用与JS封装" 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得页面无需重新加载整个网页就能与服务器交换数据并更新部分网页内容。JavaScript是实现AJAX的核心...

    ajax简单示例和封装库

    **简单Ajax示例:** ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data ...

    jQuery使用Ajax方法调用WebService

    jQuery通过封装Ajax函数,使得开发者可以更方便地使用Ajax功能。 jQuery中的Ajax方法主要有`$.ajax()`, `$.get()`, `$.post()`, `$.getJSON()`等。在调用WebService时,我们通常使用`$.ajax()`,因为它提供了最全面...

    调用ajax并返回数据

    已对ajax进行封装,可直接进行调用,并返回数据! ajaxText(url);返回文本格式, ajaxJson(url);返回json格式

Global site tag (gtag.js) - Google Analytics