16-AJAX_课程重点笔记.docxVIP

AJAX 学习目标 Asynchronous JavaScript And XML/JSON 前台和后台异步交互一门技术 1:ajax运行原理 2:ajax 编程步骤 3:ajax 应用案例 AJAX介绍 AJAX ： 异步 javascript和 XML AJAX ：带来用户体验改变，是web优化一个关键手段 AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象 AJAX产生背景 传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为关键）， AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示 1、同时交互模式，用户端提交请求，等候，在响应回到用户端前，用户端无法进行其它操作 2、异步交互模型，用户端将请求提交给Ajax引擎，用户端能够继续操作，由Ajax引擎来完成和服务武器端通信，当响应回来后，Ajax引擎会更新用户页面，在用户端提交请求后，用户能够继续操作，而无需等候 。 运行原理图: Ajax 引擎对象 异步发送请求给服务器 同时接收服务器给响应 使用js 局部跟新!! 设计对象 XMLHttpRequest 该对象 : ajax 引擎对象 作用: 立即发送异步请求给服务器 立即获取服务器回应数据 由js 实现局部更新!! 该对象用户端 浏览器来创建ajax 引擎对象.. function(){ var aa = new Object() } 创建该对象 浏览器兼容问题: 不一样浏览器创建ajax 引擎 方法是不一样!! 创建方法: Ajax编程快速入门步骤:(ajax 开发步骤固定) 1.创建ajax引擎对象 XMLHttpRequest对象 浏览器创建 兼容问题 (火狐 chrome safari 一样) IE 不一样! 来自 w3cschool手册 自己页面 创建该对象 封装js 引入外部js 脚本 测试不一样浏览器 是否获取该对象 简化获取xhr 对象代码 封装到js 脚本中 脚本内容: 目标页面引入该脚本即可 2.将状态触发器绑定到一个函数 3.使用open方法建立和服务器连接 4.send()向服务器端发送数据 5.在回调函数中对返回数据进行处理 获取关键对象能够参考w3cSchool 手册代码案例 XMLHttpRequest 关键对象~ 方法： open() send() 属性： onreadystatechange ：状态回调函数 responseText/responseXML ：服务器响应字符串 status：服务器返回HTTP状态码 readyState ：对象状态 案例一 get 请求 ajax 异步发送get请求: 应用场景演示get 请求: 点击按钮,将用户输入文本数据 发送请求给服务器... 服务器回送一个简单类型数据给ajax 引擎 get.jsp 输入参数以后 点击按钮 数据异步发送给服务器 查看浏览器地址不会改变! ajax 引擎 接收服务器端回送数据 使用js div标签显示提醒信息!! 2: ajax 发送请求 点击事件 发送ajax 请求 注意: xhr 相关属性 和 方法作用 open() 建立连接和请求方法和异步还是同时 三个参数 通常开发就2个参数 最终参数true默认不写!! send() 发送请求 : send(null)--get send(xxxx)--post 属性 onreadystatechange 属性事件和匿名函数绑定 形成回调函数 该函数 服务器响应完成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.responseText 能够接收服务器响应数据了!! 测试完成!!! 案例二post 请求 ajax 异步发送post请求: 基于get 模板 几乎一致