AJAX的基础及进阶

最新推荐文章于 2023-06-13 10:45:22 发布

码媛世界第一号

最新推荐文章于 2023-06-13 10:45:22 发布

阅读量170

点赞数

分类专栏： Java第二阶段笔记集文章标签： ajax js

本文链接：https://blog.csdn.net/hxc2u/article/details/110404788

版权

Java第二阶段笔记集专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax基础、原生JS与jQuery实现Ajax请求，包括$.ajax、$.post()和$.get()的区别，以及同步与异步操作。通过校验用户名重复和表单序列化的实战案例，展示Ajax在动态网页开发中的实际应用。

摘要由CSDN通过智能技术生成

Ajax 基础

Ajax简介

Ajax应用场景：
　直播（点赞、小礼物、评论）
　表单校验
　百度检索
在这里插入图片描述

什么是Ajax?
　　概述:ajax是一种快速创建动态网页的开发技术、ajax可以实现无需刷新页面的情况下、对网页中的部分内容进行实时更新。

原生JS实现Ajax请求

发送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>
</head>
<body>

	<div style="width: 300px; height: 300px; border: 1px solid;" id="div1">
		放眼整个上海滩、谁特码敢动我张万霖
	</div>
	<input type="button" value="js_ajax" onclick="fun1()">
	
</body>

<script type="text/javascript">
	function fun1() {
		//发送ajax
		//创建 XMLHttpRequest 对象的语法：
		var xmlhttp = new XMLHttpRequest();
		//规定请求的类型、URL 以及是否异步处理请求 true表示异步 false 表示同步
		xmlhttp.open("GET", "${pageContext.request.contextPath}/js?name=张三丰",true);
		//发送请求
		xmlhttp.send();
		//onreadystatechange:我们规定当服务器响应已做好被处理的准备时所执行的任务。
		xmlhttp.onreadystatechange = function() {
			//  0: 请求未初始化 
			//	1: 服务器连接已建立 
			//	2: 请求已接收 
			//	3: 请求处理中 
			//	4: 请求已完成，且响应已就
			// 200 响应行的状态码 成功
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//innerHTML设置div内容  = xmlhttp.responseText(响应的内容)
				document.getElementById("div1").innerHTML = xmlhttp.responseText;
			}
		}
	}
</script>
</html>

/js

@WebServlet("/js")
public class Js_ajax extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//解决响应乱码
		resp.setContentType("text/html;charset=utf-8");
		
		String name = req.getParameter("name");
		
		System.out.println(name);
		System.out.println(111);
		resp.getWriter().print("我是杜月笙、我带2000个兄弟砍死你");
	}
}

jQuery版Ajax

概述：jQuery版的ajax是对原生js的ajax的第一次封装、主要就是为了简化js编程的复杂度、以及解决js的ajax的兼容性问题

$.ajax

语法:
$.ajax({
　　url: “/day16/ajax”, 请求地址
　　type:”get”, 请求方式
　　data:{“username”:”张三”,”password”:”123”}, 键必须是字符串值是object类型
　　dataType:”text”, 返回值类型默认 text、html(两者是一样)、xml、json、javaScript
　　async:true, 是否异步默认true 异步 false 同步
　　sussess:function(d){
　　　　　响应成功后要执行的回调函数
　　　　　d:servlet中响应的内容
　　}
})

规范
　1、属性书写不分顺序
　2、属性与属性值之间用英文冒号隔开、每一个属性执行用英文逗号隔开、最后一个属性后不加逗号
　3、data的属性是ajax传递的参数{“name”:”zhangsan”,”age”:18} 参数书写要求键值对形式、键必须是字符串值是任意类型,每一个属性之间用逗号隔开，属性与属性值之间用:
　4、如果你要只想发送一个简单请求不想要返回值、直接用url + type属性就可以了

案例:校验用户名是否重复案例

1、导入资源
2、页面

<%@ 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="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
</head>
<body>
	用户名:<input type="text" name="username" onblur="fun1(this.value)"> <span id="s1"></span>
</body>

<script type="text/javascript">

	function fun1(value){
		//发送ajax
		$.ajax({
			url:"${pageContext.request.contextPath}/ajax_01",
			data:{"username":value},
			type:"get",
			success:function(d){
				//查到了
				if(d==1){
					$("#s1").html("<font color='red'>用户名已存在</font>")
				}else{
				//没有查到
					$("#s1").html("<font color='green'>√</font>")
				}
				
			}
		})
	}
</script>
</html>

3、后台

@WebServlet("/ajax_01")
public class Jq_ajax extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//数据库中所有的用户名
		String arr[] = {"admin","zhangsan","dbh"};
		//获取页面传递的用户名
		String username = req.getParameter("username");
		
		for (String uname : arr) {
			
			if(uname.equals(username)) {
				//响应 1 找到了
				resp.getWriter().print(1);
				return;
			}
		}
		//没找到
		resp.getWriter().print(0);
		
	}

}

在这里插入图片描述

$.post()和$.get()

$.post()以及$.get()对jQuery的ajax的第二次封装、主要就是为了简化jQuery的ajax编程复杂度
语法:
　 $. p o s t (请求的 u r l 地址, 请求参数, 回调函数, 返回值类型)$ .get(请求的url地址,请求参数,回调函数,返回值类型)

校验用户名是否存在

get方式

<%@ 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="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
</head>
<body>
	用户名:<input type="text" name="username" onblur="fun1(this.value)"> <span id="s1"></span>
</body>

<script type="text/javascript">
	function fun1(value){
		//发送ajax
		$.get("${pageContext.request.contextPath}/ajax_01",{"username":value},function(d){
			if(d==1){
				//已存在
				$("#s1").html("<font color='red'>用户名已存在</font>")
			}else{
				//可用
				$("#s1").html("<font color='green'>√</font>")
			}
		})		
	}
</script>
</html>

post方式

<%@ 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="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
</head>
<body>
	用户名:<input type="text" name="username" onblur="fun1(this.value)"> <span id="s1"></span>
</body>

<script type="text/javascript">
	
	function fun1(value){
		$.post("${pageContext.request.contextPath}/ajax_01",{"username":value},function(d){
			if(d==1){
				$("#s1").html("<font color='red'>用户名已存在</font>")
			}else{
				$("#s1").html("<font color='green'>√</font>")
			}
		})
		
	}
</script>
</html>

注意:
　1、$.get()只能发送get请求、$.post()只能发送post请求
　2、属性的顺序严格限制
　3、如果返回值类型是字符串、返回值属性可以省略

$.ajax()与$.post() | $.get()异同

相同点:都可以发送异步请求
不同点:
　1、$.ajax对原生js的第一次封装、它不仅可以发送get请求还可以发送post请求、不仅发送同步请求、也可以异步请求、
　2、$.post只能发送异步请求、只能发送post请求、$.get只能发送异步请求、只能发送get请求

Ajax进阶

Ajax同步与异步

同步:页面中同时存在多个ajax、多个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="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
</head>
<body>
	
	<script type="text/javascript">
		
		$.ajax({
			url:"${pageContext.request.contextPath}/tb",
			data:{"username":"张三"},
			//同步请求
			async:false,
			type:"get"
			
		})
		$.ajax({
			url:"${pageContext.request.contextPath}/tb",
			data:{"username":"李四"},
			//同步请求
			async:false,
			type:"get"
			
		})
		$.ajax({
			url:"${pageContext.request.contextPath}/tb",
			data:{"username":"王五"},
			//同步请求
			async:false,
			type:"get"
			
		})
		$.ajax({
			url:"${pageContext.request.contextPath}/tb",
			data:{"username":"赵六"},
			//同步请求
			async:false,
			type:"get"
			
		})
	</script>
</body>
</html>

当第一个ajax的返回值作为第二个ajax的参数的时候我们才会使用同步
异步:页面中同时存在多个ajax、多个ajax按照随机执行

表单序列化

概述:将表单的数据按照一定格式进行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="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
</head>
<body>
	<form action="/day10/m3" method="post">
		用户名:<input type="text" name="username"><br>
	         密码:<input type="password" name="password"><br>
	    <input type="button" value="登录" onclick="sub()"> 
	</form>
</body>

<script type="text/javascript">
		
		function sub(){
			//发送ajax提交表单数据
			$.ajax({
				url:"${pageContext.request.contextPath}/m1",
				data:$("form").serialize(),
				type:"get",
				success:function(d){
					console.log(d)
				}
			})
			
		}
</script>

</html>