16-AJAX_课程笔记

1、.AJAX学习目标 Asynchronous JavaScript And XML/JSON前台和后台异步交互的一门技术 1:ajax运行原理2:ajax 编程步骤3:ajax 应用案例1. AJAX介绍AJAX ： 异步 javascript和 XML AJAX ：带来用户体验改变，是web优化一种主要手段 AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象 2. AJAX产生的背景传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHt

2、tpRequest为核心），AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示 1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作 2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。 运行原理图: Ajax 引擎对象 异步发送请求给服务器 同时接受服务器给予响应 使用js 局部跟新!设计对象 XMLHttpRequest 该对象 : ajax 引擎对象 作用: 及时发送异

3、步请求给服务器 及时获取服务器回应数据 由js 实现局部更新!该对象客户端的 浏览器来创建ajax 引擎对象. function() var aa = new Object()创建该对象 浏览器兼容问题: 不同浏览器创建ajax 引擎 方法是不同的! 创建方式:3. Ajax编程快速入门步骤:(ajax 开发步骤固定的)1.创建ajax引擎对象 XMLHttpRequest对象 浏览器创建 兼容问题 (火狐 chrome safari 一样) IE 不一样! 来自 w3cschool手册自己页面 创建该对象 封装js 引入外部js 脚本 测试不同浏览器 是否获取该对象简化获取xhr 对象的代码

4、 封装到js 脚本中 脚本内容:目标页面引入该脚本即可2.将状态触发器绑定到一个函数3.使用open方法建立与服务器的连接4.send()向服务器端发送数据5.在回调函数中对返回数据进行处理获取核心对象可以参考w3cSchool 手册代码案例XMLHttpRequest 核心对象方法： open() send() 属性： onreadystatechange ：状态回调函数responseText/responseXML ：服务器的响应字符串status：服务器返回的HTTP状态码readyState ：对象状态4. 案例一 get 请求 ajax 异步发送get请求: 应用场景演示get 请

5、求: 点击按钮,将用户输入文本数据 发送请求给服务器. 服务器回送一个简单类型的数据给ajax 引擎 get.jsp 输入参数之后 点击按钮 数据异步发送给服务器 查看浏览器地址不会变化!ajax 引擎 接受服务器端回送数据 使用js div标签显示提示信息! 2: ajax 发送请求 点击事件 发送ajax 请求注意: xhr 相关属性 和 方法作用 open() 建立连接和请求方式以及异步还是同步 三个参数 一般开发就2个参数 最后参数true默认不写!send() 发送请求 : send(null)-get send(xxxx)-post属性 onreadystatechange 属性事

6、件和匿名函数绑定 形成回调函数 该函数 服务器响应完成200 通过js 操作页面局部更新 属性 responseText xhr 获取服务器响应字符类型数据 属性 responseXML xhr 接受服务器端回送xml 数据 text/xml response.setContextType(text/xml;charset=utf-8)属性 readyState 表示ajax请求发送状态 0 1 2 3 4 4表示请求发送完成 响应就绪 属性 status 服务器发送状态码 200 ok 请求 响应ok 2: 服务器端servlet 开发 接受请求 响应数据 ajax引擎 通过 xhr.res

7、ponseText 可以接受服务器响应数据了!测试完成!5. 案例二post 请求 ajax 异步发送post请求: 基于get 模板 几乎一致 区分: open(post) send(xx传递给服务器数据写在这里key=value) send 之前 添加一个头信息 xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded); 其他代码不变! 客户端向服务器提交数据 get/post1、get方式发送数据xmlHttp.open(GET,url?key=value); / 参数已经在url上xmlHttp.send(

8、null); 2、post方式发送数据xmlHttp.open(POST,url); / 不需要写参数xmlHttp.setRequestHeader(CONTENT-TYPE,application/x-www-form-urlencoded); / post发送参数前，需要设置编码格式xmlHttp.send(name=xxx&pwd=xxx); / 发送post数据 回调函数编写 if(xmlHttp.readyState = 4)/ 判断数据是否正确if(xmlHttp.status = 200)/ 响应有效.小结:发送给服务器方式:get 请求 send(null)post请求 需要

9、添加头信息 xmlHttp.setRequestHeader(CONTENT-TYPE,application/x-www-form-urlencoded);6. Ajax应用场景 6.1. 案例一通过离焦发送Ajax请求，验证邮箱是否存在 需要掌握: 1: ajax 发送请求的编码流程 2: 回调函数的编写 3: 表单的提交控制页面设计 register.jsp编写 js 离焦事件发送ajax请求给服务器 服务器数据库查询.得到邮箱是否存在. 后台代码设计添加错误信息提示 标签 存在问题!注意 response.getWriter().print() 换行! 输出字符串 如果前台js 需要比

10、较 切记 不可以添加ln 换行.控制表单的提交的控制添加表单校验 声明全局变量回调函数 修改validEmailFlag值 表单添加属性 Onsubmit=return validForm()6.2. 案例二案例之商品信息的明细显示 1: product.jsp 异步发送请求到服务器 抓取数据更新页面局部表格! 2: js 发送ajax onchange 事件 一般用于select 标签! 3: 编写后台servlet 抓取数据 函数数据 给ajax 引擎 response.getWriter 三层结构 数据库查询给定商品信息 封装 List servlet - 转发给tab.jsp (res

11、ponse输出流 )表格数据 发送ajax 引擎 servlet 职责: 接受请求 调用业务层 完成具体的业务 响应客户端 查询商品数据转发tab.jsp 页面响应! tab.jsp 底层 servlet 通过输出流 数据 发送 ajax 引擎对象 js 使用 xhr.responseText 接受到数据! 页面片段! 测试效果: 6.3. 案例三服务器响应json数据6.3.1. 什么是json数据格式.前台和后台一种轻量级数据交互格式 字符串 客户端 请求 和 服务器响应 通过字符串进行交互的!字符串具有一定数据格式! 既可以让服务器端 java 对象转换成 字符串 也可以 让前端js 可

12、以识别 把这种字符串格式: json 字符串!java 对象 -json 字符串key:value,key1:value1 -特定字符串 传递给ajax 引擎 -xhr.responseText-字符串 通过js函数eval()解析该字符串 -js对象 使用 dom技术 ! json 传输的数据格式: 1:上海,2:北京 javabean 对象上海,北京,深圳,厦门 数组对象, List 集合问题: 如何将java 不同对象 转换 json 字符串! 6.3.2. json-lib说明以及引用1:json-lib 2:flex-json 技术 作用: javabean 对象 转换json 字符

13、串个数.百度: json 英文网站 json 字符解析技术 -json-lib -下载相关jar 6个! 下发分层管理 json 6 个jar 包 导入lib 目录6.3.3. json改写商品明细显示案例导入该6个jar 改写案例2 采用json 传输方式完成页面数据显示1: 导入jar2: servlet 数据库查询 封装List 注意事项 格式转换 使用对象JSONArray 测试之后 发现 ajax引擎收到了 3: 集合对象List 解析 json 数组字符串 纯数据发送给ajax 网络传输数据只有 有效数据 没有页面样式文件 标签文件.大大减少网络传输和带宽. eval() 函数解析 DOM 技术 动态显示数据到指定表格中 表头的生成! 4: ajax 引擎 解析具有json格式字符串 转换成js 对象 -dom 技术 完成表格数据动态显示. 完成!eval()函数的说明为什么要 eval这里要添加 “(+data+);/”呢？加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的