首页 / AJAX / JavaWeb Ajax详解

JavaWeb Ajax详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaWeb Ajax详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4934字，纯文字阅读大概需要8分钟。

内容图文

项目开发视频：
SpringCloud微服务开发入门
手把手开发基于SpringBoot的员工管理系统
亿度云盘~Java小白入门实战

超详细的Java知识点汇总

AJAX介绍

AJAX（Asynchronous Javascript And XML)异步Javascript和XML，是一种通过JS和后台服务器进行交互的技术。
和传统的表单和服务器交互的方式相比，区别是：
1、传统的方式会刷新整个页面
2、AJAX刷新局部页面，提升用户体验

AJAX的实现

核心类：XMLHttpRequest（目前主流浏览器都支持，IE5\IE6支持ActiveXObject)
作用是：和后台服务器进行交互，应用Http协议和数据格式进行数据通信。
创建：

XMLHttpRequest xhr = new XMLHttpRequest();

方法：

  • open(“GET/POST”,“服务器URL”,是否异步);
    是否异步为true代表是异步，不需要等待服务器响应，执行后面的代码，不会阻塞。
    如果是false代表同步，产生阻塞，需要等服务器响应才能执行后面操作。
    推荐使用异步方式。
  • send(字符串)
    主要用于POST请求给服务器发送数据，如：“username=zhangsan&password=123”

事件：

  • onreadystatechange Ajax对象状态变化的事件回调

状态：

  • 0 初始化状态
  • 1 连接状态，调用了open方法
  • 2 发送状态，调用了send方法
  • 3 接受状态，开始接受服务器数据
  • 4 接受完成状态，完全接受服务器数据

属性：

  • status 响应码，200、403、404、500…
  • readyState 状态码，从0到4
  • responseText 服务器的响应数据

原生AJAX的实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Ajax的使用</title>
<style type="text/css">
	#test{
		width:100px;
		height:100px;
		background:yellow;
	}
</style>
</head>
<body>
	<div id="test" onclick="testAjax()">连接服务器</div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
	function testAjax(){
			//创建XHR对象
			var xhr = new XMLHttpRequest();
			//监听onreadystatechange事件
			xhr.onreadystatechange = function(){
				console.log("readyState:"+xhr.readyState);
				//如果状态为全部接受并且响应码为200
				if(xhr.readyState == 4 && xhr.status == 200){
					//更新页面内容
					$("#test").text("服务器说："+xhr.responseText);
				}
			};
			//调用open方法，发送请求
			xhr.open("POST","ajax.do",true);
			//设置请求头，数据的类型
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
			//调用send方法，发送参数
			xhr.send("username=张三");
		}
	</script>
</body>
</html>

Servlet代码

/**
 * 测试Ajax
 * @author xray
 *
 */
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req,resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=UTF-8");
		//获得Ajax发送的参数
		String name = req.getParameter("name");
		//给浏览器发送数据
		resp.getWriter().print(name+"你好啊，我是服务器！！！");
	}
}

JQuery的Ajax

JQuery提供了几种ajax方法：

  1. $.ajax
    参数：
    type 请求方法类型，GET、POST
    url 服务器地址，必须
    data 请求参数
    async 是否异步
    success 成功接收数据的回调函数
    error 错误情况的回调函数
$.ajax({type:"post",url:"ajax.do",data:{username:"张三"},
	success:function(text){
	更新text数据到页面
	}
});
  1. $.post
$.post("URL",{参数名:值},
	function(text){
	更新页面
	}
);
  1. $.get
$.get("URL?参数",
function(text){
...
});

使用JQuery的ajax方法

$(function(){
			//设置点击事件
			$("#test").click(function(){
				//使用ajax方法连接服务器
				/* $.ajax({type:"POST",data:{username:"李四"},url:"ajax.do",
					success:function(text){
						//更新页面内容
						$("#test").text("服务器说："+text);
					}
				}); */
				//使用post方法
				/* $.post("ajax.do",{username:"王五"},
						function(text){
							//更新页面内容
							$("#test").text("服务器说："+text);
						}
				); */
				//使用get方法
				$.get("ajax.do?username=赵六",
					function(text){
						//更新页面内容
						$("#test").text("服务器说："+text);
					}
				);
			});
		});

Ajax案例

案例：验证注册用户手机号是否存在
1、在UserDAO、UserService添加手机号是否存在查询方法
2、创建Servlet，接受Ajax传来的手机号，进行查询，将结果用流发送给浏览器
3、在添加用户的页面添加Ajax方法，在手机输入框失去焦点时调用验证。

/**
 * 查询用户电话是否存在
 * @author xray
 *
 */
public class FindUserTelServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req,resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//接受Ajax函数传来的手机号
		String user_tel = req.getParameter("user_tel");
		//调用数据库查询
		UserService service = new UserServiceImpl();
		boolean find = service.findUserTel(user_tel);
		//将结果发送给Ajax
		resp.getWriter().print(find);
	}
}

注册表单

<form action="register.do" method="post" enctype="multipart/form-data">
		<span id="user_tel_msg"></span><br>
		<input name="user_tel" type="text" placeholder="请输入手机号"><br>
		...
	</form>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function(){
			//绑定手机号输入框的失去焦点事件
			$(":text[name='user_tel']").blur(function(){
				//调用post方法
				$.post("findTel.do",{user_tel:$(this).val()},function(text){
					//修改user_tel_msg的文字内容
					if("false" == text){
						$("#user_tel_msg").text("该手机号可以使用").css("color","green");
					}else{
						$("#user_tel_msg").text("该手机号已经存在").css("color","red");
					}
				});
			});
		});
	</script>

内容总结

以上是互联网集市为您收集整理的JavaWeb Ajax详解全部内容，希望文章能够帮你解决JavaWeb Ajax详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/602684.html

来源：【匿名】