原生态JS发送AJAX请求

最新推荐文章于 2024-02-08 09:54:56 发布

原创最新推荐文章于 2024-02-08 09:54:56 发布 · 553 阅读

1 ·

CC 4.0 BY-SA版权

http 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用DHTML和XMLHttpRequest实现的AJAX请求处理方法，包括GET和POST请求的发送方式，以及如何处理响应数据。提供了同步POST请求的示例，并展示了如何根据不同返回类型解析数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建发送请求(DHTML+XMLhttpRequest=AJAX)

function uHttpRequest(reqMethod, url, paramMap, fnOnData, fnOnError, async){
	var xmlHttp = new XMLHttpRequest();	
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState==4){
			var cntType;
			switch(xmlHttp.status){
			case 200:
				if(fnOnData!=undefined && fnOnData!=null){
					cntType = xmlHttp.getResponseHeader("Content-Type");
					if(cntType.indexOf('json')!=-1){
						fnOnData( eval('(' + xmlHttp.responseText + ')') );
					}else if(cntType.indexOf('xml')!=-1){
						fnOnData(xmlHttp.responseXML);
					}else{
						fnOnData(xmlHttp.responseText);
					}
				}
				break;
			default:
				if(fnOnError!=undefined && fnOnError!=null){
					fnOnError();
				}
				break;
			}			
		}
	};
	var body = null;
	xmlHttp.open(reqMethod, url, (async==undefined ||async==null||async));
	if(reqMethod=='POST'){
		if(paramMap!=undefined && paramMap!=null){
			var arr = new Array();
			for(var k in paramMap){
				arr[arr.length] = encodeURIComponent(k) + '=' + encodeURIComponent(paramMap[k]);
			}
			if(arr.length>0){
				body = arr.join('&');
			}
		}
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	}
	xmlHttp.send(body);
}

2.发送get/post请求

function uHttpGet(url, fnOnData, fnOnError){
	uHttpRequest('GET', url, null, fnOnData, fnOnError, true);
}
function uHttpPost(url, paramMap, fnOnData, fnOnError){
	uHttpRequest('POST', url, paramMap, fnOnData, fnOnError,true);
}

3.发送同步post请求

/**
 * 
 * @param url
 * @param paramMap  [optional]
 * @returns null, or response data
 */ 
function uHttpSyncPost(url,paramMap){
	var ret = null;
	uHttpRequest('POST', url, paramMap, function(data){
		ret = data;
	}, null,false);
	return ret;
}

4.实例

function testUHttpSyncPost(){
	var ret = new Array(); 
	ret = uHttpSyncPost(/test.do?rnd="+Math.random(),{"flag":flag,"test":test);
	console.log(ret);
}