ajax在如今web2.0中的应用实在太广泛了,免刷新获取服务器数据既省资源又省时间,还能提升用户体验。
用jquery实现ajax数据交互也是比较方便的,示例程序如下:
<html>
<head>
<title>Test</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
function fetchData(arg){
$.ajax({
url:"data.php?id="+arg,
dataType:"text",
success:function(data){
$("#b")[0].innerHTML = data;
}
})(arg);
}
</script>
</head>
<body>
<div id="a" style="width:100px;height:100px;background-color:yellow">
<a οnclick="fetchData(1)">Click</a>
</div>
<div id="b" style="width:100px;height:100px;background-color:gray">
</div>
</body>
</html>
其中点击“click”链接后会调用自定义fetchData函数,函数内用到jquery封装的ajax操作方法,填写获取数据的地址,类型以及数据获取成功后的回调函数,可以在回调函数中用jquery操作页面元素,非常方便。
示范的缘故,后端data.php很简单,就不解释了
<?php
$id = $_GET["id"];
$id = "server get ".$id;
echo $id;
?>
用浏览器访问后点击“Click”,我们发现页面没有刷新,但是div b中已经有了后端传过来的数据了,不错,简单就是最好的,做网站回帖分页也可以用这个简单地实现了。
如果脚本所在服务器和请求的url不是同一个域下面,存在跨域调用的问题,可以使用jsonp的方式如下:
<script>
$(document).ready(function() {
$.ajax({
url: "http://another_host/data.php",
dataType: "jsonp",
jsonp:"myCallback",
success: function(data) {
$("#b")[0].html(data["Hello"]);
},
error: function() {
alert("Error");
}
})
})
</script>
服务器端代码data.php如下:
<?php
$b = $_REQUEST["myCallback"];
$a = <<<EOF
{ "Hello":"World Two" }
EOF;
echo "$b($a)";
?>