# 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