使用jquery实现ajax
jquery对ajax封装了，不需要再对ajax里的open，send，onreadystate等等进项操作了。jquery中最底层的方法是$.ajax()【即原生的ajax】,第二层是load().$.get()和$.post()【最常用】. 第三层是$.getscript( )和$.getjson( ).
1.load方法
jquery中最为简单常用的方法。load（url,[date],回调函数）如果只用了load（url）则是GET方式。load（url,）加上请求参数，就是POST方式。load（）方法是通过URL参数指定选择符，从加载过来的HTML文档中选出所需要的内容来达到目的。当URL参数的语法结构为“url selecter”(ps:中间有一个空格). 比如之前写的例子，
请求的是：
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
返回名字和网址，如果只想要<h2/>，则可以用选择器
var url = this.href + "h2";//错误，需要加在URL与选择器之间加空格
<pre name="code" class="html">var url = this.href + " h2";
如果只想要<h2/>中的<a/>节点中的数据，则可以用选择器：
var url = this.href + " h2 a";//空格为父元素与子元素之间的空格。
就是：
<script type="text/javascript" src ="../scripts/jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function(){
$("a").on("click",function(){
var args = {"time":new Date()};
var url = this.href + " h2";
//任何一个html 节点都可以使用load 方法来加载ajax，结果将直接插入 html 节点中。
$("#details").load(url,args);
return false;
});
});
</script>
下图可以看到响应
【实际上服务器<h2/><a/>都返回了，只是通过选择器选择需要显示的部分】
2. $.get 以及 $.post 方法
结构：$-get (url,[data],[callback],[type]);其中data是JSON格式。
xml格式下：
<span style="font-size:12px;"><script type="text/javascript" src ="../scripts/jquery-1.9.1.js"> </script>
<script type="text/javascript">
$(function() {
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
//<span style="color:#009900;"><strong>function： 回调函数，当响应结束后，回调函数被触发，相应结果在data 中。</strong></span>
$.get(url,args,function(data){
var name = $(data).find("name").text();
var email = $(data).find("email").text();
var website= $(data).find("website").text();
$("#details").empty()
.append("<h2><a href='mailto:'"+ email+ ">" + name + "</a></h2>")
.append("<a href='" + website +"'>" + website + "</a>");
}); //<strong><span style="color:#009900;">该方法是jquery 对象的方法，其结果在回调函数的参数里面，需要自己安排</span></strong>。
return false;
});
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.xml">Andy</a>
</li>
<li>
<a href="files/richard.xml">Richard</a>
</li>
<li>
<a href="files/jeremy.xml">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html></span>
输出结果：
3.getJSON
Json格式下
数据格式：
<span style="font-size:14px;">{"person": {
"name":"Andy Budd","website":"http://andybudd.com/","email":"andy@clearleft.com"
}
}</span>
<script type="text/javascript" src ="../scripts/jquery-1.9.1.js"> </script>
<script type="text/javascript">
$(function() {
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$.getJSON(url,function(data){ //<span style="color:#009900;"><strong>这里是getJSON</strong></span>
var name = data.person.name; //<strong><span style="color:#009900;">这里也不同</span></strong>
var email =data.person.email;
var website= data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:'"+ email+ ">" + name + "</a></h2>")
.append("<a href='" + website +"'>" + website + "</a>");
}); <span style="color:#009900;"><strong>//该方法是jquery 对象的方法，其结果在回调函数的参数里面，需要自己安排。</strong></span>
return false;
});
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>输出结果： （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
