Ajax实现--javascript

来源：互联网发布：梅雨知时节作家编辑：程序博客网时间：2024/05/21 17:20

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

0 0