Ajax实现--javascript

Ajax技术的好处我想我们已经不需要再过多陈述了，ajax技术现在已经被广泛运用在web应用中，比如google地图，省市级联等等

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

废话不多说，现在先用纯javascript来实现一下ajax技术

首先是jsp页面：

<html>
  <head>

    <script type="text/javascript">
    
    var xmlHttpRequest = null;
    
    function ajaxRequest()
    {
        if(window.ActiveXObject) // IE浏览器
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
        {
            xmlHttpRequest = new XMLHttpRequest();
        }
        if(null != xmlHttpRequest)
        {
            var v1 = document.getElementById("value1").value;
            var v2 = document.getElementById("value2").value;
            
            // 准备向服务器发出一个请求
            
            /*
             * GET方式向服务器发出一个请求
             * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);
             */
             
             /*
              * POST方式向服务器发出一个请求
              */
            xmlHttpRequest.open("POST", "AjaxServlet", true);
             
            // 当发生状态变化时就调用这个回调函数
            xmlHttpRequest.onreadystatechange = ajaxCallBack;
            
            // 使用post提交时必须加上下面这行代码
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            
            // 向服务器发出一个请求
            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);    
        }
    }
    
    function ajaxCallBack()
    {
        if(xmlHttpRequest.readyState == 4)
        {
            if(xmlHttpRequest.status == 200)
            {
                var content = xmlHttpRequest.responseText;
                document.getElementById("div1").innerHTML = content;
            }
        }
    }
    
    </script>

  </head>
  
  <body>

    <input type="button" value="get content from serve" onclick="ajaxRequest()"/><br>
    <input type="text" id="value1"/><br>
    <input type="text" id="value2"/>
    <div id="div1"></div>
    
</body>
</html>

服务端的servlet非常简单，就是响应给客户端一段文本内容。

ajax技术的核心就是xmlHttpRequest，对于IE来说，因为其内核与其他浏览器不一样(Firefox, Chrome)，所以首先要判断一下使用的浏览器是否是IE

        if(window.ActiveXObject) // IE浏览器
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
        {
            xmlHttpRequest = new XMLHttpRequest();
        }

这样得到xmlHttpRequest以后，接下来的操作在上面代码里都有体现，流程无非就是像servlet发送请求，然后根据响应状态的转变调用回调函数，最后得到服务器端响应回来的数据，响应过来的既可以是xml文本，还可以是json数据或者是普通文本，

posted @ 2012-10-28 10:23  xiaoluo501395377  阅读(10847)  评论(0)  编辑  收藏  举报