AJAX使用四步曲

Posted 2021-04-15 天赋吉运科技

前言

    Ajax（即异步 javascript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。

内容

定义：

   

 AJAX（Asynchronous JavaScript and XML）其实是多种技术的综合，包括Javascript、Xhtml和CSS、DOM、XML和XSTL、XMLHttpRequest。其中： 
　　 使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，
 使用Javascript绑定和处理所有数据。

二、现状与需要解决的问题
　　传统的Web应用采用同步交互过程，这种情况下，用户首先向HTTP服务器触发一个行为或请求的呼求。反过来，服务器执行某些任务，再向发出请求的
用户返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。如下图： 
 
 
　　自从采用超文本作为Web传输和呈现之后，我们都是采用这么一套传输方式。当负载比较小的时候，这并不会体现出有什么不妥。可是当负载比较大，
响应时间要很长，1分钟、2分钟……数分钟的时候，这种等待就不可忍受了。严重的，超过响应时间，服务器干脆告诉你页面不可用。另外，某些时候，
我只是想改变页面一小部分的数据，那为什么我必须重新加载整个页面呢？！当软件设计越来越讲究人性化的时候，这么糟糕的用户体验简直与这种原则
背道而驰。为什么老是要让用户等待服务器取数据呢？至少，我们应该减少用户等待的时间。现在，除了程序设计、编码优化和服务器调优之外，还可以采用AJAX。

工作原理：

    相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。并不是所有用户请求都提交给服务器，像一些数据验证和数据处理等都交给了Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。

应用方式为：

    *创建XMLHttpRequest对象

        第一种：

 

var xmlhttp;  

if (window.XMLHttpRequest)  

  {// code for IE7+, Firefox, Chrome, Opera, Safari  

  xmlhttp=new XMLHttpRequest();  

  }  

else  

  {// code for IE6, IE5  

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  

  }  

                 第二种：

var xmlHttp;  

try{//Firefox,Opera 8.0+,Safari  

    xmlHttp=new XMLHttpRequest();  

}  

catch(e){  

    try{//Internet Explorer  

        xmlHttp=new ActiveObject("Msxml2.XMLHTTP");  

    }  

    catch(e){  

        try{  

            xmlHttp=new ActiveObject("Microsoft.XMLHTTP");  

        }  

        catch(e){}  

    }  

}  

return xmlHttp;  

*设置监听的对象

          将服务器响应形式发送给前台界面，响应结果为：

               ResponseText：获得字符串形式的响应数据

               ResponseXML：获得XML形式的响应数据

          监听的结果情况

*打开链接

    *发送请求

小例子

需求：

      通过点击查询订单详情按钮，得出订单信息；（采用AJAX异步加载）

解决方式：

    1、创建异步加载的对象

    2、设置监听

    3、 打开链接

    4、 发送

Demo

<script type="text/javascript">  

    function showDetail(oid){  

        //获得按钮对象  

        var but = document.getElementById("but"+oid);  

        //获得div对象  

        var div1 = document.getElementById("div"+oid);  

        if(but.value == "订单详情"){  

            //1、创建异步加载对象  

            var xhr = createXmlHttp();  

            //2、设置监听  

            xhr.onreadystatechange = function(){  

                if(xhr.readyState == 4){  

                    if(xhr.status == 200){  

                        div1.innerHTML = xhr.responseText;//获得字符串形式的响应数据  

                    }  

                }  

            }  

            //3、打开链接  

            xhr.open("GET","${pageContext.request.contextPath}/adminOrder_findOrderItem.action?tiem="+new Date().getTime()+"&oid="+oid,true);  

            //4、发送  

            xhr.send(null);   

            but.value = "关闭";             

        }else{  

            but.value="订单详情";  

            div1.innerHTML = "";  

        }  

    }  

      

    function createXmlHttp(){  

        var xmlHttp;  

        try{//Firefox,Opera 8.0+,Safari  

            xmlHttp=new XMLHttpRequest();  

        }  

        catch(e){  

            try{//Internet Explorer  

                xmlHttp=new ActiveObject("Msxml2.XMLHTTP");  

            }  

            catch(e){  

                try{  

                    xmlHttp=new ActiveObject("Microsoft.XMLHTTP");  

                }  

                catch(e){}  

            }  

        }  

        return xmlHttp;  

    }  

</script>  

小结

    ITOO项目的时候，用到AJAX异步请求，但是没有这么仔细的写下来过，AJAX的也是有优缺点的，但是个人感觉利大于弊。感兴趣的同胞们可以看看AJAX的优缺点，我在这里就不复制粘贴了。AJAX工作原理及其优缺点

感谢您的宝贵时间······ 

大米时代微信：    

13522159121

编辑：十四期 康世行