jQuery学习教程(十):AJAX

先复习一下经典的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类型 

posted @   潺莪  阅读(596)  评论(2编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示