JavaWeb(十一) AJAX + json

1.AJAX

• 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

  

• 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

  

  同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

  异步是指：发送方发出数据后，不等接收方发回响应，接着发送下 个数据包的通讯方式

Ajax的概念: 发送异步请求

JavaScript 编写发送请求的代码, xml(json): "张三,男,21,1001,20"

Ajax的技术的产生 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 局部刷新

Ajax：一种不用刷新整个页面便可与服务器通讯的办法

Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复

在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面

不用刷新整个页面便可与服务器通讯的办法： Flash Java applet 框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面 隐藏的iframe XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

Ajax的核心是JavaScript对象XmlHttpRequest(异步引擎对象)。 该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

Ajax: 异步通信, 局部刷新

核心对象: XMLHttpRequest对象(异步引擎对象)

原生javaScript代码实现Ajax, 创建XMLHttpRequest对象, 不同浏览器,这个对象的创建方式不一样,浏览器的兼容性

Jquery 的Ajax的封装

$.ajax(url,settings)

url: 请求的url

settings: object

data: String/object 客户端请求服务器,请求参数

datatype: 服务器响应给客户端的数据类型

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML                    MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值: 
​
"xml": 返回 XML 文档，可用 jQuery 处理。
​
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
​
"script": 返回纯文本 JavaScript                     代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
​
"**json**": 返回 JSON 数据 。
​
"jsonp": [JSONP](http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/) 格式。使用                     [JSONP](http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/) 形式调用函数时，如                     "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
​
"**text**": 返回纯文本字符串

success(data, textStatus, jqXHR)Function,Array

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。 Ajax 事件。

function (data, textStatus) {
// data 服务器响应的数据
this; // 调用本次AJAX请求时传递的options参数
}

error Function

(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。Ajax 事件

function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}

type String

(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url: 请求的url

ajax请求, 需要后台给的数据,

页面: 转发, 重定向方式

数据: response.getWriter()

2.json

html页面: EL表达式, 域对象这些都失效

html页面: 发送ajax请求, 后台的数据, 通过response的输出流响应给前端

后台的数据是java对象, 需要把java对象转换为json格式的字符串, 再通过response的输出流响应给前端

json格式:

指定格式的字符串

{}: 对象

[]:数组/集合

[{},{},{}]: 对象数组

对象中: "属性名":值 值是字符串,一定要双引号引起, 数值类型,可以省略

属性与属性直接: 使用逗号分割, {"属性名1":值1,"属性名2":值2}

学生类:

public class Student{
private int id;
​
private String name;
​
private String sex;
}

Student stu = new Student(1,"张三","男");
List<Student> list;
​

转换为json格式的字符串:

{"id":1,"name":"张三","sex":"男"}

[{"id":1,"name":"张三","sex":"男"},{"id":2,"name":"李四","sex":"男"},{"id":3,"name":"李思思","sex":"女"}]

{"datas":[{"id":1,"name":"张三","sex":"男"},{"id":2,"name":"李四","sex":"男"},{"id":3,"name":"李思思","sex":"女"}],"totalPage":4,"count":4,"currentPage":1,"pageSize":1}

把java对象转换为json

1. fastJson 阿里的

2. jackson 国外的

3. json-lib 国外的

使用FastJson把java对象转换json:

1.导入fastJson的依赖, 一定要导入最新

 

1. 在代码中使用JSON类的静态方法. toJSONString() 把java对象转换为json格式字符串

2. 使用T JSON.parseObject(String json, Class<T> clazz) 把json格式的字符串转换为java对象

3. 使用List<T> JSON.parseArray(String json, Class<T> clazz)把json格式的字符串转换为List对象

前台: $.getJSON()