这里先要讲下什么是Ajax。待续。
今天这里只讲Ajax请求的一部分,以后有用到别的在续写。
1、jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求。这个我之前是有用过滴。但理解有些偏差。这里先将下正确的。
url即要传递的地址、date是参数、callback是回调函数(只有当Response的返回状态是success才是调用该方法)。
注意点:
callback是得到的返回值(date)是由Response返回的,故在在类别修改是时候为什么要用:context.Response.Write("true");而不是return true。
我之前的修改类别名用的就是get方法,当时有用到了两个参数,其实是可以用date来传递的,然后还是用Required来获取。那么这个就没有什么好说的了,自己看之前写的。
2、jQuery.post(url,[date],[callback],[type]);
较之于get方法,好像多了个type。感觉跟get差不多。现在摘录下一网友的例子,设计的简单明了。
Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");
jQuery代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this alert(data.result); }, "json");
上面的type就是json了。
3、jQuery. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
这个有点怪,如果不是现在IE下测试就会显示不出来。我怀疑出现浏览器兼容问题。下载吧我做的一个简单的:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../JS/jquery-1.3.2-vsdoc2.js"></script></head> <body> <input type="button" id="send" value="Ajax获取" /> <div id="resText" class=".ajax.load"> dddd </div> <script type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html .para); }
</script>
</body> </html>
下面自然是text.html了
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div class="comment"> 已有评论: </div> <div class="comment"> <h6>张三:</h6> <p class="para">沙发。</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳。</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板。</p> </div> </body> </html>
先做到这里,今天做得有点晕。
继续补充下,jQuery.getScript(url,callback) 第二参数个可选。
<body> <button id="go">» Run</button> <div class="block"></div> <script type="text/javascript"> $(function(){ jQuery.getScript("../JS/test.js", function(){ $("#go").click(function(){ $(".block").animate( { backgroundColor: 'pink' }, 1000) .animate( { backgroundColor: 'blue' }, 1000); }); }); //alert("sss"); }) </script> </body>
我的test.js只是简单的做了个输出alert("ddd");
同上还是出现在IE可以在其他浏览器不行。