文档介绍：
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 引擎(以 XMLHttpRequest 为核心), AJax 引擎再将请求发送给服务器,服务器回送响应先发给 Ajax 引擎,再由引擎传给浏览器显示 1 、同步交互模式,客户端提交请求,等待,在响应回到客户端前,客户端无法进行其他操作2 、异步交互模型,客户端将请求提交给 Ajax 引擎,客户端可以继续操作,由 Ajax 引擎来完成与服务武器端通信, 当响应回来后, Ajax 引擎会更新客户页面, 在客户端提交请求后, 用户可以继续操作,而无需等待。运行原理图: Ajax 引擎对象异步发送请求给服务器同时接受服务器给予响应使用 js 局部跟新!! 设计对象 XMLHttpRequest 该对象: ajax 引擎对象作用: 及时发送异步请求给服务器及时获取服务器回应数据由 js 实现局部更新!! 该对象客户端的浏览器来创建 ajax 引擎对象.. function(){ var aa= new Object() } 创建该对象浏览器兼容问题: 不同浏览器创建 ajax 引擎方法是不同的!! 创建方式: 3. 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 :对象状态 4. 案例一 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 请求发送状态 012344 表示请求发送完成响应就绪属性 status 服务器发送状态码 200 ok 请求响应 ok 2: 服务器端 servlet 开发接受请求响应数据 ajax 引擎通过 xhr.responseText 可以接受服务器响应数据了!! 测试完成!!! 5. 案例二 post 请求 ajax 异步发送 post 请求: 基于 get 模板几乎一致区分: open("post") send(xx 传递给服务器数据写在这里 key=value) send 之前添加一个头信息 xhr.setRequestHeader("Content-type","application/x-ded"); 其他代码不变!! 客户端向服务器提交数据 get/post 1、 get 方式发送数据 xmlHttp.open("GET","url?key=value"); // 参数已经在 url 上 xmlHttp.send(null); 2、 post 方式发送数据 xmlHttp.open("POST","url"); // 不需要写参数 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-ded"); // pos t 发送参数前,需要设置编码格式 xmlHttp.send("name=xxx&pwd=xxx"); // 发送 post 数据回调函数编写 if(xmlHttp.readyState == 4){ // 判断数据是否正确 if(xmlHttp.status == 200){ // 响应有效...}} 小结: 发送给服务器方式: get 请求 send (null) post 请求需要添加头信息 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-ded"); 6. Ajax 应用场景案例一通过离焦发送 Ajax 请求,验证邮箱是否存在需要掌握: 1: ajax 发送请求的编码流程 2: 回调函数的编写 3: 表单的提交控制页面设计 register.jsp 编写 js 离焦事件发送 ajax 请求给服务器服务器数据库查询... 得到邮箱是否存在.

1