Ajax实现--javascript

发布时间：2020-12-16 01:53:19 所属栏目：百科来源：网络整理

导读：Ajax技术的好处我想我们已经不需要再过多陈述了，ajax技术现在已经被广泛运用在web应用中，比如google地图，省市级联等等 AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术。 AJAX 通过在后台与服务器交换少量数据的方式，允许网

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!