09-jQuery和ajax-2

第九节：jQuery和ajax-2

jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高

load()方法

a、load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中 结构为：load(url,[data],[callback])。
使用url参数指定选择符可以加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格

b、传递方式
load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，采用POST

c、回调参数
必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest对象
只要请求完成，回调函数就会被触发

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){    //respnoseText 请求返回的内容    //textStatus 请求状态 ：sucess、error、notmodified、timeout    //XMLHttpRequest })

load方法参数

参数名称 【类型】 说明
url 【String】 请求HTML页面的URL地址
data(可选） 【Object】 发送至服务器的key / value数据
callback(可选) 【Function】 +请求完成时的回调函数，无论是请求成功还是失败

load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用.get()和.post()或$.ajax()方法。

注意：.get()和.post()方法是jquery中的全局函数

---

.get()和.post()方法

$.get()方法

a、$.get()方法使用GET方式来进行异步请求
结构为：$.get(url,[data],callback,type)
如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type类型
代码如下：header("Content-Type:text/xml:charset=utf-8") //php

b、$.get()方法参数解析
参数 【类型】 说明
url 【String】 请求HTML页的地址
data(可选）【Object】发送至服务器的key/ value 数据会作为QueryString附加到请求URL中
callback(可选【Function】 载入成功的回调函数（只有当Response的返回状态是success才调用该方法）
type(可选）【String】服务器返回内容的格式，包括xml、html、script、json、text和_default

$.post()方法

它与$.get()方法的结构和使用方式相同，有如下区别
a、GET请求会将参数跟张乃URL后进行传递，而POST请求则是作为Http消息的实体内容发送给web服务器，在ajax请求中，这种区别对用户不可见。

b、GET方式对传输数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论不受限制）。

c、GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史纪录中读取这些数据，
如：账号、密码。在某种情况下，GET方式会带来严重的安全问题，而POST相对来说可以避免这些问题。

d、GET和POST方式传递的数据在服务端的获取也不相同。在PHP中，GET方式用GET[]获取；POST方式用_POST[]获取;两种方式都可用$_REQUEST[]来获取。

---

总结

使用load()、.get()和.post()方法完成了一些常规的Ajax程序，如果还需要复杂的Ajax程序，就需要用到$.ajax()方式

$.ajax()方法

.ajax()方法是jquery最底层的Ajax实现，它的结构为.ajax(options)
该方法只有一个参数，但在这个对象里包含了$.ajax()方式所需要的请求设置以及回调函等信息，参数以key / value存在，所有参数都是可选的

$.ajax()方式常用参数解析

参数 类型 说明
url 【String】(默认为当前页地址)发送请求的地址
type 【String】请求方式（POST或GET）默认为GET
timeout 【Number】设置请求超时时间（毫秒）
dataType 【String】预期服务器返回的类型。可用的类型如下

xml:返回XML文档，可用jquery处理
html:返回纯文本的HTML信息，包含的script标签也会在插入DOM时执行
script：返回纯文本的javascript代码。不会自动缓存结果，除非设置cache参数。注意：在远程请求时，所有的POST请求都将转为GET请求
json:返回JSON数据
jsonp:JSONP格式，使用jsonp形式调用函数时，例如：myurl?call back=?,jquery将自动替换后一个？为正确的函数名，以执行回调函数
text:返回纯文本字符串
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数
function(XMLHttpRequest){
this;//调用本次Ajax请求时传递的options参数
}
complete Function 请求完成后的回调函数（请求成功或失败时都调用）
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串
function(XMLHttpRequest,textStatus){
this;//调用本次Ajax请求时传递的options参数
}
success Function 请求成功后调用的回调函数，有两个参数
(1)由服务器返回，并根据dataTyppe参数进行处理后的数据
(2)描述状态的字符串
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;//调用本次Ajax请求时传递的options参数
}
error Function 请求失败时被调用的函数
global Boolean 默认为true。表示是否触发全局Ajax事件，设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件

十一、ajax

ajax请求：

   1、通有方式：$.ajax(prop);prop是一个hash表，它可以传递的key/value有以下几种:     (String)type：数据传递方式(get或post)。     ((String)url：数据请求页面的url     ((String)data：传递数据的参数字符串，只适合post方式     ((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")     ((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false     ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout     ((Boolean)global：是否为当前请求触发ajax全局事件，默认为true     ((Function)error：当请求失败时触发的函数。     ((Function)success：当请求成功时触发函数     ((Function)complete：当请求完成后出发函数  2、$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！     eg:$.get(   "ajax.asp",        { name: "young", age: "25" },        function(data){ alert("Data Loaded: " + data); }      )  3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后处理函数callback  4、$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback