本文主要是介绍【旧文】AJAX总结（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
AJAX简介
一、AJAX是什么
在传统的web应用中，用户与应用的每一次交互，都是首先用户通过浏览器向服务器端发送一个 请求，服务器解析这个请求，将相应的响应信息返回给浏览器。在服务器端业务逻辑非常复杂或者需要耗时较长的情况下，浏览器等待刷新时，页面经常是一片空 白，用户只能被动等待服务器端响应完成，在此期间客户不能在页面上做任何操作，带给用户非常糟糕的体验。
在用户只是需要刷新页面一小部分的情况下，传统的web应用需要刷新整个页面，造成网络流量的浪费，也造成响应速度变慢。
2005年，随着AJAX的出现，这种情况得到了改观。
AJAX这个术语是由Adaptive Path公司的Jesse James Garrett的定义的，他说它是Asynchronous Javascript and Xml的简写。AJAX并不是一种技术，它是多种技术的强大组合，它包括：
Ø 基于XHTML和CSS标准的表示；
Ø 使用DOM进行动态显示和交互；
Ø 使用XML和XSLT进行数据交换与处理
Ø 使用XMLHttpRequest与服务器进行异步通信；
Ø 使用JavaScript绑定一切。
在AJAX涉及的这7项技术中，DOM、XML、XMLHttpRequest、JavaScript最为有用。
二、使用AJAX的利弊
使用AJAX，可以为开发人员、终端用户带来可见的便捷：
Ø 减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。
Ø 无刷新更新页面，减少用户心理和实际的等待时间。特别是当读取大量数据的时候，AJAX使用XMLHTTP对象发送请求并获取服务器响应，在不重新载入整 个页面的情况下用Javascript操作DOM最终更新页面。在读取数据的过程中，用户面对的不是白屏，是原来页面的内容，用户可以继续进行其他操作， 只有当数据接收完毕之后才更新相应部分内容。
Ø 带来更好的用户体验。一直以来，B/S程序在用户易操作性、界面友好性上跟C/S相比都有较大的差距，随着AJAX的应用，这种情况将得到较大的改观。
Ø 可以把以前服务器负担的一些工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器的负担。
目前，AJAX仍然有一些缺陷：
Ø AJAX大量使用Javascript和AJAX引擎，这取决于浏览器的支持，而且在不同的浏览器上，提供XMLHttpRequest的方式也不一样，使用AJAX的程序必须测试针对不同浏览器的兼容性。
Ø AJAX更新页面内容时并没有刷新页面，因此，网页的后退功能是失效的，用户无法通过点后退按钮返回到上一个页面。
三、XMLHttpRequest对象
1. XMLHttpRequest对象简介
XMLHttpRequest对象（以下简称XHR对象）是AJAX跟服务器通讯的核心，通 过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次将数据处理的工作都交给服务器来做，这样既 减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XHR对象从IE5.0开始就已经出现了，是作为ActiveX组件的形式提供的；从Mozilla 1.0和Safari 1.2开始，也提供对XHR对象的支持，不过是作为本地JavaScript对象实现的。
2. XHR对象的创建
由于在不同的浏览器里，XHR对象的实现方式不同，为了开发跨浏览器的AJAX应用，XHR对象的创建也必须考虑到不同浏览器的兼容性。
一般的，XHR对象的创建可以通过下面的方式：
3. XHR对象的方法
|
方法 |
描述 |
|
abort() |
停止当前请求 |
|
getAllResponseHeaders() |
作为字符串返问完整的响应头 |
|
getResponseHeader("headerLabel") |
作为字符串返问单个的响应头 |
|
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) |
设置请求的方法, 目标 URL, 和其他参数 |
|
send(content) |
发送请求 |
|
setRequestHeader("label", "value") |
设置header并和请求一起发送 |
在XHR对象的方法中，最常用的也是最重要的是open方法和send方法。
4. XHR对象的属性
|
属性 |
描述 |
|
readyState |
对象状态(integer): 0: 未初始化 1 : 读取中 2 : 已读取 3 : 交互中 4 : 完成 |
|
onreadystatechange |
状态改变的事件触发器 |
|
responseText |
服务器进程返回数据的文本版本 |
|
responseXML |
服务器进程返回数据的兼容DOM的XML文档对象 |
|
status |
服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功" |
|
statusText |
服务器返回的状态文本信息 |
XHR对象的属性，都非常重要，使用的也都非常频繁。
5. 使用XHR对象跟服务器通讯
通讯的服务器端可以是servlet、jsp、asp、php等。
要使用AJAX跟服务器通讯，一般要经过如下的流程或步骤：
1) 用户操作触发Javascript事件的处理函数，在处理函数中首先创建XHR对象；
2) 调用XHR对象的open方法，指定请求的方法、URL、是否异步等；
3) 设置XHR对象的onreadystatechange属性，捕获XHR对象的readyState的改变；
4) 当XHR对象的readyState属性发生改变的时候，会触发onreadystatechange属性指定的函数，在这个函数里，我们根据逻辑编写相应的代码处理。
在使用XHR对象跟服务器通讯的过程中，有几个事项需要注意。
1) 在XHR对象的创建和初始化过程中，要注意兼容不同的浏览器；
2) 指定onreadystatechange属性对应的函数时，函数后不跟括号，也没有参数。
3) XHR对象的open方法和send 方法的使用
open方法的asyncFlag参数（是否异步），默认为true，表示向服务器发送请求后在等待服务器响应返回的时间里，继续执行下面的代码，不必等待服务器返回，服务器响应返回的时候会触发onreadystatechange属性指定的函数。
open方法中，mehtod参数可以是GET、POST、HEAD，最常用的是GET、POST；
method参数是GET时，发送到服务器的参数以名值对的形式跟在URL后面，URL和参数之间用?隔开，不同的参数之间用&隔开（形如url?name1=value1&name2=value2）。send方法的参数则是null
使用GET方法的示例：
open方法中如果method参数是POST，则URL后面不跟参数；同时在调用XHR对象的的send方法前，一定要通过XHR对象的：
setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
方法设置请求头；
请求参数以名值对的形式作为send方法的参数。
使用POST方法的示例：
未完待续……
这篇关于【旧文】AJAX总结（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
