AJax技术

ajax学习笔记(一)

字号+ 作者:H5之家 来源:H5之家 2017-05-07 13:05 我要评论( )

ajax学习笔记(一) ------ 部分页面刷新,ajax技术一个经常的应用就是刷新部分页面,用传统的技术也可以实现这一点。传统的方法一般是用IFRAME来实现页面的刷新并

ajax技术一个经常的应用就是刷新部分页面,用传统的技术也可以实现这一点。传统的方法一般是用IFRAME来实现页面的刷新并可调用远程脚本,不过这种方法总使人觉得有些牵强(也许是因为在页面中使用了一种控件)。下面写出学习中的一个例子,比较传统方法和ajax的不同,以感受其差别。

首先看一下利用iframe是怎么实现的

iframe.htm的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframe网页</title>
<script language=javascript type=text/javascript>

<!--在这里写出一个简单的函数,这个函数在server.htm中调用,用来模拟远程脚本-->
function sayHello()
{
alert("hello");
}

</script>
</head>
<body>
<h1>刷新部分页面</h1>
<iframe name="beforexhr" src="" style="boder:0px"></iframe>
<!--点击此链接可用server.htm来刷新iframe的内容-->
<a href="server.htm" target="beforexhr" >call server</a>
</body>
</html>

server.htm的代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>server</title>
<script language=javascript type=text/javascript>
window.parent.sayHello();
</script>
</head>
<body>
刷新成功
</body>
</html>

这样就完成了页面的部分刷新,并模拟了远程脚本的调用。可以看出其基本思想是把要刷新的那部分页面做成iframe,然后利用iframe的属性来控制页面的刷新。这种刷新本质上还是用一个新的页面来替换旧页面,效率并不高,因为为了利用iframe不得不把要刷新的那一小部分页面做成一个独立的页面。

再来看一下一个简单ajax的例子

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>simpleRequest</title>
<script language=javascript>
var xmlHttp;
<!--创建XMLHttpRequest对象-->
function createXMLHttpRequest()
{
//判断浏览器是否支持ActiveXObject对象
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断浏览器是否支持XMLHttpRequest对象
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}

<!--向服务器请求-->
function startRequest()
{
createXMLHttpRequest();
//设置在请求结束后调用handleStateChange函数
xmlHttp.onreadystatechange = handleStateChange;
//用get方法请求服务器端的simple.xml
xmlHttp.open("GET","simple.xml",true)
//发送请求
xmlHttp.send(null);
}

<!--如果一切正常,在客户端显示simple.xml中的内容-->
function handleStateChange()
{
if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
       alert(xmlHttp.responseText);
   }
}
</script>
</head>
<body>
<form action="#">
<p><input type="button" value="按钮" name="B3" onclick="startRequest();"></p>
</form>
</body>
</html>

simple.xml中随便写一句话就可以了

ajax的核心是XMLHttpRequest对象,利用它可以在客户和服务器之间传递xml格式的数据,并用此数据刷新部分页面。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评