16-AJAX_笔记教程方案.docx

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 模板几乎一致区分: open(post) send(xx传递给服务器数据写在这里key=value) send 之前添加一个头信息xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);其他代码不变!!客户端向服务器提交数