AJAX入门学习笔记

最新推荐文章于 2023-05-30 21:27:40 发布

原创最新推荐文章于 2023-05-30 21:27:40 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

Java Web 专栏收录该内容

7 篇文章

订阅专栏

个人博客原文链接

Ajax(Asynchronous javascript and xml) 实现异步刷新，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

一. 基于JavaScript的Ajax

分布解析Ajax

创建XHR(XML Http Request)
XHR对象是一个JavaScript对象，Ajax就是通过它实现局部刷新的
var xmlhttp = new XMLHttpRequest();
设置响应函数
XHR对象的作用是和服务器进行交互，可以指定checkResult函数进行处理
xmlhttp.onreadystatechange = checkResult;
设置并发出请求
xmlhttp.open(“GET”,url,true);
通过send函数进行实际访问
xmlhttp.send(null);
null表示没有参数，因为参数已经通过get方式放在url中了，只有用post，并且需要发送参数的时候，才会使用send
xmlhttp.send(“user=”+username+"&password="+password);
处理响应信息
在checkResult函数中处理响应
function checkResult(){
if(xmlhttp.readyState4&&xmlhttp.status200){
document.getElementById(“checkResult”).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById(‘checkResult’).innerHTML 设置span的内容为服务端传递回来的文本

Ajax实例

<!DOCTYPE html>
<html>
<head>
	<title>Ajax分布解析</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var xmlhttp;	
		function check(){
			xmlhttp = new XMLHttpRequest();	//创建XHR
			var user = document.getElementById("username").value; //获取输入的内容
			/*设置地址，不可以使用file协议，只能使用http协议*/
			var url = "http://how2j.cn/study/checkName.jsp?name="+user; 
			xmlhttp.onreadystatechange = checkResult; //设置响应函数
			xmlhttp.open("GET",url,true); //设置请求
			xmlhttp.send(null); //发送请求
		}
		function checkResult(){ //创建响应函数
			if(xmlhttp.readyState==4&&xmlhttp.status==200){
				document.getElementById("err").innerHTML = xmlhttp.responseText;
			}
		}
	</script>
</head>
<body>
	账号：<input id="username" type="text" name="user" onkeyup="check()" >
	<span id = "err"></span>

</body>
</html>

二. 基于JQuery的Ajax

提交Ajax的方式

提交ajax请求
常见的调用方式$.ajax
$.ajax({
url:page, //表示访问的页面路径
data:{“name”:value}, //表示提交的参数
success:function(result){ //表示提交成功后返回对应的响应函数
$("#checkResult").html(result);
}
})
使用get方式提交ajax

$.get{
	page,
	{"name":value},
	function(result){ //表示提交成功后返回对应的响应函数
		$("#checkResult").html(result);
	}
}

注：只有第一个参数是必须的

使用post方式提交ajax

$.post{
	page,
	{"name":value},
	function(result){ //表示提交成功后返回对应的响应函数
		$("#checkResult").html(result);
	}
}

注：只有第一个参数是必须的

使用load方式调用ajax
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。
例：

$(function(){
	$("#name").keyup(function(){
	  var value = $(this).val();
	  var page = "/study/checkName.jsp?name="+value;
	  $("#checkResult").load(page);
	});
});

Ajax实例

<!DOCTYPE html>
<html>
<head>
	<title>Ajax</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		
		$(function(){
			$("#un").keyup(function(){
				var page = "http://how2j.cn/study/checkName.jsp";
				//通过$.ajax方式
				$.ajax({
					url:page,
					data:{"name":$("#un").val()},
					success:function(result){
						$("#checkResult").html(result);
					}		
				});

				
				/*通过load方式
				var page2 = "http://how2j.cn/study/checkName.jsp?name="+$("#un").val();
				$("#checkResult").load(page2);
				*/
			});
		});
		
	</script>
</head>
<body>
	<div id = "checkResult"></div>
	<input id = "un" type="text" name="">
</body>
</html>