锋利的jQuery第6章 jQuery与Ajax的应用
终于开始学习Ajax了，忍不住小激动一下，以前也看过一些，不过不明白，后来实现了一下，感觉似乎懂了，但是还是不全面，现在全面学习一下。
1，学习ajax，需要一个集成环境AppServ,它包含apache,apache monitor,php,mysql,php-nuk和phpMy Admin.下载地址是http://www.appservnetwork.com/
2,传统的js处理ajax如下：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> //通过这个函数来异步获取信息 function Ajax(){ var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象 xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest } if(xmlHttpReq != null){ //如果对象实例化成功 xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式 xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数 xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参调用 } function RequestCallBack(){//一旦readyState值改变，将会调用这个函数 if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋给ID为 resText 的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } } } </script> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> </html>
test.php代码是：
View Code
<?php echo "Hello Ajax!"; ?>
3，load()方法，方法结构是：load(url,[,data],[,callback])它能远程载入html代码并插入dom.
data是发送到服务器的key/value数据,callback请求完成时的回调函数(无论请求成功与失败)
$(element).load(url,data,callback); callback定义如下： function(responseText,textStatus,XMLHttpRequest){ //responseText:请求返回的内容 //textStatus:请求状态:success,error,notmodified,timeout4; //XMLHttpRequest对象。 }
(1)加载test.html，首先建一个文件test.html
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> </head> <body> <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>
然后新建一个html文件如下代码：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function(){ $("#send").click(function(){ $("#resText").load("test.html"); //加载html页面 }) }) </script> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div class="comment"> 已有评论： </div> <div id="resText" ></div> </body> </html>
其中$("#resText").load("test.html"); //加载html页面
还可以选择性的加载，比如只加载class="para"的元素，只需要在url后面加上jQuery选择器：
$("#resText").load("test.html .para");//注意中间的空格
(2)指定参数使用post，没有参数用get方法。
回调函数有三个参数，function(responseText,textStatus,XMLHttpRequest),responseText是请求返回的内容，textStatus是请求状态:success,error,notmodified,timeout 4中;XMLHttpRequest对象。
下面还是上面的test.html,下面是对应的代码：
$("#send").click(function () { $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) { alert($(this).html());//this是当前选择出来的dom文档,(如果没有选择器，得到head和body之间的内容) alert(responseText); //响应内容是test.html(整个文档) alert(textStatus);//状态是sucess alert(XMLHttpRequest); //XMLHttpRequest对象 }); });
4，$.get()和$.post()方法，都是全局函数
(1)$.get(url [,data] [,callback] [,type] ),
url是请求的地址,
data是发送到服务器的key/value数据会做为QueryString附加到请求的url中,
callback载入成功时的回调函数(只有当response返回状态是success才调用该方法)自动将请求结果和状态传递给该方法；
type是服务器返回内容的格式，包含html,xml,json,script,text,_dafault.
(2)$.get()的回调函数只有2个参数，function(data,textStatus),
data是返回的内容，可以是xml,json,html等；
textStatus是请求状态success,error,notmodified,timeout 4种。只有返回success时才会执行。
(3)下面是例子，
首先建立一个asp.net空网站，然后添加一个index.html，下面是代码：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function () { //等待所有dom绘制完成后就执行 $("#send").click(function () { $.get("Default.aspx", { //发送的数据 "username": $("#username").val(), "content": $("#content").val() }, function (data, textState) { $("#resText").html(data); //将返回的数据加到resText中 },"html");//要求返回html }); }); //$(document) </script> </head> <body> <form id="form1" action="#"> <p>评论:</p> <p>姓名: <input type="text" name="username" id="username" /></p> <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交"/></p> </form> <div class='comment'>已有评论：</div> <div id="resText" > </div> </body> </html>
然后简历一个default.aspx页面，在后台代码中添加下面代码：
protected void Page_Load(object sender, EventArgs e) { string username = Request.Form["username"]; //post方法传递的参数使用Form获取 if (string.IsNullOrEmpty(username)) { username = Request.QueryString["username"];//get方法传递的参数使用QueryString获取 } string content = Request.Form["content"]; if(string.IsNullOrEmpty(content)) { content = Request.QueryString["content"]; } string str = "<p>" + username + "说:" + "</p>" + content + ""; Response.Write(str); }
起初就是得不到传过去的值，后来调试发现，得到的值为空，恍然大悟啊
要获取get方法的参数，使用Request.QueryString["username"];
要获取post方法的参数，使用Request.Form["username"];
本例子中两种方式都可以。
(4)$.post(url [,data] [,callback] [,type] )的用法和上面的差不多，区别如下
a1,get请求会将参数跟着url后面传递，post方法将参数做为http消息的实体内容发送给web服务器。
b2,get方式对传输数据有大小限制(小于2kb),使用post理论上不受限。
c3,get方式请求的数据会被缓存，可以从浏览器历史记录中查看，有安全问题。
d4,get方式和post方式在asp.net服务器端获取方式不同，参看上面的例子。
5，$.getScript()和$.getJson()方法
(1)有时页面初次加载不需要全部的javascript文件，可以使用$.getScript()在需要的时候加载如下：
$.getScript('jquery.color.js',function(){ //回调函数，加载成功后执行 });
下面是一个例子：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function () { //等待所有dom绘制完成后就执行 $("#send").click(function () { $.getScript("test.js"); }); }); //$(document) </script> </head> <body> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论：</div> <div id="resText" > </div> </body> </html>
要加载的js
var comments = [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]; var html = ''; $.each( comments , function(commentIndex, comment) {//$.each前面的参数是集合，回调函数里的第二参是单个对象或元素 html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html);
注意方法：$.each()用来遍历数组和对象，如
$.each( comments , function(commentIndex, comment) {
//$.each前面的参数comments是集合，commentIndex是对象的成员或数组的索引，comment是单个对象或元素
} comment是comments的一个元素。
(2)$.getJson()用于加载json文件，下面是例子：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); }) }) }) //]]> </script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论：</div> <div id="resText" > </div> </body> </html>
test.json
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]
然后就可以加载了。
6 $.ajax()方法，这是一个底层ajax实现，结构是$.ajax(options).如下图
下面是一个例子：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript" > $(document).ready(function () { //等待所有dom绘制完成后就执行 $("#send").click(function () { $.ajax({ type: "GET", //方法get,post url: "test.json", //请求地址 dataType: "json", //返回类型 success: function (data) { //成功后执行的函数，data是返回数据 $("#resText").html(); //清空内容 var html=''; $.each(data, function (index, content) { html += '<div>' + content["username"] + '说:' + content["content"] + '</div>'; }); $("#resText").html(html); } }); }); }); //$(document) </script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论：</div> <div id="resText" > </div> </body> </html>
test.json
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]
<form id="form1" action="#"> <p>评论:</p> <p>姓名: <input type="text" name="username" id="username" /></p> <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交"/></p> </form> <div class='comment'>已有评论：</div> <div id="resText" > </div>
7,
(1)serialize()方法，序列化元素，作用于一个jQuery对象，将DOM元素序列化为字符串，用于Ajax请求。
(2)
$("#send").click(function () { var $data = $(":checkbox,:radio").serialize();//取出来选中的checkbox和radio alert($data); //比如输出 check=1&check=2&radio=1 对应value });
(3)$.param()方法用来对一个数组或者对象按照key/value进行序列化。
var obj = { a: 1, b: 2, c: 3 }; var k = $.param(obj); //对一个数组或对象按照key/value序列化 alert(k) // 输出 a=1&b=2&c=3
(4)
<script type="text/javascript"> $(function(){ $("#send").click(function(){ $.get("get1.php", $("#form1").serialize() , function (data, textStatus){ $("#resText").html(data); // 把返回的数据添加到页面上 } ); }) }) </script>
直接把表单form1全部提交过去，这样对于表单数据较多时有好处。
8,jquery中的全局事件
(1)通过jQuery提供的一些自定义全局函数，能够为各种与ajax相关的事件注册回调函数。当ajax请求开始时，
会触发ajaxStart()方法的回调函数,当ajax请求结束时，会触发ajaxStop()方法的回调函数。这些都是全局方法。
ajaxComplete(callback) ajax请求完成时执行的函数
ajaxError(callback) ajax请求失败时执行的函数，捕捉到的错误可以做为最后一个参数传递
ajaxSend(callback) ajax请求发送前执行的函数
ajaxSuccess(callback) ajax请求成功执行的函数。
如果想让某个ajax请求不受全局方法的影响，可以使用$.ajax()方法时设置global为false.
<br/> <div id="loading">加载中...</div>
当加载是显示这个提示：
//共用这2个全局的ajax事件 $("#loading").ajaxStart(function () { $(this).show(); }); $("#loading").ajaxStop(function () { $(this).hide(); });
