AJAX（学习笔记一）

1：什么是AJAX?

AJAX是一组英文单词的简写，这组英文单词是 ：Asynchronous javaScript and xml ，翻译成中文的意思是： 异步的Javascript 和 XML。什么意思呢？简单点讲就是：通过HTML页面中的JavaScript方法能够不刷新整个页面的情况下实现和服务端进行交流返回对应的请求数据，而返回的数据常常是两种格式的，文本格式和XML格式的，但是文本格式比较简单使用XML格式的数据很容易替代掉，所以使用XML表示更加的贴切，现在常常返回JSON格式的数据！

当然，异步好像没有解释，因为这是一个非常细微和隐秘的一个动作，在通过AJAX的引擎向后台服务器发送出请求后，JavaScript是不需要等待服务器的响应的（服务器的响应可能比较慢比较费时）而是先将控制权交给HTML页面本身，一边等待服务器的响应一边可以执行其他的脚本，当响应就绪后才对服务器端的响应进行对应的处理！在页面的体现是与服务器交换数据更新部分网页时，不会重新加载整个网页。

传统WEB应用模式和AJAX应用模式区别在于AJAX引擎的作用，如下图所示：

从上面我们也能感觉到，AJAX不是一种什么新的编程语言，她仅是一种使用老标准的新方法而已，这种方法使用了现有的一些标准，实现了在不加载整个网页的情况下能够与服务器进行交换数据并更新部分的网页。

2：使用AJAX的好处？

嗯，AJAX的最大特点就是他的价值所在，与服务器交互不需要刷新整个页面，这样的用户体验度更好，一边等待服务器的响应，一边又不耽误执行别的动作，这样的网页使用感觉会更爽一些！

3：AJAX的核心是什么？

从传统WEB应用模式和AJAX应用模式中我们也一定注意到了，其实他们相差无几，关键就是多了两点而已，一是服务器端返回的XML格式的数据，二是AJAX引擎。对于从服务器端返回什么样的数据，在这里意义稍微小一点，关键就在于AJAX引擎？那AJAX引擎是什么呢？我觉得是xmlhttpRequest对象，对就是它。

4：XMLHttPRequest对象是什么？

XMLHttpRequest对象是浏览器的一个内建对象，现在的主流浏览器均对其提供支持（IE7+、Firefox、Chrome、Safari以及Opera等等）。稍微需要注意的一点是IE5和IE6使用的是ActiveXObject对象，在最早的时候只有IE浏览器提供对应的支持，后来大多数主流浏览器也提供了支持，所以再后来就有了AJAX技术。

作为一个内建的浏览器对象都有一些什么内容呢？请往下看：

1)XMLHttpRequest对象的属性

2)XMLHttpRequest对象的事件

3)XMLHttpRequest对象的方法

4）XMLHttpRequest对象大致的控制流程

上面的是大概的一个整体控制流程，让我们用一种更加细微角度再看看：

5）通过上面的介绍我们已经大概了解了XMLHttpRequest对象是什么、有什么作用、来自那里，下面让我们看看比较官方的语言是怎么来介绍XMLHttpRequest对象的。

XMLHttpRequest 对象

XMLHttpRequest 是一个 JavaScript 对象,它最初由微软设计,随后被 Mozilla,Apple, 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。而且除了HTTP ,它还支持file 和 ftp 协议.

XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

浏览器支持

XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

嗯，通过上面的介绍我们对XMLHttpRequest对象的认识就更加全面和专业一些了，不过我们还没有介绍怎么样使用它，所以，下面两小部分的内容分别介绍一下有关XMLHttpRequest对象的小代码段和常使用的属性与方法的更加详细的说明。

6）XMLHTTPRequest对象的简单代码段

function ajaxMethod(){  //1：创建XMLHttpRequest对象var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  } //2：监听XMLHttpRequest对象的状态信息。每当 readyState 改变时，就会触发 onreadystatechange 事件（readyState 属性存有 XMLHttpRequest 的状态信息）xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    //DO SOMETHING FOR THE SERVER RESPONSE    }  }//3：初始化HTTP请求的信息xmlhttp.open("GET","URL",true);//4：将HTTP请求发送到服务器xmlhttp.send();}

上面的这段简单的代码是不可用的，不过稍做修改就可能成为一个可用的AJAX方法了，当然，我们重点想说明的是，简单的封装一个AJAX方法使用到了XMLHttpRequest对象的那些方法和属性。当然，如果想封装一个更加健全和可靠的AJAX方法就必须详细的了解XMLHttpRequest对象的一些常用的方法和属性更加详尽的使用方式了！下面就是我想介绍的这些内容。

7）XMLHTTPRequest对象常用的属性和方法的详细说明

（1）XMLHTTPReuest对象的常用属性详解

a：readyState

readyState属性用于存储XMLHttpRequest对象的状态信息，当一个 XMLHttpRequest对象初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件。

并且5 个状态中每一个都有一个相关联的非正式的名称，如下表所示：

b：status

由服务器返回的 当前请求的HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常，仅当数据发送并接收完毕后才可获取。下表是常见的HTTP的状态码及其说明：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表