企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 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 项。 ![](https://box.kancloud.cn/e6bf8cabeae002363d11ba03cea7ce8b_597x210.png) **使用 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 方法进行全局的处理再传递给请求。