jQuery中Ajax的基本使用（1）
Ajax全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）。AJAX并不是一种新的编程语言，而是一种将现有技术标准结合起来的新方法。使用Ajax，可以在不重新加载整个页面的情况下，并且实现异步提交，与服务器交换数据并更新部分网页的艺术，提升了用户体验。
那么首先需要弄懂同步和异步有什么区别。Web程序开发基本都是同步的，意为执行一段程序才能执行下一段。比如前端界面需要从服务器端获取某些资源，如果采用同步的话，必须等待服务端的响应并且前端接收到资源后，前端脚本程序才会向下执行，如果响应比较慢，响应时间长的话，就回引起应用程序挂起或停止。如果采用异步请求的话，前端脚本程序发送异步请求之后无需等待服务器的响应，可以直接继续执行程序，当响应就绪后对响应进行处理。使用Ajax最关键的地方就是实现异步请求，所以，我们在使用Ajax时大部分都是采用异步模式。
jQuery对Ajax做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery采用了三层封装：最底层的封装方为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高是$.getScript()和$.getJSON()方法。
1 .load()，$.get()和 $.post()的使用
1.1、.load()方法
.load()是一个局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。
.load()方法可以设置三个参数： url(这个是必须的，表示文件的 url 地址，参数类型为 String)、data(可选，发送的 key/value 数据，参数类型为 Object) callback(可选，成功或失败的回调函数，参数类型为函数 Function)。
异步加载一个html文件：
<body>
<input type="button" value="ajax异步请求" />
<div></div>
</body>
<script> $(function(){ $("input").click(function(){ $("div").load("user.html"); }); }); </script>其中user.html文档中为两个p标签：
<p class="p1">我是段落1</p>
<p class="p2">我是段落2</p>这就能显示html文件中的两个段落，如果需要从加载的文档中过滤元素这样，只显示段落1，则只需要在路径URL参数中增加需要的选择器即可：
$("div").load("user.html .p1");当然，有的时候我们不仅是只从服务端加载资源，还需要向服务端提交数据，这时我们就需要传输第二个可选参数，向服务器提交数据有两种方式：get 和 post。默认为get提交方式。
<body>
<input type="button" value="ajax异步请求" />
<div></div>
</body>
<script> $(function(){ $("input").click(function(){ $("div").load("user.php?url=http://blog.csdn.net/u014607184"); }); }); </script>
//php代码
<?php if($_GET["url"]=="http://blog.csdn.net/u014607184") { echo "我的博客主页http://blog.csdn.net/u014607184"; }else{ echo "其他网页"; }如果使用post方式提交数据的话，提交的data数据需要单独给出：
$(function(){
$("input").click(function(){
$("div").load("user.php",
{url:"http://blog.csdn.net/u014607184"}
);
});
});对应的服务端的PHP接收文件也要相应地由post方式来获得数据
<?php if($_POST["url"]=="http://blog.csdn.net/u014607184") { echo "我的博客主页http://blog.csdn.net/u014607184"; }else{ echo "其他网页"; }在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数也可以传递三个可选参数： response（返回内容） 、 Status（返回状态）、 XMLHttpRequest （对象）。
$(function(){
$("input").click(function(){
$("div").load("user.php",
{
url:"http://blog.csdn.net/u014607184"
},
function (response, status, xhr) {
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
});
});
});
这里需要注意的是XMLHttpRequest 对象，XMLHttpRequest 为JavaScript的对象，其可以用到的属性有如下几个：
这里需要注意上述ajax的传入参数中的status和XMLHttpRequest 对象的status属性有所不同，下面列出了一些常见的XMLHttpRequest 对象的status属性以及statusText的值：
1.2、$.get()方法
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。一般情况下 type 参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。第一个参数为必选参数，后面三个为可选参数。
$(function (){
$("input").click(function(){
$.get("user.php",
{
url:"http://blog.csdn.net/u014607184"
},
function(response, status, xhr){
if (status = "success") {
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
}
});
});
});使用get方法时，需要向服务器端传输的数据也可以写在第一个参数URL后面，格式如下：
$.get("user.php?url=http://blog.csdn.net/u014607184",
function(response, status, xhr){
if (status = "success") {
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
}
});1.3、 $.post()方法
$.post()方法的使用和$.get()基本上一致，但也存在一些区别，如下：
- GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
- GET 提交有大小限制（2KB） ，而 POST方式不受限制；
- GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；
- 在服务端，GET方式通过$_GET[]获取，POST 方式通过$_POST[]获取。
大部分情况下两者都能使用，在如果遇到以下情况则使用post：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
post方法的基本使用如下：
$(function (){
$("input").click(function(){
$.post("user.php",
{
url:"http://blog.csdn.net/u014607184"
},
function(response, status, xhr){
if (status = "success") {
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
}
});
});
});2 $.ajax()的使用
$.ajax()是所有 ajax 方法中最底层的方法，上述的所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，该参数是一个对象，用于传递各个功能键值对。
$.ajax()方法对象参数表
| 参数 | 类型 | 说明 |
|---|---|---|
| url | String | 发送请求的地址 |
| type | String | 请求方式：POST 或 GET，默认 GET |
| timeout | Number | 设置请求超时的时间（毫秒） |
| data | Object或String | 发送到服务器的数据，键值对字符串或对象 |
| dataType | String | 返回的数据类型，比如 html、xml、json 等 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数 |
| complete | Function | 请求完成后调用的回调函数 |
| success | Function | 请求成功后调用的回调函数 |
| error | Function | 请求失败时调用的回调函数 |
| global | Boolean | 默认为 true，表示是否触发全局 Ajax |
| cache | Boolean | 设置浏览器缓存响应， 默认为 true。 如果 dataType类型为 script 或 jsonp 则为 false。 |
| content | DOM | 指定某个元素为与这个请求相关的所有回调函数的上下文。 |
| contentType | String | 指 定 请 求 内 容 的 类 型 。 默 认 为application/x-www-form-urlencoded |
| async | Boolean | 是否异步处理。默认为 true，false 为同步处理 |
| processData | Boolean | 默认为 true，数据被处理为 URL 编码格式。如果为 false，则阻止将传入的数据处理为 URL 编码的格式。 |
| dataFilter | Function | 用来筛选响应数据的回调函数。 |
| ifModified | Boolean | 默认为 false，不进行头检测。如果为 true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的 |
| jsonp | String | 指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。 |
| username | String | 在 HTTP 认证请求中使用的用户名 |
| password | String | 在 HTTP 认证请求中使用的密码 |
| scriptCharset | String | 当远程和本地内容使用不同的字符集时，用来设置 script 和 jsonp 请求所使用的字符集 |
| xhr | Function | 用来提供 XHR 实例自定义实现的回调函数 |
| traditional | Boolean | 默认为 false，不使用传统风格的参数序列化。 如为 true，则使用 |
$.ajax()的基本使用方法如下：
$(function(){
$("input").click(function(){
$.ajax(
{
type : 'POST',
url : 'user.php',
data :{url:"http://blog.csdn.net/u014607184"},
success : function(response, status, xhr){
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
}
});
});
});在使用过程中，需要注意属性键值对前后对应，比如对于 data 属性，需要根据type属性为get还是post形式来设置相应的data类型。
3. $.getScript()和$.getJSON()的使用
位于封装的最高层是$.getScript()和$.getJSON()方法，这是一组用于特定异步加载的方法：$.getScript()，用于加载特定的 JS 文件；$.getJSON()，用于专门加载 JSON 文件。
有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了，这时课时使用$.getScript()方法。
$(function(){
$("#input").click(function(){
$.getScript("demo.js");
});
});$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。
$('input').click(function () {
$.getJSON('test.json',
function (response, status, xhr) {
alert('返回的值为：' + response + '，状态为：' + status + ',状态是：' + xhr.statusText);
});
});本文只对jQuery中Ajax的一些基本用法进行了介绍，另外的一些方法，比如ajaxStart()、ajaxStop()等方法以及ajax的表单序列化等技术将在后续进行介绍。