Ajax详解与封装

最新推荐文章于 2022-11-01 08:52:57 发布

风飞扬fq

最新推荐文章于 2022-11-01 08:52:57 发布

阅读量460

点赞数 1

分类专栏：前端笔记文章标签： ajax web

本文链接：https://blog.youkuaiyun.com/fq_fly/article/details/103221379

版权

前端笔记专栏收录该内容

29 篇文章

订阅专栏

Ajax详细步骤
1、创建XMLHTTPRequest对象，并对浏览器兼容处理

var xhr = null;
if(window.XMLHttpRequest){
	xhr = null;
}else if{
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2、准备发送http请求

xhr.open("get","xxx.php",true);

3、执行发送http请求

xhr.send(null);

其中send方法的参数分两种情况；若发起的Http请求为get方式，则send方法的参数为null；若发起的http请求为post请求，则send方法的参数为params，params参数的值为所需提交给服务端文件的参数；此外，当Http请求为post时，需设置请求头。代码如下：

xhr.setRequestHeader("Cotent-Type","application/x-www-form-urlencoded");

4、设置回调函数

xhr.onreadystateChange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var result	== xhr.responseText;
			}
		}
	}

回调函数中onreadyStatechange方法表示，当http对象的readyState为且status为200时，http响应成功，此时得到http响应数据，并对应进行解析处理。
Ajax封装代码

function myAjax(type,url,params,dataType,callback,asy){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpResuest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	if(type == "get"){
		if(params && params != ""){
			url += "?" + params;
		}

	}
	xhr.open(type,url,asy);
	if(type == "get"){
		xhr.send(null);
	}else if(type == "post"){
		xhr.setRequestHeader("Cotent-Type","application/x-www-form-urlencoded");
		xhr.send(params);
	}
	if(asy){
			xhr.onreadystateChange = function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					var result	== null;
					if(dataType == "json"){
						result = xhr.resposeText;
						result = JSON.parse(result);
					}esle if(dataType == "xml"){
						result = xhr.resposeXML;
					}esle{
						result = xhr.resposeText;	
					}
				}
				if(callback){
					callback(result);
				}
			};
		}
	}
	else{
		if(xhr.status == 200){
			var result	== null;
			if(dataType == "json"){
				result = xhr.resposeText;
				result = JSON.parse(result);
			}esle if(dataType == "xml"){
				result = xhr.resposeXML;
			}esle{
				result = xhr.resposeText;	
			}
		}
		if(callback){
			callback(result);
		}
	}

	
}

ajax封装测试

var username = document.querySelector("#username");
username.onblur = function(){
	var usernameValue = username.value;
	var type = "get";
	var url = "checkUsername.php";
	var params = "uname=" + usernameValue;
	var dataType = "text";
	myAjax(type, url, params, dataType, function(result){
		var user_result = document.querySelector("#user_result");
		if(result == "ok"){
			user_result.innerText = "用户名可用"；
		}else{
			user_result.innerText = "用户名不可用";
		}
	},true);
}