3_101
SpringMVC对Ajax异步请求的支持
异步请求概念
Ajax异步请求介绍
AJAX: Ansyc Javascript And Xml (异步请求).
异步是指基于Ajax的应用与服务器通信的方法。对于传统的Web应用，每次用户发送请求或向服务器请求获得新数据时，浏览器都会完全丢弃当前页面，而等待重新加载的页面。在服务器完全响应之前，用户浏览器将是一片空白，用户的动作必须中断。异步是指用户发送请求后，完全无须等待，请求在后台发送，不会阻塞用户的当前活动，用户无须等待第一次请求得到完全响应，就可以立即发送第二次请求。简单的说,异步请求不会刷新当前html页面。
异步指的是服务器端响应数据的获取方式。
同步：
异步：
XMLHttpRequest异步请求
异步&同步的区别
1.同步请求：
请求的过程：浏览器(当前的html页面会丢弃) ---> http协议 ---> Web服务器(tomcat)
响应的过程：Web服务器(tomcat) ---> http协议 --> 返回一个新html页面.
2.异步请求：
请求的过程：浏览器(当前的html页面不会丢弃) ---> Ajax引擎(http协议) ---> Web服务器(tomcat)
响应的过程：Web服务器(tomcat) ---> 准备部分数据 --> Ajax引擎(http协议) --> DOM编程.
异步表现为网页局部刷新
同步表现为网页全部刷新
发送异步请求的步骤
1.创建发送异步请求的Ajax引擎对象
XMLHttpRequest：内置函数 (msie8+、firefox、chrome、opera).
var xhr = new XMLHttpRequest();
// msie7-
ActiveXObject: 内置函数
var xhr = new ActiveXObject("浏览器的版本号");
2.调用xhr对象中的方法建立服务器的之间连接
// 第一个参数：请求方式(get|post)
// 第二个参数：请求URL
// 第三个参数：异步还同步。true: 异步请求中的异步；false: 异步请求中的同步. (主要是响应数据)
xhr.open("post|get", "请求的url", true|false);
3.发送异步请求
xhr.send();
4.获取响应数据
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ // 读取服务器端的响应数据完成
if (xhr.status == 200){ // 代表服务器响应正常
// 获取响应文本
xhr.responseText;
}
}
};
readyState的五种状态：
0：XMLHttpRequest对象还没有完成初始化。
1：XMLHttpRequest对象开始发送请求。
2：XMLHttpRequest对象的请求发送完成。
3：XMLHttpRequest对象开始读取服务器的响应。
4：XMLHttpRequest对象读取服务器响应结束。
status的状态码：
200：服务器响应正常。
400：无法找到请求的资源。
401：访问资源的权限不够。
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误。
jQuery框架的异步请求和处理
$.ajax()
jQuery核心异步请求方法：
格式:
$.ajax(url, [settings]);
-- 第一个参数：请求URL
-- 第二个参数：settings是一个json格式js对象(异步请求设置对象).
$.ajax({
url : "", // 请求URL
type : "get|post", // 发送请求的方式
data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},{key:value,key:value}]", // 请求参数
dataType : "text|html|xml|json|script|jsonp", // 服务器端响应回来的数据类型
async : true|false, // 异步还是同步
success : function(data){ // 异步请求成功需要回调的函数
// data : 响应数据(jquery已经处理好的响应数据)
},
error : function(XMLHttpRequest, textStatus, errorThrown){ // 异步请求的失败
// XMLHttpRequest : 异步请求的核心函数
// textStatus : 文本状态
// errorThrown : 错误原因
}
});
$.get()
//发送get请求
$.get(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);
说明：
第1个参数：请求URL
第2个参数：请求参数
第3个参数：回调函数
第4个参数：服务器端响应回来的数据类型
$.post()
//发送post请求
$.post(url, data, function(data, status){
// status(状态码): success 、error
// data : 响应数据
}, dataType);
说明：
第1个参数：请求URL
第2个参数：请求参数
第3个参数：回调函数
第4个参数：服务器端响应回来的数据类型
springMVC支持ajax异步请求和处理返回json数据
1.在页面引入jquery.js
2.创建页面元素
3.定义异步提交表单
4.springmvc服务器端代码
