什么是 AJAX ？

        AJAX = 异步 JavaScript 和 XML。

        AJAX 是一种用于创建快速动态网页和在无需重新加载整个网页的情况下，能够更新部分网页的技术的技术。

        它是一门技术而不是一门语言。

        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

        传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

        有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

AJAX 工作原理

        AJAX是基于现有的Internet标准，并且联合使用它们：

        XMLHttpRequest 对象 (异步的与服务器交换数据)

        JavaScript/DOM (信息显示/交互)

        CSS (给数据定义样式)

        XML (作为转换数据的格式)

        提示： AJAX应用程序与浏览器和平台无关的！

 

AJAX-创建XMLHttpRequest 对象

        什么是XMLHttpRequest对象？
                    XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍可见w3c）

        创建XMLHttpRequest对象
                  所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
       

         创建XMLHttpRequest对象的语法：

 var xhr = new XMLHttpRequest();

         老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

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

                    var xhr;
                    if(window.XMLHttpRequest){
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xhr=new XMLHttpRequest();
                    }else{
                        // code for IE6, IE5
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                    }

XMLHttpRequest

           XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

 

向服务器发送请求

        如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：     

 xmlhttp.open("GET","ajax_info.txt",true);

               xmlhttp.send();

参数说明    

       方法描述open(method,url,async)

       规定请求的类型、URL 以及是否异步处理请求。 

       method：请求的类型；GET 或 POST

       url：文件在服务器上的位置

       async：true（异步）或 false（同步）

       send(string)

       将请求发送到服务器。

       string：仅用于 POST 请求

 

 一个简单的GET请求:

 xhr.open("GET","/Ajax02/getInfor",true)
                    xhr.send();

一个简单的POST请求:                 

xhr.open("POST","/Ajax02/getInfor",true)
                    xhr.send();

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在 send() 方法中规定您希望发送的数据：      

xhr.open("POST","/jQueryAjax/postPersonInfor",true);
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xhr.send(data);//data表单中需要提交的数据（字符串）
               

setRequestHeader语法：
                

setRequestHeader(header,value);//向请求添加HTTP头。

参数说明：
       header: 规定头的名称 

       value: 规定头的值   

       url – 服务器上的文件

       open() 方法的 url 参数是服务器上文件的地址：

       xmlhttp.open("GET","ajax_test.html",true);

       该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

服务器响应

        使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
        responseText:获得字符串形式的响应数据。
        responseXML：获得 XML 形式的响应数据。

 

异步 – True 或 False？

        AJAX 指的是 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

        AJAX = 异步 JavaScript 和 XML。

       同步(false)：就是指一个进程在执行某个请求的时候，
                  若该请求需要一段时间才能返回信息，
                  那么这个进程将会一直等待下去，
                  直到收到返回信息才继续执行下去；          

       异步(true)：是指进程不需要一直等下去，
                  而是继续执行下面的操作，不管其他进程的状态。
                  当有消息返回时系统会通知进程进行处理，
                  这样可以提高执行的效率。

       异步实现：
                1、运用HTML与CSS来实现页面，表达信息
                2、运用XMLHttpRequest和web服务器进行数据的异步交换
                3、运用JavaScript操作DOM，实现动态局部刷新

 

onreadystatechange事件

       在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当readyState改变时，就会触发onreadystatechange事件。
       下面是XMLHttpRequest对象的三个重要属性：
               onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
               readyState:存有XMLHttpRequest的状态。从0到4发生变化。
                    0: 请求未初始化 
                    1: 服务器连接已建立 
                    2: 请求已接收 
                    3: 请求处理中 
                    4: 请求已完成，且响应已就绪 
                status: 200: "OK"  404: 未找到页面
                在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
                当readyState等于4且status为 200 时，表示响应已就绪：      

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var txt = xhr.responseText;
                        console.log(txt);
                    }
                }

例：

 function getPersonData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("get", "/.../...", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                  
                }
            }
        }