网站制作一条龙服务_网站百度排名优化推广(seo)服务_【凤凰网络】

当前位置: 网站首页 > 网站建设教程 >

使用Ajax实现页面无刷新详细方法

在Ajax中所以说的Ajax引擎实际上说的就是Ajax的核心对象XMLHttpRequest对象。

 

Ajax核心对象的方法和属性

 
XMLHttpRequest对象的方法:
 

方法

描述

Open(String method,String URL,boolean asynch)

建立对服务器的调用,其中参数一表示HTTP协议调用的方法,URL表示调用的服务器的地址,asynch表示是否采用异步方式

Send(content)

先服务器发出请求,如果采取异步方式,该方法会立即执行

 
XMLHttpRequest对象的属性:
 

属性

描述

Onreadystatechange

请求状态改变的事件触发器readyState变化时会调用此方法)

readyState

请求状态  0表示未初始化 1表示open方法调用成功  2表示服务器已经应答客户端的请求  3表示交互中  4表示数据接收完成

responseText

服务器返回的文本内容

responseXML

服务器返回的兼容的DOMXML内容

Status

服务器返回的状态码200 表示成功404表示未找到

 
使用Ajax对象实现无刷新只编写用户自定义的Javascript脚本来实现Ajax的无刷新。
 

要实现Ajax无刷新也需要以下几步:

 

· 首先取得文本框中的内容;由于不是在jQuery环境下,所以此时只能用DOM的方式取出节点;

· 创建XMLHttpRequest对象,该步骤是最为复杂的,需要针对不同的浏览器建立不同的对象;

· 注册回调函数,当请求状态改变时调用该函数;

· 设置与服务器的连接信息;
· 发送数据
· 创建回调函数,处理服务器返回的数据,将返回的数据动态地显示在JSP页面上。

 

针对于第一步,由于是在DOM下,所以要用Javascript取得文本框中的内容,如下:

// 使用DOM的方式获取文本框中的值

    var userName = document.getElementById("uname").value;

针对于第二步,由于浏览器之间的差异,所以要分别为不同浏览器创建Ajax核心对象,如下:

// 创建XHR对象

    if (window.XMLHttpRequest)

    {

       // 针对FirefoxOperaSafariIE7.0 IE8.0

       var xmlHttp = new XMLHttpRequest();

      

       // 针对某些特定版本的Mozilla浏览器Bug进行修复

       if (xmlHttp.overrideMimeType)

       {

           xmlHttp.overrideMimeType("text/xml");

       }

    }

    else if (window.ActiveXObject)

    {

       // 针对于IE6.0 IE5.0及以下版本

       // 可以创建XMLHttpRequest对象的控件名称,保存在一个js数组中

       var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

      

       for (var i = 0; i < activexName.length; i++)

       {

           try

           {

              // 取出一个控件进行创建,如果创建成功就终止循环

              xmlHttp = new ActiveXObject(activexName[i]);

              break;

           }

           catch (e)

           {

             

           }

       }

}

针对于第三步,当Ajax核心对象的请求状态发生改变时要调用回调函数,如下:

xmlHttp.onreadystatechange = callback;

针对于第四步,就是建立与服务器端的连接,准备与服务器进行交互,如下:

xmlHttp.open("GET","TestServlet?uname=" + userName,true);

针对于第五步,就是将准备好的数据发送给服务器端,如下:

xmlHttp.send(null);

针对于第六步,创建回调函数,处理服务器端返回的数据,如下:

function callback()

    {

       if (xmlHttp.readyState == 4)

       {

           if (xmlHttp.status == 200)

           {

              var responseText = xmlHttp.responseText;

              // 将数据显示在DIV

              var divNode = document.getElementById("result");

              divNode.innerHTML = responseText;

           }

       }

}

 

以上就是一个完整的以Ajax的方式,不依赖于任何框架、库来实现的Ajax无刷新。

 <!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax实现自动刷新</title>
</head>
<body onLoad="Autofresh()">
<p>现在的时间是:<span id="currenttime"></span></p>
  <script>
    var xmlobj;
    var count=0;
    function createXMLHttpRequest(){
      if(window.ActiveXObject){
        xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest){
        xmlobj=new XMLHttpRequest();
      }
    }
    function Autofresh(){
      createXMLHttpRequest();   
       count=count+1;   
      xmlobj.open("GET","currenttime.php?count="+count,true);
      xmlobj.onreadystatechange=doAjax;
      xmlobj.send("r="+Math.random());//使用随机数处理缓存
    }
    function doAjax(){
      if(xmlobj.readyState==4 && xmlobj.status==200){
        var time_span=document.getElementById('currenttime');
        time_span.innerHTML=xmlobj.responseText;
        setTimeout("Autofresh()",2000);
      }
    }
  </script>
</body>
</html>

【使用Ajax实现页面无刷新详细方法热度:128】 【更多网站建设教程
Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
凤凰网络:提供优质的网站制作一条龙服务,并通过百度网站排名优化推广(seo)服务,使seo优化后的网站,获得快速网站关键词排名提升到首页的效果!