本文详细介绍了AJAX技术，包括其异步工作原理、XMLHttpRequest对象的属性和方法，以及AJAX编程步骤。讲解了AJAX如何与服务器进行数据交互，使用JavaScript动态更新网页内容，避免页面刷新。此外，还讨论了JQuery的AJAX操作，对比了传统方式的不足，并探讨了JSON数据格式在AJAX中的应用。最后，通过实例展示了AJAX在数据动态填充中的应用。
AJAX技术
1.AJAX简介
AJAX - Asynchronous JavaScript and XML(异步的JavaScript 和 XML)。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个网页的情况下。
2.AJAX所包含的技术
大家都知道AJAX并非一种新的技术，而是几种原有技术的结合体，它由下列技术组合而成。
- 使用CSS和HTML来表示。
- 使用DOM模型来交互和动态显示
- 使用XMLHttpRequest来和服务器进行异步通信
- 使用javascript来绑定和调用
AJAX的核心是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE浏览器使用 ActiveXObject ，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
3.AJAX的工作原理
AJAX的工作原理相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像一些数据验证和数据处理等都交给AJAX引擎自己来做。只有确定需要从服务器获取新数据时再有AJAX引擎代为向服务器提交请求。
AJAX和传统方式的区别
传统的Web应用模型
用户点击或触发接口，通过Http协议发送相应请求给服务器，服务器处理，通过Http协议发送响应内容回客户端
AJAX模型
客户端用户点击或触发接口，通过JavaScript调用AJAX引擎，如果请求不需要更新数据，由AJAX代为完成，之后再返回响应给用户，如果请求需要更新数据或其他操作，那么就由AJAX再通过HTTP协议代为发送请求给服务器，服务器处理请求后响应到AJAX,AJAX再响应到服务器。
来看看他们个各自的交互方式：
浏览器的普通交互方式：
浏览器的AJAX交互方式：
在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用AJAX可以完成的功能：
- 动态更新购物车的物品总数，无需用户单机Update并等待服务器重新发送整个页面。
- 提升站点性能，这是通过减少从服务器下载的数据量而实现的。例如：在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32k的数据。如果使用AJAX计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
- 消除了每次用户输入时的页面刷新。例如，在AJAX中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
- 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于AJAX，当用户单机Edit时，可以将静态表格刷新为内容可编辑的表格。用户单机Done之后，就可以发送出一个AJAX请求来更新服务器，并刷新表格，使其包含静态，只读的数据。
4.XMLHttpRequest常用属性
1.onreadystatechange 属性
onreadystatechange属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：
xmlHttp.onreadystatechange = function(){
//我们需要在这里写一些代码
}
2.readyState 属性
readyState属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
| 状态 | 描述 |
|---|---|
| 0 | 请求未初始化（在调用open()之前） |
| 1 | 请求已提出（在调用send()之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
我们要向这个onreadystatechange函数添加一条if语句，来测试我们的响应是否已经完成（意味着可获得数据）：
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
//请求处理完毕，可以获取response数据
}
}
3.responseText属性
可以通过responseText属性来取回由服务器返回的数据。
在我们的代码中，我们将在提示span标签内显示responseText。
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
document.getElementById("tip").innerHTML=xmlHttp.responseText
}
}
其他属性如下
| 属性名 | 描述 |
|---|---|
| onreadystatechange | 状态改变的事件触发器，每个状态改变时都会触发这个事件触发器，通常会调用一个JavaScript函数 |
| readyState | 请求的状态 0-未初始化 1-正在加载 2-已加载 3-交互中 4-完成 |
| responseText | 服务器的响应，返回数据的文本 |
| responseXML | 服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象 |
| responseBody | 服务器返回的主题（非文本格式） |
| responseStream | 服务器返回的数据流 |
| status | 服务器的Http状态码（如404,200） |
| statusText | 服务器返回的状态文本信息，Http状态码对应文本-“OK”、"Not Found"等等 |
5.XMLHttpRequest方法
1.open()方法
open()有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定当对请求进行异步的处理。
xmlHttp.open("get","test.php",true);
2.send()方法
send()方法将请求发送往服务器。里面的参数如果open设置了get的话，就是null，如果是post或put的话，就可以填写需要传递的参数。
如果我们假设HTML文件和PHP文件位于相同的目录，且get提交，那么代码是这样的
xmlHttp.open("get","xxx.php",true)
xmlHttp.send(null);
其他方法如下;
| 方法 | 描述 |
|---|---|
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| open(“method”,“URL”,[asyncFlag],[“userName”],[“passWord”]) | 建立对服务器的调用，method参数可以是get,post或put，url参数可以是相对url或绝对url，这个方法还包括3个可选的参数，是否异步，用户名，密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader(“header”,“value”) | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()，设置header并和请求一起发送（‘post’方法一定要） |
AJAX编程步骤
AJAX编程流程：
- 创建XMLHttpRequest对象
- 设置请求方式。
- 调用回调函数。
- 发送请求。
下面来看具体步骤
1.创建XMLHttpRequest对象
创建XMLHttp对象的语法是：
var xmlHttp = new XMLHttpRequest();
如果是IE5或IE6浏览器，则使用ActiveX对象，创建方法是：
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
一般我们手写AJAX的时候，首先需要判断浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
//第一步：创建XMLHttpRequest对象
var xmlHttp;
if(window.XMLHttpRequest){
//非IE
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2.设置请求方式
在WEB开发中，请求有两种形式，一个是get，一个是post，所以在这里需要设置以下具有使用哪个请求，XMLHttpRequest对象的open()方法就是用来设置请求方式的。
open()方法
| 功能 | 参数 |
|---|---|
| 规定请求的类型、URL以及是否异步处理请求 | 参数1：设置请求类型（GET或POST）参数2：文件在服务器上的位置；参数3：是否异步处理请求，是为true，否为false |
如下：
//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
varurl="http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
Get还是Post?
与post相比，get更简单也更快，并且在大部分情况下都能使用，然而，在以下情况中，请使用post请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（post没有数据量的限制）
- 发送包含未知字符的用户输入时，post比get更稳定
异步true还是同步false？
AJAX指的是异步JavaScript和XML。XMLHttpRequest对象如果要用与AJAX的话，其open()方法的aync参数必须设置为true；对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX出现之前，这可能会引起应用程序挂起或停止。
通过AJAX，JavaScript无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后就对响应进行处理
3.调用回调函数
如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名方法，所以回调函数 就在这里写。所谓回调函数，定义就是请求在后台处理完，如何处理服务器返回的响应，如何发往前台的函数。在这个例子里，我们的回调函数主要实现的功能就是接收后台响应回来的字符串然后发往前台显示到指定div上，因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：
最低0.47元/天 解锁文章
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
