jQuery中Ajax的基本使用（1）

来源：互联网发布：淘宝不良资产在哪里编辑：程序博客网时间：2024/06/14 02:20

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代码<?phpif($_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方式来获得数据

<?phpif($_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的表单序列化等技术将在后续进行介绍。

1 0