1.Ajax
Ajax(Asynchronous JavaScript And XML)异步的JavaScript（编程语言）和XML（文件格式）。
AJAX不是一门新的编程语言，是多门语言与已有技术组合后创新产生的技术。
核心点:
核心编程语言是JS
数据交换的工具是XML(现在已经被JSON替代)
AJAX是一种异步请求方式
2同步请求与异步请求
使用Ajax需要先在页面导入相应的js文件
<!--引入jquery和MyAjax文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/MyAjax.js"></script>
MyAjax.js
function myAJax(url,data,type,success){ // 1. 创建xhr对象 var xhr; try{ xhr= new XMLHttpRequest(); }catch(e){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器不支持AJAX，请更换！"); return false; } } } // 2. 发起请求 // 2.1 设置请求方式和请求地址 // 2.2 发送数据 if(type.toUpperCase() == "GET"){ xhr.open("get",url+"?"+data); xhr.send(); }else{ xhr.open("post",url); //post方式必须设置Content-Type请求头，必须在open和send方法之前设置 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(data); } // 3. 监听响应 xhr.onreadystatechange= function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //xhr.responseText;//获取响应的字符串 //通过dom操作，将结果显示到页面 //不同情况下，对于 结果字符串 的处理的代码是不同的 success(xhr.responseText); }else{ console.log(xhr.responseText);//获取到异常信息 } } }; }
2 同步请求和异步请求
2.1 同步请求
浏览器发起的传统请求（表单、超链接、地址栏、location.href），都是同步请求。
用户从发起请求开始，到服务端响应结果完毕，这段时间内不能再操作页面。如果服务端响应结果耗时很长，用户在这段时间一直等待，用户体验很差。
同步请求的特点：
-
一定刷新页面
-
地址栏一定改变
-
发起同步请求，会阻塞用户的其它操作
2.2 异步请求
AJAX是一种浏览器端的异步请求技术。
AJAX请求，服务端响应回不是一个完整页面，而是字符串（页面局部），不会刷新页面。
用户在JS发起请求开始，到服务端响应结果完毕，不用等待。用户可以一直操作页面，用户体验好。
异步请求的特点：
-
不刷新页面
-
地址栏不改变
-
异步请求不会阻塞用户的其它操作
3 AJAX开发思路
AJAX技术核心对象是XMLHttpRequest对象，JS通过它和服务端建立连接，交换数据。
4 实战案例：校验用户名是否存在
4.1 同步方式
asynchronousCheckUsername.jsp:
<html> <head> <title>异步请求</title> </head> <body> <form action=""> 用户名: <input type="text" name="username" id=""> <span id="usernameSpan"></span><br> <input type="button" value="校验"> </form> <!--引入jquery.js --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.1.js"></script> <script type="text/javascript"> //通过jquery绑定事件 $(function(){ //进行事件绑定，保证一定在页面加载完毕时执行 $("input:button").click(function(){ //alert("单击了"); //通过ajax发起用户名的校验请求 // 获取到用户名 var usernameVal = $("input[name='username']").val(); // 1. 创建xhr对象 var xhr; try{ xhr= new XMLHttpRequest(); }catch(e){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器不支持AJAX，请更换！"); return false; } } } // 2. 发起请求 // 2.1 设置请求方式和请求地址 xhr.open("get","${pageContext.request.contextPath}/user/asynchronousCheckUsername?username="+usernameVal); // 2.2 发送数据 xhr.send(); // 3. 监听响应 /* xhr.readyState 属性值：0 刚新建xhr，没有open() 1 xhr调用send(),建立连接 2 开始接收到响应 3 正在处理接收的数据 4 接收处理数据完毕*/ /* xhr.onreadystatechange 事件：在readyState属性改变时触发*/ xhr.onreadystatechange= function(){ if(xhr.readyState == 4){ //获取到服务端响应的数据 //xhr.status 表示HTTP状态码 /*200 表示成功 302 表示重定向 404 资源找不到 500 服务器内部异常*/ if(xhr.status == 200){ //xhr.responseText;//获取响应的字符串 //通过dom操作，将结果显示到页面 $("#usernameSpan").html(xhr.responseText); }else{ console.log(xhr.responseText);//获取到异常信息 } } }; }); }) </script> </body> </html>
AsynchronousCheckUsernameAction.java
public class AsynchronousCheckUsernameAction { private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String check() throws InterruptedException, IOException { //校验 //根据结果跳转 // 调用业务层的校验方法 //通过线程休眠，模拟耗时操作 Thread.sleep(5000); //通过流响应结果 HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter pw = response.getWriter(); if("xushy".equals(username)){ pw.print("用户名已存在"); }else{ pw.print("用户名可以使用"); } pw.flush(); //不再跳转 return null; } }
1. 创建xhr对象
var xhr = new XMLHttpRequest();
2. 发起请求
2.1 设置请求方式和请求地址
xhr.open("post",url);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.2 发送数据
xhr.send(data);//data: key=value的数据
3. 监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//请求正确，通过xhr.responseText获取结果字符串
}else{
//通过xhr.responseText获取异常信息
}
}
}
function myAJax(url,data,type,success){
// 1. 创建xhr对象
var xhr;
try{
xhr= new XMLHttpRequest();
}catch(e){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("您的浏览器不支持AJAX，请更换！");
return false;
}
}
}
// 2. 发起请求
// 2.1 设置请求方式和请求地址
// 2.2 发送数据
if(type.toUpperCase() == "GET"){
xhr.open("get",url+"?"+data);
xhr.send();
}else{
xhr.open("post",url);
//post方式必须设置Content-Type请求头，必须在open和send方法之前设置
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
// 3. 监听响应
xhr.onreadystatechange= function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//xhr.responseText;//获取响应的字符串
//通过dom操作，将结果显示到页面
//不同情况下，对于 结果字符串 的处理的代码是不同的
success(xhr.responseText);
}else{
console.log(xhr.responseText);//获取到异常信息
}
}
};
}
-
定义外部js文件myajax.js
- 在页面通过script标签引入，并使用
7 实战案例
7.1 登录
同步请求的流程：
异步请求的流程：
login.jsp -
<html> <head> <title>登录页面</title> </head> <body> <span id="msg" style="color:red"></span> <form action="${pageContext.request.contextPath}/user/login"> 用户名: <input type="text" name="username" id=""> <br> 密码: <input type="password" name="password" id=""> <br> <input type="button" value="登录"> </form> <!-- 引入jQuery和自定义的js文件--> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/myajax.js"></script> <script type="text/javascript"> //为input:button绑定单击事件 $(function(){//保证页面加载完毕后执行 //绑定事件 $("input:button").click(function(){ var usernameVal = $("input[name='username']").val(); var passwordVal = $("input[name='password']").val(); var url = "${pageContext.request.contextPath}/user/login"; var data = "username="+usernameVal+"&password="+passwordVal; var type="post"; myAJax(url,data,type,function(result){ if(result == "success"){ //登录成功，跳转到查询所有 location.href="${pageContext.request.contextPath}/student/showAllStudents"; }else{ //登录失败，回显错误信息 $("#msg").html(result); } }) }) }); </script> </body> </html>
UserAction.java
public class UserAction { private String username; private String password; public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String login() throws IOException { //调用业务层方法 //模拟 HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter pw = response.getWriter(); if("xushy".equals(username) && "123456".equals(password)){ //登录成功 pw.print("success"); }else{ //登录失败 pw.print("用户名或密码错误"); } pw.flush(); return null; } }
同步方式：
异步方式：
