9.※※※※※※※※AJAX※※※※※※※※(重点!!!)

最新推荐文章于 2022-03-13 17:21:21 发布

cuichen97

最新推荐文章于 2022-03-13 17:21:21 发布

阅读量1.4k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/cuichen16/article/details/100107368

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

AJAX

异步的 JavaScript 和 xml 技术
局部刷新技术，不刷新整个页面

应用:NBA比分直播,弹幕,判断账号是否可以使用(注册时)

一.AJAX工作原理

在这里插入图片描述
fun1():

1、创建一个XMLHttpRequest对象，AJAX的核心，作用：发送请求
2、调用XMLHttpRequest的 open()方法初始化方法：准备工作
xhr.open(“提交方式：get/post”,“提交路径url?id=1001”,是否异步提交：true);
3、发送请求
xhr.send();

fun2():

4、设置回调函数
xhr.onreadystatechange=function(data){
//DOM更新页面
}

二.注册功能代码实现(原生JS方式):面试

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//AJAX里面不能有返值!!!所以用一个变量去接收结果
var uidIsUsed;
function checkUid(){
	//获取用户输入的账号值
	var uid = document.getElementById("uid").value;
	//AJAX
	//1.创建XMLHttpRequest对象
	var xhr = new XMLHttpRequest();
	//2.初始化核心对象
	var url = "CheckEmpIsExistsServlet?eno="+uid;
	xhr.open("GET",url,true);
	//3.发送请求
	xhr.send();
	
	//4.设置回调函数 onreadystatechange
	xhr.onreadystatechange=function(data){
		//判断
		//数据的响应状态:4.响应结束   1.准备响应,2.开始响应,3.响应中
		if(xhr.readyState==4 && xhr.status==200){
			//使用响应的数据
			//局部刷新/更新
			//获取span标签
			var uidspan=document.getElementById("uidspan");
			if(xhr.responseText=="true"){
				uidspan.innerHTML="此账号可以使用";
				uidspan.style.color="green";
				uidIsUsed=true;
			}else{
				uidspan.innerHTML="此账号已被占用";
				uidspan.style.color="red";
				uidIsUsed=false;
			}
		}
	}
	
}
</script>
</head>
<body>

<p>
员工账号:<input   type="text" name="uid" id="uid" onblur="checkUid()"/> 
		<span id="uidspan"></span>
</p>

</body>
</html>

【说明】：java给客户端响应的数据类型只能是字符串类型
为了便于传输及获取处理数据，字符串数据分3种格式：
1、普通字符串格式 true false 可以使用
2、XML格式客户端不好读取了解
3、JSON格式 {empno:“1001”,ename:“古丰”} 主流

【强调】：在AJAX内部不能返回值，不能使用return;

1.AJAX版本的注册功能:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
function checkUid(){
	var uid=$("#uid").val();
	var myUrl="CheckEmpIsExistsServlet?eno="+uid;
	//jQuery版本的AJAX
	//json对象  key:值,用逗号分割
	$.ajax({
		url:myUrl,//请求路径
		type:"get",//提交方式
		dataType:"text",//服务器响应数据的格式,普通字符串
		success:function(data){
			//服务器正常200,响应状态是4
			if(data=="true"){
				//直接使用id值去获取,仅jQuery中可用
				uidspan.innerHTML="此账号可以使用";
				uidspan.style.color="green";
				uidIsUsed=true;
			}else{
				uidspan.innerHTML="此账号已被占用";
				uidspan.style.color="red";
				uidIsUsed=false;
			}
		}
	});
	
}

</script>
</head>
<body>
<p>
员工账号:<input   type="text" name="uid" id="uid" onblur="checkUid()"/> 
		<span id="uidspan"></span>
</p>
</body>
</html>