jQuery笔记（AJAX）

1 AJAX

jQuery对Ajax操作进行封装，在jQuery中$.ajax()方法属于最低层的方法，第二层是$.get()，$.post()和load()方法。

1.1 load()方法

load()方法用于提取远程HTML代码并插入DOM中。它的结构为：

load(url,[,data],[,callback])

• url（string）参数表示请求HTML页面的URL地址，这个参数的结构语法是"url selector"，即它还可以引入选择器，从而获取HTML文档中的某一部分。
• data（object[可选]）参数表示用于发送至服务器的key/value数据，如果有这个参数，即load()方法使用的是POST传递方式，没有就是使用GET传递方式。
• callback（Function[可选]），请求完成的回调函数，无论成功或失败，该函数接受三个参数，responseText和textStatus，XMLHttpRequest。

如：

$('#restext').load('test.html');
//id为restext的节点元素中插入了test.html文档内容

1.2 $.get()和$.post()

$.get()与$.post()方法是jQuery的全局函数，之前的方法都是对jQuery对象进行操作的

1.2.1 $.get()方法

$.get()方法使用GET方式进行异步请求，它的结构为：

$.get(url [, data] [, callback] [, type])

其中：

• 回调函数：只有在Response的返回状态时success才会调用，接受两个参数，分别是data（返回内容如XML文档，JSON文件，HTML判断等）以及textStatus（请求状态：success，error，notmodified，timeout四种）
• type表示服务器端返回内容的格式，包括xml，html，script，json，text和_default
• data：发送至服务器的key/value数据会作为QueryString附加到请求URL中

如：

$.get('get1.php',
       {usename:$('#usename').val()},
       function(data,textStatus){
       $('#restext').append(data);//假如返回的是HTML
    })

1.2.2 $.post()方法

$.post()方法与$.get()方法使用操作一样，只是传递的方式不同。

1.3 $.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，该方法只有一个参数，这个参数是一个对象，里面包含了一些参数key/value值对：

• url（string）
• type（string）：请求方式，默认为GET
• timeout（number）：设置请求超时时间
• data（object或string）
• dataType（string）：预期服务器返回的数据类型
• contentType：上传的数据类型，默认为application/x-www-form-urlencoded
• beforeSend（function）：XMLHttpResquest是唯一一个参数，发送请求前可以修改XMLHttpResquest对象的函数，如果return false可以取消Ajax请求
• complete（function）：请求完成调用的回调函数，无论成功与否，参数是XMLHttpResquest以及textStatus
• success（functon）：请求成功后调用的回调函数，参数为
  
  • 由服务器返回，根据dataType参数进行处理后的数据
  • textStatus
• error（function）：请求失败时调用的函数，参数有XMLHttpResquest，textStatus以及errorThrown（错误信息）

---

另外，在拼接URL的时候还可能会使用encodeURIComponent()函数或$.param()方法，二者都可把字符串作为 URI 组件进行编码，$.param()作用于对象，encodeURIComponent()则是这个字符串进行转义，如：url = encodeURIComponent(a)

2 $.getJSON()

使用$.getJSON()方法可以用于加载JSON文件，它的结构如下：

$.getJSON(url [, callback]);

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});