理解与封装AJAX技术-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/102934328

本文介绍了AJAX的基本概念，包括其异步传输数据的特性，以及使用AJAX时的五个关键步骤：创建异步对象、设置请求参数、发送请求、监听状态变化和处理返回数据。还提供了一个关于如何封装AJAX的案例。

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

概念

AJAX（Asynchronous JavaScript and XML,即异步JavaScript和XML）是一种运用JavaScript和可扩展标记语言（XML）在浏览器和服务器之间进行异步传输数据的技术。使用Ajax不会重新加载网页，就可以与服务器交换数据。

步骤

1.创建一个异步对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态的变化
5.处理返回的结果

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax初识</title>
	<script src="ajax.js"></script>
	<script>
		window.onload = function() {
			var btn = document.getElementById('btn');
			btn.onclick = function() {
				//获取用户名和密码
				var uname = document.getElementById('username').value;
				var pass = document.getElementById('pass').value;
				
				//ajax(type,url,param,dataType,callback)
				ajax("get","check.php",'username='+ uname +'&password='+ pass ,"string",function(data){
					var info=document.getElementById("info");
					if(data=="1"){
						info.innerHTML="登录成功";
					}else{
						info.innerHTML="登录失败";
					}				
				});
			}
		}
	</script>
</head>
<body>
	<form>
		用户名：<input type="text" name="username" id="username">
		<span id="info"></span>
		<br>
		密码：<input type="password" name="pass" id="pass">
		<input type="button" value="登录" id="btn">
	</form>
</body>
</html>

封装ajax

function ajax(type,url,param,dataType,callback){
	//创建核心对象
	var xhr=null;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject();
	}
	if(type=="get"){
		url =url+"?"+param;
	}

	//准备连接
	xhr.open(type,url,true);
	//发送请求
	var data=null;
	if(type=="post"){
		data=param;
		//设置请求头信息
		xhr.setRequestHeader("Content-type","application/x-www-from-urlencoed");
	}
    xhr.send(data);
    //回调函数
    xhr.onreadystatechange=function(){
    	if(xhr.readyState==4 && xhr.status==200){
     		var data1=xhr.responseText;
     		if(dataType == "json"){
     			data1=JSON.parse(data1);
     		}
     		callback(data1);
     	}
     }
}