Ajax知识整理
一、Ajax概念和原理介绍
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
以HttpRequest为核心发送请求和接收响应
以JavaScript语言为基础使用XMLHttpRequest
以XML或JSON作为数据交互格式
以HTML和CSS作为数据展现(渲染)
AJAX交互(异步)和传统交互(同步)区别
1.请求的发送和接收
传统：浏览器直接发送HTTP请求，然后由浏览器直接接收服务器返回结果，直接呈现到浏览器页面上。
AJAX：浏览器利用js调用XMLHttpRequest对象发送HTTP请求，然后再利用XMLHttpRequest接收服务器返回结果，然后还需要利用js将结果显示到浏览器页面上。
2.如何区分Ajax请求和传统请求
请求的Header格式不同，Ajax请求会在请求Header部分多一组参数值
x-requested-with:XMLHttpRequest
如果存储该参数可以认为是ajax；不存在就可以认为是传统表单或超链接
3.服务器响应结果不同
传统：服务器一般都会去调用Servlet或JSP生成一个HTML界面给浏览器，然后浏览器显示
ajax：服务器一般都会去调用Servlet处理，然后生成一个JSON或者XML字符串结果给XMLHttpRequest
4.页面刷新不同
传统：整个页面刷新
Ajax：局部刷新
5.同步和异步不同
传统：同步交互模式：请求1--->响应1--->请求2--->响应2
Ajax：异步交互模式：请求1--->请求2--->响应1--->响应2
二、Ajax作用和优点介绍
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
页面可以局部刷新处理，页面不改变，异步请求和响应，使用户操作更连续，提升用户体验感，Ajax交互传输数据量较小，提升程序性能，异步处理，可以进行异步加载和请求处理，减少整个页面刷新的频率
三、Ajax的使用步骤
第一步：创建一个XMLHTTPRequest对象，发送请求，在客户端js中编程
第二步：创建Servlet重写service，接收请求并响应，在服务器端java中编程
四、Ajax案例-使用js配合Servlet单纯的实现ajax(有了JQuery就比这简单多了)
html和js代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <base href="<%=basePath%>"> 5 6 <title>My JSP 'index.jsp' starting page</title> 7 <meta http-equiv="pragma" content="no-cache"> 8 <meta http-equiv="cache-control" content="no-cache"> 9 <meta http-equiv="expires" content="0"> 10 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 11 <meta http-equiv="description" content="This is my page"> 12 <!-- 13 <link rel="stylesheet" type="text/css" href="styles.css"> 14 --> 15 <script type="text/javascript"> 16 function sendRequest(){ 17 //第一步：创建一个XMLHTTPRequest对象 18 var xhr = null; 19 if(window.XMLHttpRequest){ 20 //支持chrom,IE7 8 9 21 xhr = new XMLHttpRequest(); 22 } 23 else{//IE5 6支持 24 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 25 } 26 27 //第二步：创建一个HTTP请求 28 xhr.open("get","hello.do",true); 29 30 //第三步：设置回调处理函数 31 xhr.onreadystatechange = function(){//指定响应函数 32 //判断响应接收状态是否成功，如果成功才进行 33 if(xhr.readyState == 4 && xhr.status == 200){ 34 //获取服务器返回的字符串信息 35 var msg = xhr.responseText; 36 document.getElementById("msg").innerHTML = msg; 37 document.getElementById("msg").style.color = "blue"; 38 } 39 }; 40 41 //第四步：发送ajax请求 42 xhr.send(null); 43 } 44 45 //第五步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示 46 function showMsg(){ 47 setInterval('sendRequest()', 1000); 48 } 49 </script> 50 </head> 51 52 <body> 53 <input type = "button" value = "显示信息" onclick = "showMsg();"> 54 <div id="msg"></div> 55 </body> 56 </html>
Servlet的java代码：
1 package ajaxServlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.util.Random; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 public class AjaxServlet extends HttpServlet{ 13 14 private static final long serialVersionUID = 1L; 15 16 @Override 17 protected void service(HttpServletRequest request, HttpServletResponse response) 18 throws ServletException, IOException { 19 // TODO Auto-generated method stub 20 System.out.println("Ajax请求处理后台输出"); 21 22 //输出消息给前端响应 23 response.setCharacterEncoding("UTF-8"); 24 PrintWriter out = response.getWriter(); 25 Random random = new Random(); 26 out.println("ajax 后台输出"+random.nextInt(100)); 27 out.close(); 28 } 29 }
案例效果截图：
五、JQuery的Ajax案例实现
第一步：引入JQuery的js文件(放在webroot中，可以直接复制进去)
第二步：使用JQuery的Ajax
jQuery.get(url,[data],[callback],[type]);//用于发送get请求
语法：
$.get("请求地址",{请求参数，一般以JSON格式传输}，"回调函数"，"返回数据类型")；
举例：
$.get("login.do",{"username":"张三"，"password":"123"}，function(data){alert(data);},"json");
代码:(Servlet的java代码不变，前端js代码瞬间简单，最后效果一样)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <base href="<%=basePath%>"> 5 6 <title>My JSP 'JQueryAjax.jsp' starting page</title> 7 8 <meta http-equiv="pragma" content="no-cache"> 9 <meta http-equiv="cache-control" content="no-cache"> 10 <meta http-equiv="expires" content="0"> 11 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 12 <meta http-equiv="description" content="This is my page"> 13 <!-- 14 <link rel="stylesheet" type="text/css" href="styles.css"> 15 --> 16 17 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 18 <script type="text/javascript"> 19 /*页面就绪函数，当页面加载时，自动执行，用于测试JQuery文件夹是否引用 */ 20 $(function(){ 21 alert("11"); 22 }); 23 24 //第一步：创建指定响应函数 25 function sendRequest(){ 26 $.get("hello.do",function(data){ 27 document.getElementById("msg").innerHTML = data; 28 document.getElementById("msg").style.color = "blue"; 29 },"text"); 30 } 31 //第二步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示 32 function showMsg(){ 33 setInterval("sendRequest()", 1000); 34 } 35 </script> 36 </head> 37 38 <body> 39 <input type = "button" value = "显示信息" onclick = "showMsg();"> 40 <div id="msg"></div> 41 </body> 42 </html>
jQuery.post(url,[data],[callback],[type]);//用于发送post请求，语法都和$.get一样
jQuery.ajax(url,[settings]);//用于发送ajax请求(既能实现get请求也能实现post请求)
语法：
$.ajax({
url:"请求地址"，
type:"请求类型"，
async:true,//默认为true,表示异步；如果为false，同步
data:{请求参数，一般以JSON格式传输}，//发送到Servlet的数据,如果没有，删除就行了
dataType:"返回数据类型"，//返回数据的数据类型 json | text
success:function(data){//回调成功，前端接收数据的函数
},
error:function(){//回调失败函数
alert("服务器异常");
}
});
举例：
$.ajax({
url:"login.do"，
type:"post"，
async:true,//默认为true,表示异步；如果为false，同步
data:{"username":"张三"，"password":"123"}，//发送到Servlet的数据,如果没有，删除就行了
dataType:"json"，//返回数据的数据类型 json | text
success:function(data){//回调成功，前端接收数据的函数
},
error:function(){//回调失败函数
alert("服务器异常");
}
});
代码:(Servlet的java代码不变，前端js代码瞬间简单，最后效果一样)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <base href="<%=basePath%>"> 5 6 <title>My JSP 'JQueryAjax.jsp' starting page</title> 7 8 <meta http-equiv="pragma" content="no-cache"> 9 <meta http-equiv="cache-control" content="no-cache"> 10 <meta http-equiv="expires" content="0"> 11 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 12 <meta http-equiv="description" content="This is my page"> 13 <!-- 14 <link rel="stylesheet" type="text/css" href="styles.css"> 15 --> 16 17 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 18 <script type="text/javascript"> 19 /*页面就绪函数，当页面加载时，自动执行，用于测试JQuery文件夹是否引用 */ 20 $(function(){ 21 alert("11"); 22 }); 23 24 //第一步：创建指定响应函数 25 function sendRequest(){ 26 /* $.get("hello.do",function(data){ 27 document.getElementById("msg").innerHTML = data; 28 document.getElementById("msg").style.color = "blue"; 29 },"text"); */ 30 $.ajax({ 31 url:"login.do", 32 type:"post", 33 /* async:true,//默认为true,表示异步；如果为false，同步 34 data:{"username":"张三"，"password":"123"},//发送到Servlet的数据,如果没有，删除就行了 */ 35 dataType:"text",//返回数据的数据类型 json | text 36 success:function(data){//回调成功，前端接收数据的函数 37 document.getElementById("msg").innerHTML = data; 38 document.getElementById("msg").style.color = "blue"; 39 }, 40 error:function(){//回调失败函数 41 alert("服务器异常"); 42 } 43 }); 44 } 45 //第二步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示 46 function showMsg(){ 47 setInterval("sendRequest()", 1000); 48 } 49 </script> 50 </head> 51 52 <body> 53 <input type = "button" value = "显示信息" onclick = "showMsg();"> 54 <div id="msg"></div> 55 </body> 56 </html>