ajax

最新推荐文章于 2022-06-19 13:50:53 发布

lyk1599021827

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量144

点赞数 1

分类专栏： java 文章标签： ajax

本文链接：https://blog.csdn.net/lyk1599021827/article/details/91901379

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ajax

1 ajax概念
2 ajax特点
3 ajax 的过程
4 ajax请求时参数传递
5 封装ajax

1 ajax概念

Ajax(Asynchronous Javascript And XML)：异步的JavaScript和XML技术，是一种创建交互式网页应用的网页开发技术。

2 ajax特点

a) 无需加载整个页面，能够部分刷新页面
b) 是一个前端技术

3 ajax 的过程

如何发送一个ajax请求
i.创建ajax引擎

ii.创建一个http请求
open(method,url,async)：表示创建一个http的请求，method请求方式、url请求的路径地址、async表示请求是否异步

iii.发送http请求
send(body)：发送该http请求，body是post请求的数据

iiii.利用请求状态改变触发器获取请求进度(也就是监听readystate的状态)
onreadystatechange：请求状态改变事件触发器，当readyState值发送变化时，调用该事件触发器上绑定的函数

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'testajax.jsp' starting page</title>
<style type="text/css">
	#myDiv{
		width: 300px;
		height: 180px;
		border: 2px solid darkblue;
	}
</style>
</head>
<body>
	<button onclick="doAjax();">发送ajax请求</button>
	<hr/>
	<div id="myDiv"></div>
	
	<script type="text/javascript">
		function doAjax(){
			//1.创建ajax引擎对象
			var xhr = new XMLHttpRequest();
			//4.利用请求状态改变触发器获取请求进度
			xhr.onreadystatechange = function(){
				//readyState 等于4表示请求完成
				if(xhr.readyState == 4){
					if(xhr.status == 200){
						document.getElementById("myDiv").innerHTML = xhr.responseText;					
					}else if(xhr.status == 404){
						document.getElementById("myDiv").innerHTML = "您请求的资源不存在！";
					}else if(xhr.status == 500){
						document.getElementById("myDiv").innerHTML = "您请求服务器出了点问题！";
					}
				}else{
					document.getElementById("myDiv").innerHTML = "<img src='image/30.gif' />"
				}
			}
			//2.创建一个Http请求
			xhr.open("get", "hello", true);
			//3.发送该Http请求
			xhr.send(null);
			
			//send会根据open中的async来决定是否同步或异步
			//alert("hello");
		}
	</script>
</body>
</html>

4 ajax请求时参数传递

<%@ page import="cn.szsxt.bean.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
欢迎<%=((User)session.getAttribute("user")).getRealname()%>回家！
<hr>
<button onclick="getAllClazz();">显示班级信息</button>
<table id="clazztable" border="1" style="border-collapse: collapse;">

</table>
<script type="text/javascript">
	function getAllClazz(){
		//window.location.href = "showclazz";
		
		//在此处发送ajax请求
		//1.创建xhr，XMLHttpRequest对象
		var xhr = new XMLHttpRequest();
		//4.监听readyState的值的变化
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				//如何处理返回回来的结果
				var clazzs = JSON.parse(xhr.responseText);
				for(var i = 0;i < clazzs.length; i++){
					document.getElementById("clazztable").innerHTML += "<tr><td>"+clazzs[i].id+"</td><td>"+clazzs[i].classname+"</td><td>"+clazzs[i].classloc+"</td></tr>";
				}
				//将上面的字符串信息解析，在当前页面中通过dom操作，将数据呈现在本页面中
			}
		}
		//2.创建http请求
		xhr.open("get", "showclazz", true);
		//3.发送请求
		xhr.send(null);
	}
</script>
</body>
</html>