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 }
案例效果截图：
原文：https://www.cnblogs.com/qinqin-me/p/12399188.html