目录
任务1 使用原生 JavaScript 发送 Ajax 请求
任务1 使用原生 JavaScript 发送 Ajax 请求
随着互联网的广泛应用，基于 B/S 架构的 Web 应用程序越来越受到推崇。但不可
否认的是，B/S 架构的应用程序在界面效果及操控性方面比 C/S 架构的应用程序差很多，
这也是 Web 应用程序普遍存在的一个问题。
在传统的 Web 应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是
要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这
是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断的刷新页
面。在等待期间，由于新的页面没有生成，整个浏览器将是一片空白，而用户只能继续等待。
对用户而言，只是一种不连续的体验，同时，频繁地刷新页面也会使服务器的负担加重。
Ajax 技术正式为了弥补以上不足而诞生的。Ajax 应用使用 JavaScript 异步发送请求，
不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器响应完成后，
再使用 JavaScript 将响应展示给用户。
使用 Ajax 技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到
干扰。我们在必要的时候可以只更新页面的一小部分，而不用刷新整个页面，即“”无刷新“”
技术。如图 6.1 所示，搜狐网首页上的登录功能就使用了 Ajax 技术。输入登录 信息单击
“登录“按钮后，只是刷新登录区域的内容。因为首页上的信息很多，这就避免出现重复
加载、浪费网络资源的现象，提高了加载速度。也是无刷新技术的第一个优势。
图6.1 使用 Ajax 刷新局部页面 图 6.2 Google 地图类似桌面程序的用户体验
再以土豆网为例，在观看视频的时候，我们可以在页面上单击其他按钮执行操作。
由于只是局部刷新，视频可以继续播放，不会受到影响。这体现了无刷新技术的第二个
优势：提供连续的用户体验，而不被页面刷新中断。
最后看一下 Goole 地图的例子。由于采用了无刷新技术，我们可以实现一些以前
B/S 程序很难做到的事情，即图 6.2 中 Goole 地图提供的拖动、放大、缩小等操作、
Ajax 强调的是异步发送用户请求，在一个请求的服务器响应还没返回时，可以再次发
送请求。这种发送请求的模式可以使用户获得类似桌面程序的用户体验。
思考
问题：传统的 Web 开发技术和 Ajax 技术有什么区别？
解答：无论使用哪种开发技术，流程都是先由客户发送 HTTP 请求，然
后由服务器对请求生成响应。但传统的 Web 开发技术和 Ajax 技术之间还
是存在很多差异的。
差异1：发送请求方式不同。
传统 Web 应用通过浏览器发送请求，而 Ajax 技术则是通过 JavaScript 的
XMLHttpRequest 对象发送请求。
差异2：服务器响应不同。
针对传统 Web 应用，服务器的响应时一个完整的页面，而采用 Ajax 技术后，
服务器的响应只是需要的数据。
差异3：客户端处理的响应方式不同。、
传统的 Web 应用发送请求后，浏览器将等待服务器响应完成后重新加载整
个页面。而采用 Ajax 技术后，浏览器不再专门等待请求的响应，而只是通过
JavaScript 动态更新页面中需要更新的部分。
图 6.2 Google 地图类似桌面程序的用户体验
6.1.1 认识 Ajax
从前面的介绍中我们已经知道，使用 Ajax 技术可以通过 JavaScript 发送请求到服
务器，在服务器响应结束后，根据返回结果可以只更新局部页面，以提供连续的客户体
验，那么什么是 Ajax 呢？
Ajax (Asynchonous JavaScript and XML)并不是一种全新的技术，而是由JavaScript 、
XML、CSS等几种现
最低0.47元/天 解锁文章
8314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
