AJAX原理

  大家都知道,ajax应用已经非常广泛了,随便举几个例子【验证用户名是否存在,无刷新评论,购物车,页面静态化加载数据等等】

今天就让我们来揭开ajax的面纱，了解其工作原理

 var xmlHttpRequest;// ajax异步数据交互的核心对象是XMLHttpRequest.

<script type='text/javascript'>

function ajaxapp(){

    var username=document.getElementById("txtusername").value;//使用dom的方式获文本框的值

    //1：创建XMLHttpRequest对象【最复杂的一步，建议copy改改】

     if(window.XMLHttpRequest){

        xmlHttpRequest=new XMLHttpRequest();//针对FF、Mozillar、Opera、Safari、IE7,8

      if(xmlHttpRequest.overrideMimeType){//针对某些特定版本的Mozillar浏览器的BUG进行修正

          xmlHttpRequest.overrideMimeType("text/html");

      }

     }else if(window.ActiveXObject){

     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js 数组中--排在前面的版本较新

     for ( var i = 0; i < activexName.length; i++) {
            try {
                /*
                 * 取出一个控件名进行创建，如果创建成功就终止循环 如果创建失败，抛出异常，然后可以继续循环，继续完善
                 */
                xmlHttpRequest = new AativeXObject(activexName[i]);
                break;
            } catch (e) {

            }
        }

     }

// 确认XMLHttpRequest对象是否创建成功
/*    if (!xmlHttpRequest) {
        alert("XMLHttpRequest创建失败！！！");
    } else {
        alert(xmlHttpRequest + "创建成功!!!")
    }
*/    /**
     *2、注册回调函数,注意书写格式
     *      需要将函数名注册、如果加上括号,就会把函数的返回值注册到httprequest中，这样不行  
     */
    xmlHttpRequest.onreadystatechange=callback;
     /**
      * 3、设置连接信息
      * 第一个参数表示HTTP的请求，支持所有的http的请求方式(get/post)
      * 第二个参数表示请求的url地址，get方式请求的参数也在url中
      * 第三个参数表示采用异步还是同步交互，true表示异步
      */
    //xmlHttpRequest.open("GET","ajaxapp.aspx?name="+userName,true);
    //post请求方式
    xmlHttpRequest.open("POST","servlet.AjaxServer",true);
    //post方式需要自己设置http的请求头
    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    //post方式发送数据
    xmlHttpRequest.send("name="+userName)
       /**
        * 4、发送数据，开始和服务器进行交互
        *  同步方式下，send这句话会在服务器数据回来后才会执行
        *  异步方式下，send这句话会立即完成执行
        */
    //xmlHttpRequest.send(null);

}

//回调函数
function callback(){
    alert(xmlHttpRequest.readyState);
    /**
     * 5、接受响应数据
     */
    //判断对象的状态是交互完成
    if(xmlHttpRequest.readyState==4){
        //判断http的交互是否成功
        if(xmlHttpRequest.status==200){
            //获取服务器端返回的数据
            //获取服务器端输出的纯文本数据
            var responseText=xmlHttpRequest.responseText;
            //将数据显示在页面上，通过dom的方式找到 div标签所对应的元素节点
            var divNode=document.getElementById("result");
            //设置元素节点中的html内容
            divNode.innerHTML=responseText;
        }
    }
    
    
}

</script>