Ajax创建和实例

发布时间：2020-12-16 00:38:59 所属栏目：百科来源：网络整理

导读：Ajax并不是一种新的语言，它只是一套技术，它可以再不重新刷新整个页面的情况下局部刷新某以模块的请求，大大减少了流量的冗余请求和浪费，接下来我们就来创建一实例来展示Ajax的优秀之处。首先编写Ajax的创建代码： /*ajax_demo.js*//***创建一个getXMLHTT

Ajax并不是一种新的语言，它只是一套技术，它可以再不重新刷新整个页面的情况下局部刷新某以模块的请求，大大减少了流量的冗余请求和浪费，接下来我们就来创建一实例来展示Ajax的优秀之处。

首先编写Ajax的创建代码：

/*ajax_demo.js*/

/*
**创建一个getXMLHTTPRequest的函数，用来返回XMLHTTPRequest对象
**/
functiongetXMLHTTPRequest()
{
	varreq=false;
	try
	{
		/*forfirefox*/
		req=newXMLHttpRequest();
	}catch(err)
	{
		try
		{
			/*forsomeversionsofIE*/
			req=newActiveXObject("Msxml2.XMLHTTP");
		}catch(err)
		{
			try
			{
				/*forsomeotherversionsofIE*/
				req=newActiveXObject("Microsoft.XMLHTTP");
			}catch(err)
			{
				/*initialfailed*/
				req=false;
			}
		}
	}
	/*returnXMLHTTPRequestobject*/
	returnreq;
}
/*
**使用Ajax技术从服务器端或许当前时间，服务器端脚本用的php编写
**/
functiongetServerTime(){
	varthePage='servertime.php';
	/*为了使页面缓存失效而已*/
	myRand=parseInt(Math.random()*999999999999999);
	vartheUrl=thePage+"?rand="+myRand;

	myeq.open("GET",theUrl,true);
	myReq.onreadystatechange=theHTTPResponse;
	myReq.send(null);
}

functiontheHTTPResponse(){
	if(myReq.readyState==4){
		if(myReq.status==200){
			vartimeString=myReq.responseXML.getElementsByTagName('timestring')[0];
			document.getElementById('showtime').innerHTML=timeString.childNodes[0].nodeValue;
		}
	}else{
	document.getElementById('showtime').innerHTML="timeiscoming....";
	}
}

/*server.php*/
/**
**获取当前的系统时间，返回为XML文档
**/
<?php
header('Content-Type:text/xml');
echo"<?xmlversion="1.0"?>
		<clock>
			<timestring>Itis".date('H:i:s')."on".date('Md,Y')."</timestring>
		</clock>"
?>

/*ajax_servertime_demo.html*/
<!DOCTYPEhtml>
<html>
<head>
<title>Ajaxtogetservertime</title>
<metahttp-equiv="Content-Type"content="text/html;chaset=utf-8"/>

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"type="javascript"></script>
<scripttype="javascript">
$(document).ready(function(){
$("#showtime_b").onmouSEOver(function{
	$("#showtime").toggle();
});
});
</script>
<style>
	body{
	background:#fff;
	font-family:Verdana,sans-serif;
	font-size:12pt;
	font-weight:normal;
	}
	
	.displaybox{
	width:300px;
	height:50px;
	background-color:#ffffff;
	border:2pxsolid#000000;
	line-height:2.5em;
	margin-top:25px;
	font-size:12pt;
	font-weight:bold;
	}
</style>
<scriptsrc="ajax_demo.js"></script>
<scripttype="text/javascript">
varmyReq=getXMLHTTPRequest();
</script>
</head>
<body>
<divalign="center">
	<h1style="color:red;font-weight:bold;">AjaxTimeClock</h1>
	
	<palign="center">PlaceyourmouSEOvertheboxbelowtogetthecurrentservertime.<br/>
						Thepagewillnotrefresh;onlythecontentsoftheboxwillchange.</p>
	<divid="showtime"class="displaybox"onmouSEOver="javascript:getServerTime();">
	</div>
	
</div>	
</body>
</html>

这样就成功了，这就是一个简单的Ajax技术，大家可以试一下

（编辑：李大同）

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