第3.101课 上课 SpringMVC对Ajax异步请求的支持

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服务器端代码

 

 

 

 

 

  5.到依赖jar包