Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
如果是IE6及以下，那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。
- function createXHR() {
- if (typeof XMLHttpRequest != 'undefined') {
- return new XMLHttpRequest();
- } else if (typeof ActiveXObject != 'undefined') {
- var versions = [
- 'MSXML2.XMLHttp.6.0',
- 'MSXML2.XMLHttp.3.0',
- 'MSXML2.XMLHttp'
- ];
- for (var i = 0; i < versions.length; i ++) {
- try {
- return new ActiveXObject(version[i]);
- } catch (e) {
- //跳过
- }
- }
- } else {
- throw new Error('您的浏览器不支持XHR对象！');
- }
- }
- var xhr = new createXHR();
在使用XHR对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步。
xhr.open('get', 'demo.php', false); //对于demo.php的get请求，false同步
PS：demo.php的代码如下：
//一个时间
open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
xhr.send(null); //发送请求
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么一共有四个属性：
| 属性名 | 说明 |
| responseText | 作为响应主体被返回的文本 |
| responseXML | 如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档 |
| status | 响应的HTTP状态 |
| statusText | HTTP状态的说明 |
接受响应之后，第一步检查status属性，以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志。除了成功的状态代码，还有一些别的：
| HTTP状态码 | 状态字符串 | 说明 |
| 200 | OK | 服务器成功返回了页面 |
| 400 | Bad Request | 语法错误导致服务器不识别 |
| 401 | Unauthorized | 请求需要用户认证 |
| 404 | Not found | 指定的URL在服务器上找不到 |
| 500 | Internal Server Error | 服务器遇到意外错误，无法完成请求 |
| 503 | ServiceUnavailable | 由于服务器过载或维护导致无法完成请求 |
我们判断HTTP状态值即可，不建议使用HTTP状态说明，因为在跨浏览器的时候，可能会不太一致。
- addEvent(document, 'click', function () {
- var xhr = new createXHR();
- xhr.open('get', 'demo.php?rand=' + Math.random(), false); //设置了同步
- xhr.send(null);
- if (xhr.status == 200) { //如果返回成功了
- alert(xhr.responseText); //调出服务器返回的数据
- } else {
- alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
- }
- });
以上的代码每次点击页面的时候，返回的时间都是时时的，不同的，说明都是通过服务器及时加载回的数据。那么我们也可以测试一下在非Ajax情况下的情况，创建一个demo2.php文件，使用非Ajax。//PS：如果没有向服务器端发送,firebug无发送提示，如果有send()方法，则firebug会提示已发送//PS：通过点击事件，不断的向服务器发送请求，然后服务器会时时的返回最新的数据，就是Ajax功能//PS：IE浏览器第一次会向服务器端请求，获取最新数据，而第二次它就默认获取的缓存数据，导致数据不是最新的//PS：怎么处理缓存？可以使用JS随机字符串
- <script type="text/javascript" src="base.js"></script>
- <script type="text/javascript">
- addEvent(document, 'click', function () {
- alert("<?php echo Date('Y-m-d H:i:s')?>");
- });
- </script>
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-12-318-1.html
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-12-318-1.html
