Ajax.

最新推荐文章于 2024-09-17 11:50:15 发布

An ougme ~

最新推荐文章于 2024-09-17 11:50:15 发布

阅读量1k

点赞数

文章标签： eclipse java

本文链接：https://blog.csdn.net/LY3054404567/article/details/123928367

版权

Ajax

1、什么是ajax?
2、为什么我们需要Ajax？
3、案例演示

1、什么是ajax?

Ajax = 异步 JavaScript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

Ajax实际上是下面这几种技术的融合：

XHTML和CSS的基于标准的表示技术
DOM进行动态显示和交互
XML和XSLT进行数据交换和处理
XMLHttpRequest进行异步数据检索
Javascript将以上技术融合在一起

简单理解Ajax：只刷新局部页面的技术

CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果
JavaScript：更新局部的网页

2、为什么我们需要Ajax？

客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

3、案例演示

对账号可以注册的判断：
页面代码：

<body>
	<div>
		<div>
			账号：<input type="text" name="uname" id="name"/>
			<span id="sname"></span>
		</div>
		<div>
			密码：<input type="password" name="pwd" id="pwd"/>
		</div>
		<button>注册</button>
	</div>
</body>

JavaScript里面的代码：
写法1：

	 $(function(){
		 // 1.给账号文本框添加失去焦点事件
		 $("#name").blur(function(){
			 // 2. 获取用户名
			 var name = $("#name").val();
			 // 3. 向后台发起ajax请求
			 $.post('${pageContext.request.contextPath}/userServlet',{
				 /* name:"ddd"  可以固定值*/
				 name:name
			 },function(str){
				$("#sname").text(str);
			 },'text');/* 这里不是一定要写json,在以后大部分情况下是写json *//* 后台返回到前端的数据是json格式 */
		 })
	 })

写法2：


	 $(function(){
		// 指明了提交方式是get方式，而且前端期望获取的数据类型是json
		 $.getJSON('${pageContext.request.contextPath}/userServlet',{
				name:name
			 },function(str){
				 //将后台返回给前台的数据转换成JSON格式
				 $("#sname").text(str);
			})
		 }) 
	 })

写法3：

$(function(){
	$.ajax({
		 url:'请求路径',
		 data:'请求参数',
		 dataType:'json',// 后台返回给前端的数据格式：html/text/json
		 async:true,// 请求是否异步(默认异步)
		 success:function(){ // 请求成功
			 alert('查询成功');
		 },error:function(){// 请求失败
			  alert('查询失败');
		 }
	 })

数据处理：

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	int i;
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
			req.setCharacterEncoding("utf-8");
			resp.setContentType("text/html;charset=utf-8");
			
			PrintWriter out = resp.getWriter();
			
			// 获取前端提交的参数name
			String name = req.getParameter("name");
			
			// 默认返回给前端的提示语句
			String str = "该账号可以注册";
			
			// 除了admin其它都可以注册
			if (null != name && !"".equals(name)) {
				if ("admin".equals(name)) {
					str = "该账号已经存在，请更换!";
				}else {
					
				}
			}
			
			// 将响应新信息输出/响应到前端
			out.write(str);
			out.flush();
			out.close();
		
	}
}