一、Ajax概述
1.1 什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。而传统的页面（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
1.2 Ajax常见的应用场景
百度的搜索框：
用户注册时：
1.3 同步交互与异步交互
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。刷新的是整个页面
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。可以使用js接收服务器的响应，然后使用js来局部刷新
1.4 AJAX的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎就会提交请求到服务器端。在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面的功能。
如图：
1.1 使用JavaScript获得浏览器内置的Ajax引擎（XMLHttpRequest对象）
1.2 通过Ajax引擎确定请求路径和请求参数
1.3 通知Ajax引擎发送请求
Ajax引擎会在不刷新浏览器地址栏的情况下，发送请求
2.1 服务器获得请求参数
2.2 服务器处理请求参数（添加、查询等操作）
2.3 服务器响应数据给浏览器
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面
3.1 通过设置给Ajax引擎的回调函数获得服务器响应的数据
3.2 通过JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新的目的。
1.5 AJAX的优缺点
优点：
- AJAX使用Javascript技术向服务器发送异步请求，增强了用户的体验；
- AJAX无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高，减小了服务器的压力；
缺点：
- AJAX并不适合所有场景，很多时候还是要使用同步交互；
- AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
- 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
二、JavaScript的Ajax技术（了解）
-
创建Ajax引擎对象：var xmlHttp = new XMLHttpRequest();
-
为Ajax引擎对象绑定监听：xmlHttp.onreadystatechange = function(){}
-
绑定提交地址：xmlHttp.open(method, url, async)
method：请求方式，通常为GET或POST url：请求的服务器地址 async：默认值为true，表示异步请求 -
发送请求
POST请求：xmlHttp.send("username=zhangSan&password=123") GET请求：xmlHttp.send()
注意：如果是POST请求，在发送请求前设置请求头:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
如果是GET请求，可以不用设置请求头。 -
接收响应数据
var content = xmlHttp.responseText——得到服务器响应的文本格式内容 var content = xmlHttp.responseXML——得到服务器响应的xml响应内容，它是Document对象
【测试】
<script type="text/javascript"> function fn1(){ //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 var xmlHttp = new XMLHttpRequest(); //2、绑定监听 ---- 监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5、接受相应数据 var res = xmlHttp.responseText; document.getElementById("span1").innerHTML = res; } } //3、绑定地址 xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true); //4、发送请求 xmlHttp.send(); } function fn2(){ //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象 var xmlHttp = new XMLHttpRequest(); //2、绑定监听 ---- 监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5、接受相应数据 var res = xmlHttp.responseText; document.getElementById("span2").innerHTML = res; } } //3、绑定地址 xmlHttp.open("POST","/WEB22/ajaxServlet",false); //4、发送请求 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("name=wangwu"); } </script> </head> <body> <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span> <br> <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span> <br> <input type="button" value="测试按钮" onclick="alert()"> </body>
三、Jquery的Ajax技术（重点）
- $.get(url, [data], [callback], [type])
url：代表请求的服务器端地址 data：代表请求服务器端的数据 callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行） type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）function fn1(){ //get异步访问 $.get( "/WEB22/ajaxServlet2", //url地址 {"name":"张三","age":25}, //请求参数 function(data){ //执行成功后的回调函数 //{"name":"tom","age":21} alert(data.name); }, "json" ); }
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); } }
- $.post(url, [data], [callback], [type])
function fn2(){ //post异步访问 $.post( "/WEB22/ajaxServlet2", //url地址 {"name":"李四","age":25}, //请求参数 function(data){ //执行成功后的回调函数 alert(data.name); }, "json" ); }
- $.ajax( { option1:value1,option2:value2... } );
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" }); }