欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Jquery > AJAX

AJAX

2018-05-10 620 收藏 0 赞一个 0 真差劲 0 去评论

先复习一下经典的ajax方式

ajax.asp

现在时间是< %=Now()%>

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){}    
         }    
     }elseif(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>

20150128035840_62907.png

这里使用ajax算是有些麻烦

再看看使用jQuery

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

20150128040006_85970.png

$.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.asp h4"),ajax.asp内容如下:

<h4>获取指定内容的标题</h4>    
   <p><%    
   response.Expires=0    
   response.Write(now())    
   %></p>

20150128040055_72811.png

第二个参数data

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

ajax_data.asp代码

<%    
    if request.form("name")<>"" then    
    response.Write("您的姓名为:" & request("name"))    
    response.Write(",年龄是" & request("age"))    
    end if
%>

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

reponseText//返回的文本

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

XmlHttpRequest//XmlHttpRequest对象,Object类型

20150128040156_32088.png

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论