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:异步校验
案例分析
-
- 失去焦点时,使用$.post()将用户名username以ajax方式发送给服务器
-
- 服务器获得用户名,并通过用户名查询用户
- 若用户名存在,返回不可用提示
- 若用户名不存在,返回可用提示
-
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,并控制提示信息显示和按钮是否可用