您的位置:首页 > Web前端 > JQuery

jQuery学习教程(十):AJAX

2011-07-22 07:16 387 查看
先复习一下经典的ajax方式

ajax.php

现在时间是<php? echo date('Y-m-d H:i:s');?>


ajax.html

<script type="text/javascript">
function Ajax(){
var xmlHttp=null;
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}catch(e){}
}
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
if(xmlHttp!=null){
xmlHttp.open("GET","ajax.asp",true);
xmlHttp.onreadystatechange=Call;
xmlHttp.send(null);
}
var p=document.getElementById("content");
function Call(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
p.innerHTML=xmlHttp.responseText;
}
}
}
}
</SCRIPT>
<BUTTON onclick=Ajax()>获取</BUTTON>


这里使用ajax算是有些麻烦

再看看使用jQuery

<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").load("ajax.asp");
});
});
</script>


$.load()方法

上面使用了load函数。load语法如下,

load(url[,data][,callback])//url:string
类型,请求HTML页面的URl地址;data:Object类型,发送到服务器的key/value数据;callback,Function类型,请
求完成时的回调函数

其中url可使用选择器接收该url中指定地址的某一元素内的文本。这是一个异常强大的功能,假如使用传统js方式的话就需要使用replace去
过滤某些字符,还可能要用到Regex。而现在jQuery只要简单的选择器过滤就可以了。

$("p").load("ajax.php"),ajax.php内容如下:

<h4>获取指定内容的标题</h4>
<p><?php
echo data('Y-m-d H:i:s');
?></p>


第二个参数data

<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").load("ajax_data.php",{name:"wang",age:"23"},function(responseText,textStatus,XmlHttp){
alert("xmlHttp对象:" + XmlHttp + "\r\n请求状态:" + textStatus +   "\r\n获得数据:" + responseText);
});
});
});
</script>


ajax_data.php代码

<?php
if $_POST("name")<>""{
echo "您的姓名为:" . $_POST("name");
echo ",年龄是" . $_POST("age");
}
?>


  

其中参数{name:"王洪剑",age:"23"}显示声明时是以post方式来请求数据的;默认不加参数时以get方式请求。因此应当使用
request.Form("name")来获得数据。 callback代表载入返回数据后执行的函数,它有三个参数可供选择

reponseText//返回的文本

textStatus//请求状态:sucess|error|notmodified|timeout

XmlHttpRequest//XmlHttpRequest对象,Object类型
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: