<!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:SimSun; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:宋体; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@SimSun"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:SimSun;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:227307783; mso-list-type:hybrid; mso-list-template-ids:-2101454000 2046733302 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.25in; mso-level-number-position:left; margin-left:.25in; text-indent:-.25in; font-family:Wingdings; mso-fareast-font-family:SimSun; mso-bidi-font-family:"Times New Roman";} @list l1 {mso-list-id:254946629; mso-list-type:hybrid; mso-list-template-ids:1337110354 288643712 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l1:level1 {mso-level-start-at:0; mso-level-number-format:bullet; mso-level-text:; mso-level-tab-stop:.25in; mso-level-number-position:left; margin-left:.25in; text-indent:-.25in; font-family:Symbol; mso-fareast-font-family:SimSun; mso-bidi-font-family:"Times New Roman";} @list l2 {mso-list-id:1574852399; mso-list-type:hybrid; mso-list-template-ids:991602380 -1187496860 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l2:level1 {mso-level-tab-stop:.25in; mso-level-number-position:left; margin-left:.25in; text-indent:-.25in;} @list l3 {mso-list-id:1615361040; mso-list-type:hybrid; mso-list-template-ids:844674854 -172621238 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l3:level1 {mso-level-tab-stop:.25in; mso-level-number-position:left; margin-left:.25in; text-indent:-.25in;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} -->
Jquery Ajax
传统的 javascript ajax例子
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入 XMLHttpRequest
//IE5 IE6是以 ActiveXObject的方式引入 XMLHttpRequest的
if (window.ActiveXObject){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//除 IE5 IE6 以外的浏览器 XMLHttpRequest是 window的子对象
else if (window.XMLHttpRequest){
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>
由于 jquery对 ajax进行了封装,因此 jquery开发 ajax变得极其简单。
Jquery提供了下列 ajax的方法:
· $.ajax() 这是最底层的方法,给予更多控制,但要你写的代码也更多
· load(), $.get(), $.post() ,这 3个是第二层的方法
· $.getScript() and $.getJSON() 方法,这 2个是第三层的方法
注意: load 方法的回调函数是不论成功与否都调用,而 $.get(), $.post(), $.getScript() and $.getJSON() 的回调函数只有 response 的状态是 success 才会调用该方法
load() 方法
尽管使用 load() 可以获取动态和静态的文件,但通常用于获取静态文件 。
任何 jquery 对象都可以调用 load 方法。当 jquery 对象调用 load 方法后,就用 load 回来的 data 作为该 jquery 对象的 content 。
注意: load方法和其他 ajax的方法(如 $.ajax() , $.get(), $.post() , $.getScript() and $.getJSON() )不同,其他的 ajax 方法都是 jquery 的全局函数,不需要跟随任何的 jquery 对象,而 load() 则是对 jquery 对象进行操作的 。
load方法的格式: load( url, [data], [callback] )
其中
url:是指要导入文件的地址
data: (可选 ) 要导入的是动态文件时,我们可以把要传递 的参数放在这里
callback: (可选 ) 请求完成时的回调函数,无论请求成功或失败
例:
$(function(){
$("#send").click(function(){
$("#resText").load("test.html"); //load test.html作为 #resText的 content
})
})
Load方法还可以对 load入的内容进行筛选后显示。例如下面代码就是只显示 test.html里的 class为 para的内容
$("#resText").load("test.html .para");
如果要传递参数,那就要通过 load()的 data参数。
如:
$("#resText").load("test.html .para",{name: “rain”, age: “30”} , function (){//..});
注意:如果有 data 参数,那么就会以 POST 的形式 传递,如果没有 data 参数则以 GET 方式 传递
$("#resText").load("test.html .para", function (){//..});
注意:上面的 load方法只有 url and callback2个参数也可以
回调方法参数
$("#resText").load("test.html",
function (responseText, textStatus, XMLHttpRequest) {
alert( $(this).html() ); //$(this)指的是当前 dom对象,即 $("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus); //请求状态: success, error
alert(XMLHttpRequest); //XMLHttpRequest对象
});
$.get() 和 $.post() 方法
load方法通常用来获取静态文件。要获取动态数据,通常用 $.get(), $.post() or $.getJSON()
注意: load() 则是对 jquery 对象进行操作的,而其他的 ajax 方法都是 jquery 的全局函数,不需要跟随任何的 jquery 对象。
$.get()是用 GET方式来进行异步请求
$.post()是用 POST方式来进行异步请求
$.get()的格式是: $.get( url [, data] [, callback] [, type] )
其中
url:是请求的 url
data: (可选 ) 发送到 server的 key/value数据会以 querystring附加到请求的 url中
callback: (可选 ) 载入成功时的回调元素(只有 response 的状态是 success 才会调用该方法 ,这一点和 load 不一样 ,load 的回调方法是不论成功与否都调用 )
type: (可选 ) 服务器返回的 response的格式,包括 xml, json, html, text, script
$.post()的格式和 $.get()完全相同。
使用 $.get()且返回值类型为 html的例子:
$.get("get1.php",
{ // 传递的参数
username : $("#username").val() ,
content : $("#content").val()
},
function (data, textStatus){ // 回调函数
//data: 返回的内容,可以是 xml, html, json
//textStatus: 请求状态 :success/error/timeout/notmodified
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
返回 xml的例子(和上面代码唯一不同的是回调函数里对 data的处理方式)
function (data, textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";
$("#resText").html(txtHtml);
}
注意:由于要求服务器端返回的是 xml,因此需要在服务器端设置 content-type
header("Content-Type:text/xml; charset=utf-8"); //php
返回 json的例子
(和上面代码不同的是回调函数里对 data的处理方式,而且 $.get方法使用第四个参数为 ”json”)
$.get("get1.php",
{ // 传递的参数
username : $("#username").val() ,
content : $("#content").val()
},
function (data, textStatus){ // 回调函数
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'>"+username+":"+content+"</div>";
$("#resText").html(txtHtml);
}, “json”
);
$.getJSON 方法
用于异步获取 json数据。其回调函数通常只有 data 一个参数
$.getJSON(url, data, callback) 等价于 $.get(url, data, callback, “json”)
例子:
$.getJSON ("get1.php",
{ // 传递的参数
username : $("#username").val() ,
content : $("#content").val()
},
function (data){ // 回调函数,通常只有 data 一个参数
var username = data.record1;
// 。。。
}
);
对于返回的 json data,我们可以用 jquery的全局函数 $.each()来进行遍历。
全局函数 $.each() 可以用来遍历对象(包含 json 对象)或数组
$.each()不同于 jquery对象的 each()方法,它是全局函数,不操作 jquery对象。
$.each() 是以要遍历的对象 / 数组作为第一个参数,以回调函数作为第二个参数。回调函数有2个参数,第一个为对象成员 / 数组的索引,第二个为对应于索引的 element 。
例:
$.getJSON('test.json', function(data){
$.each( data , function(i, item) {
html += item['p1'] + ':' + item['p2'];
$('#resText').html(html);
})
});
$.getScript 方法
用于异步加载 javascript文件。
$.getScript(url, data, callback) 等价于 $.get(url, data, callback, “script”)
有时候,在页面初次加载时就取得所需的全部 javascript文件是没有必要的。虽然可以在需要哪个 javascript文件时,动态的创建 <script>标签, jquery代码如下:
$(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”);
或
$(“<script type=’text/javascript’ src=’test.js’/>”).appendTo(“head”);
但这种方式并不理想。为此, jquery提供了 $.getScript()方法来直接加载 .js文件。与加载一个 html片段一样简单方便,并且不需要对 javascript文件进行处理, javascript会自动执行。
代码如下:
$(function(){
$('#send').click(function() {
$.getScript('test.js');
});
})
$.getScript()方法也可以有回调方法,回调方法的参数通常为空
$.getScript('test.js',
function() {
alert('javascript loaded');
}
);
$.ajax() 方法
略,有空再研究
JSONP
什么是 JSONP?
由于安全方面的考虑, Javascript包括 ajax 被限制了跨域访问的能力。而 JSONP 则可以使得 Javascript and ajax 实现跨域访问 。 JSONP是一个非官方的协议,它允许在服务器端集成 Script tags返回至客户端,通过 javascript callback 的形式实现 跨域访问。
JSONP 的原理
Jsonp 实际上是利用动态载入 javascript ,同时动态加载的 javascript 会自动运行来实现跨域访问 。我们先看看下面这个最简单的例子,然后再详细讲解。
demo.html
<html>
<head>
<script type="text/javascript">
function say(words) {
alert(words);
}
</script>
</head>
<body>
<script type="text/javascript" src=" demo.js "></script>
</body>
</html>
demo.js
say("Hello!");
运行 demo.html 文件后就会弹出“ Hello!”的警告框了?你可能会觉得这个例子很简单,没什么了不起的,甚至会在想:这和 JSONP 有关系吗?那么,我可以很肯定的告诉你:有关系!而且,这个例子实际上就是 JSONP 的原型 !你也许会想到, JSONP 不是访问远程数据的吗?对,试想一下,如果 demo.js 文件在其它域的服务器上呢?结果是一样的 ,不会有 javascript无法跨域访问的问题。例如你把上面的 demo.html存到 local,然后把 demo.js放到一个服务器上,再修改 demo.html里的 <body>下的 <script>的 src属性指向服务器里的 demo.js,同样会弹出“ Hello!”的警告框。
demo.js 文件的内容是对一个函数(通常称之为:回调函数)的调用,而需要交互的数据则通过参数形势进行返回 。所以通过 JSONP 访问的服务器需要提供一个可以设置回调函数名的接口,就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback ,所以,综上所述 JSONP 是需要服务器端的支持的
那么我们把上面
1. demo.js 变成 demo.php/demo.jsp,
2. 把 demo.js 里的“ say”换成回调函数
3. 把 demo.js 里的“ Hello!”换成要返回的实际数据(必须是 json 格式! )
就是一个典型的 jsonp例子
demo.html
<html>
<head>
<script type="text/javascript">
function myCallBack (jsonData) {
alert(jsonData.name);
}
</script>
</head>
<body>
<script type="text/javascript"
src=" http://xxx/demo.php?jsoncallback=myCallBack "></script>
</body>
</html>
demo.php
<?php
$callback= isset($_GET['jsoncallback']) ? $_GET['jsoncallback'] : '';
$json=’{
“name”: “tomson”,
“age”: 30
}’;
echo $callback . '(' . $json . ')';
?>
JQuery Ajax 通过 JSONP 进行跨域访问
Jquery使用 jsonp有 2个条件:
1. 通常使用 $.getJSON() 方法
2. $.getJSON() 的参数 url必须包含参数“ jsoncallback=? ” , 这个问号会被 jQuery 自动替换为 getJSON() 方法里的回调函数的函数名 (如果是一个匿名函数, jQuery 会自动生成一个带时间戳的函数名 )
$.getJSON("http://xxx/demo.php?jsoncallback=?",
function(data) {
$('#result').val(data.name);
});
注意: JSONP 的实现方法并不是只有回调函数一种,还有其它方式,例如将数据赋值给一个变量等。
序列化元素
serialize() 方法
我们常常通过 ajax技术异步提交表单。例如:
$("#send").click(function(){
$.get("get1.php",
{
username: $(“#username”).val(),
content: $(“#content”).val(),
},
function (data, textStatus){
$("#resText").html(data);
}
);
})
上述方式对于少量字段的表单就适用,但对于大量的表单字段,这样逐个逐个字段传递参数,就会缺乏弹性。 Jquery为这一常用的操作提供了一个简化的方法—— serialize(),
serialize() 也是作用于 jquery 对象上,它能够将 dom 元素的内容序列化为字符串,用于 ajax 请求 。例如上述代码等价于:
$("#send").click(function(){
$.get("get1.php",
$(“#form1”.serialize() ,
function (data, textStatus){
$("#resText").html(data);
}
);
})
即使表单里增加字段,上面代码依然有效,不需要添加代码。
注意:上述代码有效的原因是, $.get() 方法的 data 参数不仅可以使用映射方式 ,如
{
username: $(“#username”).val(),
content: $(“#content”).val(),
}
也可以使用字符串形式 ,如
“username=”+encodeURIComponent($(‘#username’).val())
+“content=”+encodeURIComponent($(‘#content’).val())
用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,就应该使用 serialize 方法,它会自动编码 。
因为 serialize方法作用于 jquery对象,所以不光只有表单能使用他,其他选择器选取的元素也能使用它 。如
$(“:checkbox,:radio”).serialize();
上述代码是把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化
serializeArray() 方法
它是一个与 serialize很类似的方法, serializeArray() 不是返回字符串,而是将 DOM 元素序列化之后,返回 JSON 格式的数据 。
既然返回的是一个 json object,那么就可以使用 $.each将其迭代输出。例如
var fields = $(":checkbox,:radio").serializeArray() ;
console.log(fields);// Firebug 输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
$.param() 方法
它是 serialize()方法的核心,用来对一个数组或对象按照 key/value进行序列化。比如将一个普通的对象序列化:
var obj = {a:1,b:2,c:3};
var k = $.param(obj) ;
alert(k); // 输出 a=1&b=2&c=3
jquery 中的 Ajax 全局事件
jquery简化 ajax操作不仅体现在调用 ajax方法和处理响应方面,而且还体现在对调用 ajax方法的过程中的 http请求的控制。通过 jquery 提供的一些自定义全局函数,能够为各种与 ajax 相关的事件注册回调函数 。例如当 ajax 请求开始时,会触发 ajaxStart () 方法的回调函数 ;当 Ajax 请求结束时,会触发 ajaxStop () 方法的回调函数 。这些方法都是全局的方法,因此无论创建它们的代码位于何处,无论是哪个 jquery 对象 call these ajax 全局事件的方法,只要有 ajax 请求发生时,就会触发它们 。
例如,如果用 ajax加载大图片会比较慢,我们应该在 ajax请求开始时显示“ loading”, ajax请求结束后隐藏“ loading”。代码如下:
$(“#loading”).ajaxStart(function() { // 无论哪里 call ajax 都会触发该事件
$(this).show(); //$(this) 指 id 为 loading 的元素
});
$(“#loading”).ajaxStop(function() {// 无论哪里 call ajax 结束都会触发该事件
$(this).hide();
});
注意:如果在此页面的其他地方也使用 ajax ,该提示信息任然有效,因为它是全局的。
jQuery的 ajax有下列全局事件:
l ajaxStart(callback) Ajax 请求开始时执行的函数
l ajaxStop(callback) Ajax 请求结束时执行的函数
l ajaxComplete(callback) Ajax 请求完成时执行的函数
l ajaxError(callback) Ajax 请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递
l ajaxSend(callback) Ajax 请求发送前执行的函数
l ajaxSuccess(callback) Ajax 请求成功时执行的函数
如果想使某个 ajax 请求不受全局事件的影响,那么可以在使用 $.ajax(options) 方法时,将参数中的 global 设置为 false 。代码如下:
$.ajax ({
url: “test.html”,
global: false // 不触发全局 ajax 事件
})