jQuery学习教程(十):AJAX
2011-07-22 07:16
387 查看
先复习一下经典的ajax方式
ajax.php
ajax.html
这里使用ajax算是有些麻烦
再看看使用jQuery
$.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内容如下:
第二个参数data
ajax_data.php代码
其中参数{name:"王洪剑",age:"23"}显示声明时是以post方式来请求数据的;默认不加参数时以get方式请求。因此应当使用
request.Form("name")来获得数据。 callback代表载入返回数据后执行的函数,它有三个参数可供选择
reponseText//返回的文本
textStatus//请求状态:sucess|error|notmodified|timeout
XmlHttpRequest//XmlHttpRequest对象,Object类型
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类型
相关文章推荐
- jQuery学习教程二十四: jQuery - AJAX load() 方法
- 使用jQuery处理AJAX请求的基础学习教程
- jQuery学习教程(十):AJAX
- 使用jQuery处理AJAX请求的基础学习教程
- jQuery学习教程二十三: jQuery - AJAX 简介
- 【jQuery】jQuery官方基本教程的学习笔记4-异步Ajax
- jQuery学习教程九: jQuery Callback 函数
- jQuery学习教程十: jQuery - Chaining动作/方法链接
- jQuery学习教程十八: jQuery 遍历
- js中的ajax和jquery中的ajax学习笔记
- jQuery学习笔记3----ajax基础
- jQuery学习笔记(Ajax)
- jQuery 学习笔记 之二 附: jQuery入门指南教程列表
- jQuery学习笔记 — jQuery 与 Ajax 的应用
- 热门的技术教程!ASP.NET MVC, JQuery, ASP.NET AJAX and ADO.NET Entity Framework
- 从jQuery的教程和任何地方任何时间学习
- jquery中ajax学习笔记一
- [四天学会ajax] 学习Ajax教程第四天,利用 DOM 进行 Web 响应
- JQ学习笔记(6) Jquery中的ajax
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]