JavaWeb10_Ajax

旧城等待， 2022-10-28 03:48 18阅读 0赞

**Ajax**

Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）

AJAX 指的是一种交互方式：异步加载。

客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个⻚面（局部刷新）

**优点：**

1、局部刷新，效率更高  
2、用户体验更好

**使用 JQuery 实现 Ajax**

前端 jsp：

后端：

@WebServlet("/ajaxtest")
    public class ajaxtestServlet extends HttpServlet { 
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		String id = req.getParameter("id");
    		System.out.println(id);
    		try { 
    			Thread.sleep(3000);
    		} catch (Exception e) { 
    			e.printStackTrace();
    		}
    		resp.getWriter().write("Hello, BLU!");
    	}
    
    }

效果展示：  
![在这里插入图片描述][20210205141737631.gif]

--------------------

**Ajax 参数说明**

url：请求的后端服务地址  
type：请求方式，默认 get  
data：请求参数  
dataType：服务器返回的数据类型  
success：请求成功的回调函数  
error：请求失败的回调函数  
complete：请求完成的回调函数（无论成功或者失败，都会调用）

$("#btn").click(function(){ 
    	$.ajax({ 
    		url:'ajaxtest',
    		type:'post',
    		data: 'id=1',
    		dataType: 'text',
    		success: function(data){ 
    			$("#text").before("<span>"+data+"</span><br/>");
    		},
    		error: function(){ 
    			alert("服务器维护中")
    		},
    		complete: function(){ 
    			alert("请求完成")
    		}			
    	})
    	
    });

请求成功的效果展示：  
![在这里插入图片描述][20210205143156502.gif]  
请求失败的效果展示：  
![在这里插入图片描述][20210205143319691.gif]  
**结论：**  
请求成功时先执行success方法，再执行complete，然后渲染DOM  
请求失败时先执行error方法，再执行complete

--------------------

**Ajax 返回JSON示例：**

@WebServlet("/ajaxtest")
    public class ajaxtestServlet extends HttpServlet { 
    	
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
    		User user = new User("BLU", 22);
    		String jsonUser = JSON.toJSONString(user);
    		resp.getWriter().write(jsonUser);
    	}
    
    }

![在这里插入图片描述][20210205150203740.gif]

--------------------

**Ajax 的应用场景**

1、用户名重复校验  
2、省市区三级联动

[20210205141737631.gif]: /images/20221024/ba6382ee6fec4a8d8d9b79bb7a7881ff.png
[20210205143156502.gif]: /images/20221024/356e10c744084658b4a0e5c8be5e5181.png
[20210205143319691.gif]: /images/20221024/78fc745ef81d466c868b6280792ff311.png
[20210205150203740.gif]: /images/20221024/b579b53bd1ec4f0eb9cb3c63cd280812.png