# AJAX
## 什么是 AJAX
**AJAX**：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 最大的优点就是在不重新加载整个页面的情况下面，可以与服务器进行数据交互完成页面的局部刷新（更新）
AJAX 是不需要浏览器插件的，只要浏览器允许运行 Javascript 脚本就可以。
> 简单的理解 AJAX 就是：浏览器通过 JavaScript 向 WEB 服务器发送（带参数的）请求，Servlet 获取请求参数处理业务逻辑，返回处理结果数据（有的时候是处理标志，有的时候是结果集 List）,通过 success 回调函数进行数据解析（DOM 解析）
虽然是异步的 JavaScript 和 XML，但是现在 AJAX 运用 JSON 是个主流。
由于 XM L的结构过于复杂而且同样的业务数据量，占用的文件也大，不利于网络的传输，所有使用 JSON 越来越多。
## 什么是 JSON
JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
### JSON 语法
在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：
* 对象表示为键值对
* 数据由逗号分隔
* 花括号保存对象
* 方括号保存数组
**JSON 键/值对**
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：
`{"firstName": "John"}`
这很容易理解，等价于这条 JavaScript 语句：
`{firstName : "John"}`
**JSON 与 JS 对象的关系**
> JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
如
~~~
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
~~~
**JSON 和 JS 对象互转**
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
~~~
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
~~~
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
~~~
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
~~~
**表示对象**
示例：
~~~
{"firstName": "Brett", "lastName": "McLaughlin"}
~~~
**表示数组**
~~~
{
"people":[
{
"firstName": "Brett",
"lastName":"McLaughlin"
},
{
"firstName":"Jason",
"lastName":"Hunter"
}
]
}
~~~
在这个示例中，只有一个名为 people的变量，值是包含两个条目的数组，每个条目是一个人的记录，其中包含名和姓。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示更过多的值（每个值包含多个记录）。
## 如何使用 AJAX
最原始的 AJAX 使用，是需要根据客户端浏览器不同的厂商进行判断后，定义 AJAX 对象的。
但是，现在一般都会使用第三方的框架去实现 AJAX，比如 jQuery 中的 $.ajax() 方法。
相关参数的解释：http://www.w3school.com.cn/jquery/ajax_ajax.asp
**重要参数包括**：url/async/dataType/data/type/success
- **url**：
类型：String
默认值: 当前页地址。发送请求的地址。
- **contentType**
类型：String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
- **async**：
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
- **dataType**：
类型：String
预期服务器返回的数据类型。如果不指定，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 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
* "text": 返回纯文本字符串
- **data**：
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
- **type**：
类型：String
默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
- **success**：
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
示例
~~~
$.ajax({
url : "/UpdateAjaxServlet",
async:false,
dataType : "json",
data : toData,
type:"post",
success : function(data) {
if (data.result == "success") {
alert(data.msg);
initData($cp);
}
}
});
~~~
**使用控制台观察AJAX请求**
使用 chrome 浏览器，F12 开发人员工具，打开 network 标签中的 xhr 项。
**使用 Servlet 返回 JSON 格式的请求**
使用 jackson 进行对象到 JSON 的转换。
导入3个 jar 包：jackson-annotations-2.8.9.jar jackson-core-2.8.9.jar jackson-databind-2.8.9.jar
下载地址：http://www.ntqingniao.com/zc/j96/jackson.rar
对象到JSON字符串的转换代码
~~~
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
String cp = request.getParameter("currentPage");
Pager pager = new Pager(cp);
studentService.pageQuery(pager);
ObjectMapper mapper = new ObjectMapper();
String rsJson = mapper.writeValueAsString(pager);
response.getWriter().print(rsJson);
}
~~~
## 你还需要知道的知识点
### 同步和异步
同步和异步的概念对于很多人来说是一个模糊的概念，是一种似乎只能意会不能言传的东西。其实我们的生活中存在着很多同步异步的例子。比如：你叫我去吃饭，我听到了就立刻和你去吃饭，如果我们有听到，你就会一直叫我，直到我听见和你一起去吃饭，这个过程叫同步；异步过程指你叫我去吃饭，然后你就去吃饭了，而不管我是否和你一起去吃饭。而我得到消息后可能立即就走，也可能过段时间再走。
> 在 AJAX 请求中，默认是异步的，就是碰到 AJAX 请求，程序会直接走到下一段代码，不会等到 AJAX 处理完成后再往下执行，这个在开发中尤其要注意，如果在你的代码中有需要 AJAX 处理的逻辑结果作为后续代码执行的条件时，异步就会产生问题，这时候就要做同步处理，即将 async 属性定义为 false。
>
## 关于 serialize
自学：http://www.w3school.com.cn/jquery/ajax_serialize.asp
> 如果表单中的元素过多，我们可以使用 serialize 方法进行全局的处理再传递给请求。
## 项目源码下载地址
下载地址：http://www.ntqingniao.com/zc/j96/demo1.rar
