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数据或者是普通文本,

你可能感兴趣的:(JavaScript)