jQuery中ajax的简单应用

jQuery中的Ajax全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法过程中的HTTP请求的控制，通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。

例如：

• 当Ajax 请求时，会触发ajaxStart() 方法的回调函数
• 当Ajax 请求结束后，会触发ajaxStop() 方法的回调函数

这些都是全局函数，因此无论创建他们的代码位于何处，只要有Ajax请求时，就会触发他们。

比如，如果图片加载速度比较慢，可以给用户一些提示信息：

<div id="loading">加载中...</div>

用css隐藏和显示来控制：

$('#loading').ajaxStart(function(){
    $(this).show();
});

$('#loading').ajaxStop(function(){
    $(this).hide();
});

这样一来，在Ajax请求过程中，只要图片还未加载完，就会一直显示“加载中…”的提示信息，看似很简单的一个改进，确极大的改善用户的体验。

如果页面中还有其他地方也是用Ajax，该提示信息仍然有效，因为他是全局的。

注意
如果想使某个Ajax 请求不受全局方法的影响，那么可以在使用$.ajax({json}) 方法时，将参数中的global设置为false，代码如下：

$.ajax({
    url: 'haha.php',
    global: false        //不触发全局Ajax事件
});

$.get()方法

该方法使用GET方式执行Ajax请求，从服务器加载数据。

语法：$(selector).get(url,data,funtion(),dataType)

参数	说明
url	必需。规定将请求发送的哪个 URL。
data	可选。发送给服务器的数据
function	可选。当请求成功时运行的函数
dataType	可选。设置服务器返回的数据类型

实例：

js文件内容：

$(function () {
    $("form").submit(function(event) {event.preventDefault()})//取消submit的默认行为
    $("form input[type='submit']").click(function(){
        var url = $('form').attr('action'); // 取form中要提交的链接
        var param = $('form').serializeArray();  //将表单项拼成json数组
        $.get(url,param, function(dom) { // 发送并显示返回内容   
            $('form').next().html(dom); //处理返回内容
        },'json') ;
    });
})

php文件内容：

<?php
date_default_timezone_set('PRC'); //设置默认时区
$_GET['time'] = date('Y-m-d H:i');
$html = '<div>姓名：<span>'.$_GET['name'].'</span></div>
         <div> 评论时间 <span>'.$_GET['time'].'</span></div>
         <div> 评论内容: <span>'.$_GET['content'].'</span></div>';
echo json_encode($html); //以json格式返回

注意 ：一定要去掉form的submit事件

$.post()方法

该方法使用POST方式执行AJAX请求，从服务器取得数据

语法：$.post(url,data,function,dataType)

参数：

参数	说明
url	必需。规定将请求发送的哪个 URL。
data	可选。发送给服务器的数据
function	可选。当请求成功时运行的函数
dataType	可选。设置服务器返回的数据类型

是不是感觉和$.get()方法差不多，但是它们是有区别的：

• get 发送请求带的参数可以在url中看到安全性不高，而且传输数据量小不能大于2kb，一般用于查询操作
• post 发送请求url中看不到安全性比get要高，传输数据量大默认没有限制，一般用于增删改。
• 当然post和get都可以用于增删改查，但是get不安全及传输数据量小 所以一般用于查询操作

$.ajax()方法

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为"jQuery中Ajax系列方法之母"

语法：$.ajax({json})

这个方法的参数就老多老多了，我就写几个常用的参数：

参数	说明
url	必需。规定将请求发送的哪个 URL。
type	可选。规定请求的类型（GET 或 POST）
data	可选。发送给服务器的数据
headers	可选。发送额外的HTTP请求头
dataType	可选。设置服务器返回的数据类型
success	可选。当请求成功时运行的函数
error	可选。当请求失败时运行的函数
complete	可选。请求完成运行的函数，不管请求成功还是失败
timeout	可选。设置本地的请求超时时间（以毫秒计）

数据类型

在jQuery中的ajax函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。

通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。

其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数

注意：

我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果

如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地，指定 script 类型的话，也会先执行服务器端生成 JavaScript，然后再把脚本作为一个文本数据返回。

如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。如果浏览器不支持，则使用一个函数来构建。

JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用 jsonp 类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名，以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback，可以通过设置 $.ajax() 的 jsonp 参数。

注意：

JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

如果指定了 script 或者 jsonp 类型，那么当从服务器接收到数据时，实际上是用了