Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
当前位置: 网站首页 > 网站建设教程 >
使用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 |
服务器返回的兼容的DOM的XML内容 |
|
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)
{
// 针对Firefox、Opera、Safari、IE7.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】 【更多网站建设教程】