【JavaScript】---AJAX

      在JavaScript学习的最后是AJAX，这部分内容不论是以后学习CSS，还是学习JQuery都是不可缺少的一部分，那么我们就来简单的了解一下什么是AJAX！

什么是AJAX？

     在学习JS的JAVA以前的内容的时候，我们发现：用户在单击某个按钮后，都必须得等待页面的整体刷新才可以显示我们需要的内容，也就是用户的动作必须得等服务器反应以后才可以响应！那有没有可以不让整个页面刷新，就可以获取自己想要的东西呢？答案是肯定--AJAX

     Ajax提供与服务器异步通信的能力。这种技术可以向服务器请求额外的数据而无须卸载页面，给用户带来很好的体验!比如：我们查询google地图的时候，和浏览手机版的淘宝以及某些邮件收取。都是不用刷新页面而得到了新的数据，这就是Ajax的应用！

Ajax的核心：

   

     Ajax不是一种单一的技术，它是JavaScript和CSS和DOM和XMLHttpRequest对象的集合，我们要灵活的运用Ajax就必须了解这四种不同的技术，以及了解这四种技术在Ajax中扮演的角色！

     Ajax的核心技术就是XMLHttpRequest对象，简称XHR。它提供了向服务器发送请求和解析服务器响应提供了流畅的接口！也就是说用户可以不刷新网页就可以获得数据库的最新数据。

Ajax的使用：

 

     首先，创建XHR对象：var xhr=new XMLHttpRequest();

     其次，在使用Ajax的XHR对象的时候，必须先调用open()方法，它接受三个参数,分别为：要发送的请求类型(get,post)，请求的URL和表示是否异步。

      注意：open（）方法并不会真正发送请求，而是启动一个请求以备发送，要通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据，如果不需要则填null。

               最后，使用异步调用的时候，也就是open()方法的第三个参数为true的时候，需要触发readystatechange事件，然后检测readyState属性即可，这个属性有五个值：

 

 

             

举个例子说明：

      

这个例子的界面代码非常简单，这里就不做说明了（就用<p>标签和输入框就行了）。

JS代码：

var xmlHttp;//设置一个全局变量
//创建 XMLHttpRequest对象的兼容性方法
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

 

//创建XMLHttpRequest对象
createXMLHttpRequest();
//建立在页面用到的函数方法
function callServer() {
    //获取HTML页表单的数据
    var city = document.getElementById("city").value;
    var state = document.getElementById("state").value;
    //如果页面文本框汇总没有填数据，或者数据为空那么直接返回
    if ((city == null) || (city == "")) return;
    if ((state == null) || (state == "")) return;
 
    //连接服务器，这里设置的服务器是假的，只是作为一个示例来用，不能真正的返回数据
    //用到的escape就是加密字符串
    var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
    //打开连接；open 的应用，异步调用
    xmlHttp.open("GET", url, true);
    //调用onreadystatechange事件
    xmlHttp.onreadystatechange = updatePage;
    //调用send方法;send的应用；
    //因为url中添加了要发给服务器的数据，所以send()方法中就不需要参数了。
    xmlHttp.send(null);
}

 

//updatePage事件方法
function updatePage() {
    //如果onreadychange事件已经执行完成
    if (xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;//用到了XHR对象的responseText属性
        document.getElementById("zipCode").value = response;
    }
}

总结：

          

     关于AJAX的学习，在B/S这个阶段有一个专门的学习环节，这里只是略微的了解一下，希望到那个时候自己对于AJAX的了解可以更深一点！