<2>jQuery事件和jQuery中的Ajax

接着上面一篇继续。其实jquery的内容跟客户端javascript内容基本是一一对应的。

三、jquery 事件
当用户浏览页面时，浏览器会对页面代码进行解释或编译。这个过程实质是事件驱动的，即页面在加载时执行一个load事件，在这个事件中实现浏览器编译页面代码的过程。

1. jquery事件对象
需要知道的最重要的一件事情是，每个事件处理程序都传入一个jquery事件对象作为第一个参数，该对象的字段提供了与该事件相关的详细信息（如鼠标指针的坐标）。通常，调用事件处理程序时只带有事件对象这个唯一参数，如果用trigger()显式触发事件，可以传入额外的参数数组，这些参数在第一个对象参数之后传递给事件处理程序。
Jquery通过定义自己的Event对象来隐藏浏览器之间的实现差异。Jquery事件对象只要以w3c标准为标准，同时也实现了一些实际的事件标准。Jquery会将一下所有字段从原生Event对象中复制到jquery对象上（尽管对于特定事件类型来说有些字段值为undefined）：



1. 事件机制
严格来说，事件在触发后被分为两个阶段（前面客户端javascript部分说到是三个阶段，一捕获，二响应，三冒泡）。一是捕获，另一个则是冒泡（bubbling）。但遗憾的是大多数浏览器并不是都支持捕获阶段，jquery也不支持。因此在事件触发后往往执行冒泡过程。所谓的冒泡其实就是事件执行的顺序。
代码中可以使用事件的stopPropagation()方法阻止事件的冒泡过程，还可以通过语句return false实现停止事件的冒泡。
如：
$(“body, div, #button”).click(function(event){
…
event.stopPropagation(); // 阻止冒泡过程。
})

2. 页面载入事件ready(), OnLoad()
Jquery的ready和javascript的onLoad事件在执行时间上有区别。
1）onLoad方法必须是页面中全部元素完全加载到浏览器后才触发，如果页面中的图片过多或过大则要等OnLoad()方法执行完毕用户才能进行其他操作；
2）jquery的ready方法只要等页面的dom模型加载完毕就会执行。Jquery脚本加载到页面时，会设置一个isReady标记，用于监听页面加载的进度，当遇到执行ready()方法时，通过查看isReady是否被设置，如果未被设置说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，全部加载完成后再将未完成的部分通过缓存一一执行。

3. 绑定事件
1）$(“button”).click(function(){
…
});

2) 通过bind方法绑定。
bind(type, [data], fn);其中type可以是click, mousemove等，也可以是自定义事件，data可选，是传给回调函数的数据，作为event.data属性值传递给事件对象，fn就是回调函数。
1) 如：$(“#button”).bind(“click”, function(){
…
});
带可选参数：
$(“#button”).bind(“click”, {msg:message}, function(event){
    $(“#divTip”).show().html(event.data.msg);
})



还可以同时绑定多个事件，如:
$(“p”).bind(“a b”, fn); // 事件a和b之间用空格隔开，都绑定到fn处理方法上。

2) bind还可以通过映射的方式绑定函数。
$(“.txt”).bind({
focus:function(){
…
},
change:function(){
…
}
})

3) 还可以指定命名空间，事件响应只在指定的命名空间内有效。这在模块化开发中很重要。
在绑定事件处理器到命名空间时只需要在事件后加上点（.）和命名空间即可，如：
       $(“a”).bind(“mouseover.myMod”, fn); //myMode为命名空间
       $(“a”).bind(“mouseover.myModA.myModB”, fn); //myModeA和myMOdeB为命名空间,绑定到两个命名空间

$(“a”).unbind(“mouseover.myMod”);// 解绑带命名空间的事件。

4. 切换事件hover(), toggle()
在jquery中，有两个方法用于事件的切换，一个是hover()，另一个是toggle()。
1) hover()
hover()方法可以使元素在鼠标悬停和鼠标移出的事件中进行切换，实际使用中可以通过jquery中的事件mouseenter和moulseleave进行替换。
$(“a”).hover(function(){}, function(){})
和
$(“a”).mouseenter(function(){}) + $(“a”).mouseleave(function(){})
是等价的。

2) toggle()
toggle()方法可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

5. 移除事件 unbind()
Unbind([type], [fn]), 参数type是移除的事件类型，如“check””click”, fn为需要移除的事件处理函数。如果该方法不带参数则移除所有绑定的事件。

6. 触发事件 trigger(), click()
当用户使用鼠标，键盘或触发其他事件类型时，注册的事件处理程序会自动调用。然而如果能手动触发事件有时会很有用。手动触发事件最简单的方法是不带参数调用事件注册的响应方法。如，click().

   同时注意，jquery的事件触发机制是同步的，不涉及事件队列。当触发一件事件时，在调用的触发方法返回之前，事件处理程序会立刻调用。

   Jquery定义了一个更通用的trigger()方法。通常，调用trigger()时会传入事件类型字符串作为第一个参数。与bind(),unbind()不同，在传入的字符串中不能指定多个事件类型。还可以传入Event对象作为第一个参数，如果传入的是jquery事件对象，该对象会直接传递给触发的处理程序。如果传入的是普通对象，会创建一个新的jquery Event对象，普通对象的属性会添加到新对象中。这样，可以很容易传递额外数据给事件处理程序。

给事件处理程序传递额外数据的另一种方式是，在手动触发事件时，给trigger()传入第二个参数。第二个参数会成为每个触发的事件处理程序的第二个参数。如果传入数组作为第二个参数，数组的每一项会作为独立参数传递给触发的处理程序。

7. 其他事件one()
1) one()方法是为所选的元素绑定只触发一次的处理函数：one(type, [data], fn).
2) trigger(type, [data])是在所选择的元素上触发指定类型的事件。可选参数data的用法跟bind方法一样。

四、jquery中的ajax
在web应用编程技术中，ajax很流行，它使用http脚本来按需加载数据，而不需要刷新整个页面。

Ajax是Asynchronous JavaScript and XML的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收返回的数据。

不使用jquery，使用javascript也可以达到同样的目的，前面《脚本化XMLHttpRequest》时介绍过，需要几个步骤，先实例化XMLHttpRequest对象，再给open方法设置参数，再设置请求头，设置onreadystatechange响应函数，最后用send发送。但使用jquery就能简化很多。

1. load()方法
传统的javascript中，使用XMLHttpRequest对象异步加载数据，而在jQuery中，使用load()方法可以同样加载，语法格式：
load(url, [data], [callback])

其中，参数url为被加载的页面地址，可选参数[data]表示发送到服务器的数据，格式为key/value。可选参数callback表示加载成功后，返回至加载页的回调函数。

关于调用者：如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

load是所有jquery工具中最简单的，向它传入url，它会异步加载该url的内容，然后将内容插入每一个选中元素中，替换掉已经存在的任何内容。如：
// 每隔60秒加载并显示最新的状态报告
setInterval(function(){ $(‘#status’).load(“status_report.html”);}, 60000);

load方法上面提到过跟ready()比较。如果传给该方法的第一个参数是函数而不是字符串，则load()方法是事件处理程序注册方法而不是Ajax方法。
如果只想显示被加载文档的一部分，可以在url后面添加空格(空格是必须的)和一个jquery选择器，当url加载完成后，jquery会用指定的选择器来从加载好的html中选取需要显示的部分（注意这个选择器是从需要被加载url的内容中选取）。如：

// 加载并显示天气预告的温度部分
$(‘#temp’).load(“wheather_report.html  #temperature”);

除了必须的url参数，load方法还接收两个可选参数，第一个表示数据，可以追加到url后面，或者与请求一起发送。如果传入的是字符串则会追加到url后面（放到”?”或”&”后面），如果传入对象，该对象会被转化为一个用”&”分隔的名/值对后与请求一起发送（对象转化为字符串的具体细节在下面的jQuery.getJSON()时会描述）。通常情况下，load()方法发送http get请求，但是如果传入数据对象，则会发送post请求。

Load()方法的另一个可选参数是一个回调函数。当ajax请求成功或未成功，以及url加载完毕并插入选中元素时（如果请求成功），会调用该回调函数。如果没有指定任何数据，回调函数可以作为第二参数传入，否则，必须是第三个参数。

在jquery对象的每一个元素上都会调用回调函数，并且每次调用都会传入三个参数：没加载url的完整内容，状态码字符串，以及用来加载该url的XMLHttpRequest对象。其中状态参数是jquery的状态码，不是http的状态码。

2. ajax工具函数
jquery的其他ajax高级工具不是方法，而是函数，可以通过jquery或$直接调用，而不是在jquery对象上调用jQquery.getScript()加载并执行JavaScript代码文件。jQuery.getJSON()加载url，将其解析为JSON，并将结果传递给指定的回调函数。这两个函数都会调用一个更通用的url获取函数：jQuery.get()。最后，jQuery.post()和jQuery.get()很类似，只是执行的是http Post请求。与load()方法一样，所有这些函数都是异步的：在任何数据加载前他们就会返回调用者加载结果则通过调用指定的回调函数来通知。

1） jquery.getScript()
语法格式：
$.getScript(url, [callback])

第一个参数是javascript代码文件的url。它会异步加载文件，加载完成后在全局作用域执行该代码。他能同时适用于同源和跨源脚本。
// 从其他服务器动态加载脚本
jQuery.getScript(“http://example.com/js/widget.js”);
可以传入回调函数作为第二个参数，在这种情况下，jQuery会在代码加载和执行完成后调用一次该回调函数。

// 加载一个类库，并在加载完成时立刻使用它
jQuery.getScript(“js/jquery.my_plugin.js”, function(){
    $(‘div’).my_plugin();
});
jQuery.getScript()通常会使用XMLHttpRequest对象来获取要执行的脚本内容。但对于跨域请求（脚本存放在与当前文档不一样的服务器上），jQuery会使用<script>元素来加载脚本。在同源情况下，回调函数的第一个参数是脚本的文本内容，第二个参数是”success”状态码，第三个参数则是用来获取脚本内容的XMLHttpRequest对象。在同源情况下，jQuery.getScript()函数的返回值也是该XMLHttpRequest对象，跨源请求不存在XMLHttpRequest对象，并且脚本的内容获取不到，这种情况下，回调函数的第一个和第三个参数是undefined，jQuery.getScript()的返回值也是undefined。

注意：传递给jquery.getScript()的回调函数仅在请求成功完成时才会被调用。如果需要在发生错误以及成功时都得到通知，则需要使用底层的jquery.ajax()函数。其他三个工具函数也是如此。
2） jQuery.getJSON()
getJSON()与getScript()类似，它会获取文本，然后处理一下再调用回调函数，区别是jQuery.getJSON()获取到文本后不会将其当做脚本执行，而会将其解析为JSON(使用jQuery.parseJSON()函数).
语法格式：
$.getJSON(url, [data], [callback])

getJSON()只有在传入了回调参数时才有用，当成功加载url以及将内容成功解析为JSON后，解析结果会作为第一个参数传入回调函数中。与jQuery.getScript()一样，回调函数的第二个和第三个参数是“success”状态码和XMLHttpRequest对象。
与jQuery.getScript()不同，jQuery.getJSON()接受一个可选的数据对象参数，就和传入load()方法一样。如果传入数据到jQuery.getJSON()中，该数据必须是第二个参数，回调函数是第三个。如果不传入任何数据，则回调函数是第二个参数。如果数据时字符串，则他会被添加到url的”?”或”&”后面。如果数据是一个对象，则它转化为字符串，然后添加到url上。

如果传递给jQuery.getJSON()的url或数据字符串在末尾或“&”字符前含有“=？”字符串，则表明这是一个JSONP请求。jQuery会创建一个回调函数，并用该回调函数的函数名替换掉“=?”后面的“?”。接着jquery.getJSON()的行为就会想请求脚本文件一样，而不是JSON对象。由于JSONP被当做脚本来处理，因此这意味着JSON格式的数据可以跨域请求。


3） jQuery.get()和jQuery.post()
语法格式：
$.get(url, [data], [callback], [type])

jQuery.get()和jQuery.post()获取指定url的内容，如果有数据的话，还可以传入指定数据，最后则将结果传递给指定的回调函数。jQuery.get()使用http get请求实现，jQuery.post()使用http post请求，其他两者都一样。
与jQuery.getJSON()一样，这两个方法也接受相同的三个参数，必须的url，可选的数据字符串或对象，以及一个技术上可选但实际总会使用的回调函数。调用的回调函数会被传入三个参数：第一个参数是返回的数据，第二个参数是“success”字符串，第三个则是XMLHttpRequest对象（如果有的话）：
jQuery.get(“debug.txt”, alert);

除了上面描述的三个参数，还有两个方法接受可选的第四个参数，该参数指定被请求数据的类型。第四个参数会影响在传入回调函数前数据的处理。Load()方法是用”html”类型。jQuery.getScript是用“script”类型，jQuery.getJSON()则使用“json”类型。与上面这些专用函数相比，jquery.get()和jquery.post()更灵活，可以指定使用的类型，有六种类型可选。




如果调用jquery.get(),jquery.post()或jquery.ajax()函数时没有指定以上类型中的任何一个，jquery会检查http响应中的Content-Type头。如果头部信息包含“xml”字符串，则传入回调函数中的是xml文档；如果包含“json”字符串，则数据被解析成JSON并把解析后的对象传给回调函数；如果包含“javascript”字符串，则数据被当做脚本执行。如果以上都不符合，则数据会被当做纯文本处理。


4） jquery.ajax()函数
jquery所有Ajax工具最后都会调用jQuery.ajax()。此函数只接受一个参数：一个选项对象，该对象的属性指定ajax请求如何执行。如jQuery.getScript(url, callback)与以下jQuery.ajax()的调用等价：
jQuery.ajax({
  type:”GET”,  // http请求方法
  url:url,  // 要获取数据的url
  data:null,  // 不给url添加任何数据
  dataType:”script”,  // 一旦获取数据，立刻当做脚本执行
  success:callback // 完成后调用该函数
});