ajax入门必备.pdf

AJAX 实现原理 AJAX 实现原理 主要内容  AJAX 原理解析  使用XMLHttpRequest 对象  AJAX 发送请求  AJAX 接收回应 1 AJAX 实现原理 1. AJAX 原理解析 之前我们讲过，AJAX 实际是多种技术揉和在一起的综合应用。那么各种不同技术之间 是什么关系，如何配合使用？我们通过完成一个典型的 AJAX 示例揭开这些秘密。 案例：制作用户登录网站，用户输入用户名和密码后验证用户身份是否正确。 特殊要求：为提升用户体验，特要求当用户输入用户名后，立刻对用户名是否存在进行 验证，验证过程中不能刷新页面、不能中断用户的操作。 解析：如果使用非 AJAX 方法，需要为用户名输入框添加 onBlur （焦点失去）事件，在 事件中提交表单，请求后台的验证程序，重新显示页面，同时需要记住上次用户填写的内容 作为输入框的默认值，过程如下图所示： 图 1 非 AJAX 执行过程 在此过程中会发生页面刷新、用户操作被打断等现象降低用户体验，同时刷新后的页面 需要写较多的代码恢复之前用户的输入状态。 采用 AJAX 方法，则可以避免上述的各项缺点，使用 AJAX 的执行过程如下图所示： 图2 AJAX 执行过程 采用 AJAX 后，执行过程有四点重要的不同： 2 AJAX 实现原理 1. 浏览器不直接向服务器发出请求，而是通过 JavaScript 调用 “神奇控件”，由 “神 奇控件”向服务器发出请求。因为浏览器向服务器发出请求（包括点击超链、表单 提交、修改 window.location.href 属性）后必然要刷新页面，现在浏览器不直接发出 请求，也就避免了页面刷新的问题。 2. “神奇控件”异步向服务器发出请求。所谓异步，可以理解为启动了一个子线程进 行请求，这样在发送请求和等待服务器回应的过程中，不会阻塞浏览器的正常浏览 和 JavaScript 代码的执行，用户可以在等待回应的同时继续填写表单或浏览网页其 他内容。 3. 因为不需要整个页面刷新，服务端也不需要返回整个 HTML 页面，只需要返回必须 的数据即可，在本例中，服务器只要返回 “是”或 “否”就能反映出用户名是否存 在，大大减少了服务器的处理负担，也减少了通过网络传输的数据量，提高了效率。 4. 因为请求是异步发出的，所以浏览器中的JavaScript 不会等待服务器端返回数据。 而是由 “神奇控件”等待服务器端返回的数据，一旦数据返回， “神奇控件”会通 知 JavaScript ，再由 JavaScript 取出数据并操作 HTML 页面完成功能。 下表列出了 AJAX 操作与常规浏览器请求操作的不同特性： 不同点 常规操作 AJAX 操作 是否刷新 刷新页面 不刷新页面 用户操作 中断，等待新页面下载后继续 不中断 服务器返回整个新页面（包括 HTML 性能