新手学js之——学习ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）.

在 Javascript 中局部刷新 ajax 是一个亮点的，局部刷新 是不刷新界面的情况下，我们可以不用提交的情况下直接与后台进行通信，所以这就大大减少后台数据的访问，减少时间延迟，特别是后台数据信息很大的话，时间延迟上会是一个需要极其注意的因素。

好吧，先介绍一下几点：

1、ajax 是使用 XMLHttpRequest 进行异步通讯的，XmlHttpRequest 使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

所以首先要获得我们要获得 XMLHttpRequest 对象，又因为由于浏览器内核的不同获得 XMLHttpRequest 对象的。

if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest 主要方法有：

xmlHttp.open(“method”,"url"，true);                            //建立连接调用服务器。

xmlHttp.onreadystatechange = ajaxCallBack;        //状态改变即会触发事件处理器（readyState）

xmlHttp.readyState                                                 //请求状态。5个状态：0—未初始化；1—正在加载；2—已加载；3—交互中；4—完成

xmlHttp.status                                 //服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

send(content)                                 //向服务器发送请求

xmlHttp.responsetext                    //服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

…………

2、步骤：

（1）创建XMLHttpRequest 对象实例；

（2）设定XMLHttpRequest 对象的回调函数，利用 xmlHttp.onreadystatechange = ajaxCallBack；（其中 ajaxCallBack 方法是回调函数）；

（3）设定请求属性：用 open方法 设定HTTP 方法（get/post）,访问的URL，

（4）将请求发动给服务器。利用send（） 方法。

3、实例：

js 代码：

<script type="text/javascript">
        var xmlhttp;
        function getAjaxHttpRequest(){
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else  {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }

        function ajaxCallback(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200){
                    alert("I am coming！");
                }
            }
        }

        function do() {
            var xmlhttp=getAjaxHttpRequest();
            if(null != xmlhttp){
                xmlhttp.open("GET", "http://localhost:8080/test", true);
                xmlhttp.onreadystatechange = ajaxCallback;
                xmlhttp.send(null);
            }
        }
    </script>

这就是我浅显的见识，在这抛砖引玉，希望大神指教……