前后端分离之Ajax入门
一、概念
Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
传统传统的Web应用模式和 ajax方式的比较：
传统的web应用：请求提交的时候,提交的是整个表单，服务端返回的时候，也是返回整个页面（刷新）
ajax方式：提交请求的时候只把某些数据提交（可以不用表单），服务端也只返回特定的数据
2.
Ajax 应用的特点
- 不刷新整个页面,在页面内与服务端通迅
- 使用异步方式和服务端通迅
- 大部分交互都在页面内完成
Ajax 技术组成
XMLHttpRequest：用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，发送和获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容，所有的现代浏览器都支持这个对象。
javascript：一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现的不再是简单的静态信息，而是实时的内容更新。
HTML：超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言。
json(曾经使用XML)：将结构化数据表示为 JavaScript 对象的标准格式，是一种轻量级数据交换格式，而XML较为复杂
二、XMLHttpRequest 实现ajax
-
准备好服务端程序（tomcat）
java@WebServlet("/UserServlet") public class UserServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8");//设置结果集 response.getWriter().print("这是服务端的数据:"+LocalDateTime.now());//向浏览器发送数据 } } -
客户端程序
步骤：
- 创建 XMLHttpRequest对象, 直接new就可以
- 要指定回调函数
- 调用它的open方法,指明提交方式,提交地址,及数据
- 调用它的send方法,发送请求
- 在回调函数中进行相应的处理
html<script src="js/jquery-1.8.0.js"></script> <script> var xmlhttp; function test(){ //创建 XMLHttpRequest对象 xmlhttp = new XMLHttpRequest(); //要指定回调函数 xmlhttp.onreadystatechange=mystatechange; //调用open方法 xmlhttp.open("get","UserServlet",null); //调用send xmlhttp.send(null); } function mystatechange(){ //alert(xmlhttp.readyState); if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ // alert(xmlhttp.responseText); document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText; } } } </script> <body> <button onclick="test()">测试</button> <label id="lbl_msg"></label> </body> -
readyState状态码
0 --> UNSENT
-- XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
1 --> OPENED
-- open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，可以调用 send() 方法来发起请求。
2 --> HEADERS_RECEIVED
-- send() 方法已经被调用，并且头部和状态已经可获得。
3 --> LOADING
-- 响应体部分正在被接收。如果
responseType属性是"text"或空字符串，responseText将会在载入的过程中拥有部分响应数据。4 --> DONE
-- 请求操作已经完成。这意味着数据传输已经彻底完成或失败。
三、使用jQuery实现ajax
四种实现方式：
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法 - 常用
-
load()：请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。
html<script src="js/jquery-1.8.0.js"></script> <script> //load(url,data,callback) /* url：异步请求的地址 data：异步请求的数据 如果省略请求数据的话，当前的请求方式为GET 如果发送请求数据的话，当前的请求方式为POST callback - 异步请求成功后的回调函数 */ $(function(){ function mystatechange(){ alert('异步请求成功') } function test(){ $('button').load('UserServlet',mystatechange()) } }) </script> <body> <button onclick="test()">测试</button> </body> -
$.get()：使用get方式向服务器端发送异步请求
html<script src="js/jquery-1.8.0.js"></script> <script> //get(url,data,callback,type) /* url：异步请求的地址 data：异步请求的数据 callback：异步请求成功后的回调函数 type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default */ $(function(){ $("button").click(function(){ $.get("UserServlet",{userName:"admin",password:"123"}, function(data){ alert('异步请求成功'); }); }); }); </script> <body> <button>测试</button> </body> -
$.post()：使用POST方式向服务器端发送异步请求
html<script src="js/jquery-1.8.0.js"></script> <script> //post(url,data,callback,type) /* url：异步请求的地址 data：异步请求的数据 callback：异步请求成功后的回调函数 type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default */ $(function(){ $("button").click(function(){ $.post("UserServlet",{userName:"admin",password:"123"}, function(data){ alert('异步请求成功'); }); }); }); </script> <body> <button>测试</button> </body> -
$.ajax()：是jQuery中最为底层的Ajax方法
html<script> $(function(){ $("button").click(function(){ $.ajax({ type:"post", url:"UserServlet", data:{userName:"admin",password:"123"}, success: function(data){ alert('异步请求成功'); } }); }); }); </script> <body> <button>测试</button> </body>
四、$.ajax([options]) 详解
javascript
$(function(){
$("button").click(function(){
$.ajax({
type:"post", //请求的提交方式,可以是post和get, 大小写不敏感
url:"UserServlet", //请求的地址
data:{userName:"admin",password:"123"}, //提交的数据,前面的key可以用双引号引起来也可以不引
success: function(data){ //回调函数,data 代表服务端返回的数据,data这个名字不是固定的,叫什么都可以
alert(data);
}
});
});
});注：当以post方式提交请求的时候,放在url后面的参数,是可以用的
比如下面的表单:
html
<form action="UserServlet?flag=add" method="post">
<input name="userName">
<input name="password">
<submit >
</form>请求提交以后,服务端能收到 flag, userName,password
但当请求以get的方式提交的时候,放在url后面的参数会被表单中其他的数据覆盖
$.ajax() 其他参数：
- async
- cache
- dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
- contentType //发给服务端的数据,是什么格式
- 回调函数
-
async 是否启用异步,默认是true
javascript$(function(){ $("button").click(function(){ alert("a"); $.ajax({ type:"post", url:"UserServlet", data:{userName:"admin",password:"123"}, success: function(data){ alert("b"); } }); alert("c"); }); }); /* 以上代码的执行顺序有可能是a, b, c；也有可能是a, c, b 原因：默认情况下，async的取值是true，即使用异步的方式提交 想要同步执行，需要设置：async : false */ -
cache 是否缓存
默认值：true，当dataType为script时，默认为false，设置为false将不会从浏览器缓存中加载请求信息
当cache 为true时，浏览器会优先从缓存中取数据，若缓存中存在则直接取出，若不存在会向服务端发送请求。
优点：从缓存中取数据，减少了服务器端的压力
缺点：无法实时更新。如需要获得请求服务器的次数时，客户端完成获取次数，服务器段完成更新次数，会从缓存中直接取数据，不会请求服务器执行增加次数操作
-
dataType 服务端传回来的数据,是什么类型
如：
- xml：返回XML文档。
- html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
- script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
- json：返回JSON数据。
- jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个"?"为正确的函数名，以执行回调函数。
- text：返回纯文本字符串。
-
contentType 发给服务端的数据,是什么格式
默认值：application/x-www-form-urlencoded。这种格式的特点：name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如：url?name=zhangsan&password=123
注：这种形式是没有办法将复杂的 JSON 组织成键值对形式。
-
回调函数
-
success 成功以后调用
-
error 出错的时候调用
-
complete 不管成功,失败,都调用
html$(function(){ $("button").click(function(){ $.ajax({ type:"post", url:"UserServlet?flag=visit", success:function(data){ alert("success调用了"); }, error:function(e){ alert("error 调用了"+e); }, complete:function(){ alert("complete 调用了"); } /* 总结 success 在服务端正确返回的情况下调用 complete 总要调用 error 在出错的时候会调用 (1) 客户端请求写错了,会引起error的调用 (2) 服务端出错了,也会引起error的调用 */ }); }); }); <body> <button>测试</button> </body
-
五、ajax的status状态码
- 1**：请求收到，继续处理
- 2**：操作成功收到，分析、接受
- 3**：完成此请求必须进一步处理
- 4**：请求包含一个错误语法或不能完成
- 5**：服务器执行一个完全有效请求失败
常见状态码：
100------客户必须继续发出请求
101------客户要求服务器根据请求转换HTTP协议版本
200------交易成功
201------提示知道新文件的URL
202------接受和处理、但处理未完成
203------返回信息不确定或不完整
204------请求收到，但返回信息为空
205------服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206------服务器已经完成了部分用户的GET请求
300------请求的资源可在多处得到
301------删除请求数据
302------在其他地址发现了请求数据
303------建议客户访问其他URL或访问方式
304------客户端已经执行了GET，但文件未变化
305------请求的资源必须从服务器指定的地址得到
306------前一版本HTTP中使用的代码，现行版本中不再使用
307------申明请求的资源临时性删除
400------错误请求，如语法错误
401------请求授权失败
402------保留有效ChargeTo头响应
403------请求不允许
404------没有发现文件、查询或URl
405------用户在Request-Line字段定义的方法不允许
406------根据用户发送的Accept拖，请求资源不可访问
407------类似401，用户必须首先在代理服务器上得到授权
408------客户端没有在用户指定的饿时间内完成请求
409------对当前资源状态，请求不能完成
410------服务器上不再有此资源且无进一步的参考地址
411------服务器拒绝用户定义的Content-Length属性请求
412------一个或多个请求头字段在当前请求中错误
413------请求的资源大于服务器允许的大小
414------请求的资源URL长于服务器允许的长度
415------请求资源不支持请求项目格式
416------请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417------服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500------服务器产生内部错误
501------服务器不支持请求的函数
502------服务器暂时不可用，有时是为了防止发生系统过载
503------服务器过载或暂停维修
504------关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505------服务器不支持或拒绝支请求头中指定的HTTP版本