AJAX原理

            随着互联网的发展，交互式的程序，现在越来越多的从C/S专项B/S ,也就是浏览器代替了客户端，这里面就有一个问题，如果我用户的请求很多，难道每一个请求都要进行一次完全刷新才能得到我想要的吗？No，当然不是。这里就要用到好用，众多浏览器支持的AJAX来解决这个问题。

概念

AJAX（AsynchronousJavaScript and XML ），就是异步js和XML，它不属于新技术，更准确的来说是多种技术的融合，比如CSS、HTML、DOM、JS、XML。

CSS+HTML——网页的标准化；

DOM——动态修改文档的内容和结构；

XML——配置文件，进行数据的交换和处理；

JavaScript——简称JS，绑定上面的技术，使其可以协同工作，一会要讲其中一个非常重要的方法XMLHttpRequest。

如果不用和使用异步操作会怎样？

举个例子：

去图书馆借书，但是你想借的书已经被借出，你就有两种选择：

一种是，一直等待，直到书还了，你再借（相当于用户请求，完全刷新，相当于不用异步操作）；

另一种，在图书馆预约，如果有还书，就通知你来借书，同时还可以继续借其他的书（用户请求，服务端进行响应，同时仍然接受用户的其他请求，使用了异步操作）。

利用AJAX最大的目标就是实现解决B/S中浏览器和服务器刷新，缺乏交互性的问题。。以下是AJAX实现交互的流程：

            从图中可以看到分为客户端和服务端，用户触发一个事件，创建一个XMLHttpRequest对象，对象向服务端发送请求，请求发出后继续响应用户的其他请求，当服务端接受到请求后，执行返回结果。客户端调用callback（）方法，对响应数据进行处理。

核心技术——XMLHttpRequest

            要想实现异步操作，XMLHttpReuest是关键。了解一下它。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

            XMLHttpRequest是在IE5的时候引进的，它可以实现异步操作，也就是我用这个对象向服务器提出请求和对响应结果进行处理，而且用户仍然可以照常操作，就达到了不完全刷新的效果。

创建XMLHttpRequest 对象

                 虽然很多浏览器都支持XHR对象，但是各个浏览器也有不同，主要是IE和其他浏览器的区别啦。。

            为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

<span style="font-size:18px;">var xmlhttp;function createXMLHttpRequest(){    if (window.XMLHttpRequest)      {// code for IE7+, Firefox, Chrome, Opera, Safari      xmlhttp=new XMLHttpRequest();      }    else      {// code for IE6, IE5      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");      }}</span>

            解析：先声明一个全局变量xmlhttp，用来存放XHR对象，在createXMLHttpRequest（）方法中完成创建过程，根据判断语句知道，如果window.XmlHttpRequest调用返回True，则是实例化一个XMLHttpRequest对象。否则，就证明是IE浏览器，那就通过传递“Microsoft.XMLHTTP”给ActiveObject（）来创建XMLHttpRequest对象。。。

向服务器发送请求

向服务器发送请求使用XMLHttpRequest对象的Open（）和send（）方法。

例子：

<span style="font-size:18px;"><span style="font-size:18px;">xmlhttp.open("GET","test1.txt",true);xmlhttp.send();</span></span>

open（method，url，async）——规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST；

                      POST在一下三种情况下使用：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

        GET比POST简单快速，除了上述三种情况，基本上都可以使用。

• url：文件在服务器上的位置；
• async：true（异步）或 false（同步）；

send（string）——将请求发送到服务端

• string：仅用于 POST 请求

利用DOM对服务器响应进行处理

              我们利用回调函数进行处理服务器响应的信息，我们要实现异步的效果就是，在服务器响应之后，要让页面无缝更新（不会出现像我们点刷新的时候，而整个页面重新执行），前面说到DOM这个文档对象模型就可以实现动态的对数据进行处理和交换。DOM对象把页面抽象成一个树型结构，它可以对其进行遍历和编辑等，并且将服务器的返回信息更新到相应的结点上，这样用户提交一个请求，根本就感觉不到已经刷新了页面或者刷新了部分页面。

形象的理解ajax异步就是客户端可以在不得到服务端响应的情况下，继续进行操作。

          学习完了以上的XHR原理，基本上就知道了是如何实现客户端和服务器异步操作的了。本篇偏向理论性，一个技术的掌握还需要多多实现，下一篇就是对AJAX进行一下练习。。