ajax

最新推荐文章于 2022-06-19 13:50:53 发布

半生瓜321

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量109

点赞数

分类专栏：后端电商网站 JDBC

本文链接：https://blog.csdn.net/qq_42777918/article/details/89527938

版权

后端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

电商网站

11 篇文章 0 订阅

订阅专栏

JDBC

5 篇文章 1 订阅

订阅专栏

AJAX

简介

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分更新，二不同于传统网页需要重新加载整个网页才能更新内容。
AJAX = 异步的JavaScript+XML，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。

原理分析

在这里插入图片描述

1.使用JavaScript获得浏览器内置的AJAX引擎（XMLHTTPRequest对象）
2. 通过AJAX引擎确定请求路径和请求参数
3. 通过AJAX引擎发送请求（在不刷新地址栏的情况下发送请求）

4. 服务器获得请求参数
5. 服务器servlet-sevice-dao等处理请求
6. 服务器相应数据给浏览器
 
7. AJAX获得服务器相应的数据
8. 通过执行JavaScript的回调函数将数据传递给浏览器页面
9. 使用JavaScript在指定的位置显示相应数据，从而局部修改页面的数据。

$.post()和 $.get()方式发送ajax请求

$.post() 以post方式发送ajax
格式： jQuery.post(url.[data],[callback],[type])
url：请求的路径
data : 请求参数
callback：回调函数
type：返回内容格式，xml、html、script、json、text
$ .get()以get请求方式发送ajax
格式：处理请求方式不同，使用方式和$.post()完全一致
测试：

jquery_ajax.html前端文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">


	function fn1(){
		//get异步访问
		$.get(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"张三","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				//data是返回的值{\"name\":\"tom\",\"age\":21}
				alert(data.name);
			},
			"json"
		);
	}
	function fn2(){
		//post异步访问
		$.post(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"李四","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				alert(data.name);
			},
			"json"
		);
	}
	function fn3(){
		$.ajax({
			url:"/WEB22/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});
	}
</script>

</head>
<body>
	<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
	<br>
</body>
</html>

Servlet文件

public class AjaxServlet2 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
		System.out.println(name+"  "+age);
		
		
		//java代码只能返回一个json格式的字符串
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

案例1：异步校验

案例分析

在这里插入图片描述

1. 失去焦点时，使用$.post()将用户名username以ajax方式发送给服务器
1. 服务器获得用户名，并通过用户名查询用户
- 若用户名存在，返回不可用提示
- 若用户名不存在，返回可用提示
3.根据服务器相应的json数据，控制提示信息的显示和提交的按钮是否可用

案例实现

搭建环境

步骤1：创建项目，导入页面
步骤2：导入jar包
步骤3：复制工具类
步骤4：数据库及表
5：编写javaBean

服务端程序

步骤1：编写servlet，获得用户名查询是否存在，并返回json数据
步骤2：编写service
步骤3:编写dao，提供fidByName()方法

浏览器JS

步骤1：修改提示信息显示区域
步骤2：给按钮添加id属性，并设置禁用，使用bootstrap的样式显示禁用效果。
步骤3：编写js，当input失去焦点，发送ajax，并控制提示信息显示和按钮是否可用

半生瓜321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

AJAX简介AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分更新，二不同于传统网页需要重新加载整个网页才能更新内容。AJAX = 异步的JavaScript+XML，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。原理分析1...
复制链接

扫一扫

专栏目录