12.jQuery Ajax

最新推荐文章于 2024-03-02 11:21:12 发布

初心始终钰

最新推荐文章于 2024-03-02 11:21:12 发布

阅读量2.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_16430735/article/details/38375555

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和XML），它并不是JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

一．Ajax 概述

Ajax 这个概念是由Jesse James Garrett 在2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：

1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；

2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；

3.服务器上的文件，以XML、HTML 或JSON 格式保存文本数据；

4.其它JavaScript，解释来自服务器的数据（比如PHP 从MySQL 获取的数据）并将其呈现到页面上。

由于Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

1.不需要插件支持（一般浏览器且默认开启JavaScript 即可）；

2.用户体验极佳（不刷新页面即可获取可更新的数据）；

3.提升Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；

4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

而Ajax 的不足由以下几点：

1.不同版本的浏览器度XMLHttpRequest 对象支持度不足(比如IE5 之前)；

2.前进、后退的功能被破坏（因为Ajax 永远在当前页，不会几率前后页面）；

3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS 引起变化数据的内容）；

4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或Ajax 调试开发少的可怜）。

异步和同步

使用Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。异步与同步有什么区别呢？普通的Web

程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听

下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另

一条短信。Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须

一条一条执行，会让Web 页面出现假死状态，所以，一般Ajax 大部分采用异步模式。

二．load()方法

jQuery 对Ajax 做了大量的封装，使用起来也较为方便，不需要去考虑浏览器兼容性。对于

封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装

了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()

和$.getJSON()方法。

.load()方法可以传三个参数：url(必须，请求html 文件的url 地址，参数类型为String)

、data(可选，发送的key/value 数据，参数类型为Object)、callback(可选，成功或失败

的回调函数，参数类型为函数Function)。

如果想让Ajax 异步载入一段HTML 内容，只需要一个HTML 请求的url 即可。

HTML:

<input type="button" value="异步获取数据" />
<div id="box"></div>

jQuery:

$('input').click(function () {

   $('#box').load('test.html');

});

如果想对载入的HTML 进行筛选，那么只要在url 参数后面跟着一个选择器即可。

//带选择器的url
$('input').click(function () {

   $('#box').load('test.html .my');

});

如果是服务器文件，比如.jsp。一般不仅需要载入数据，还需要向服务器提交数据，那么就可以使用第二个可选参数data。向服务器提交数据有两种方式：get 和post。

//不传递data，则默认get 方式

$('input').click(function () {

   $('#box').load('test.jsp?url=xxx');

});

//传递data，则为post 方式
$('input').click(function () {

   $('#box').load('test.jsp', {

      url : 'xxx'

   });

});

在Ajax 数据载入完毕之后，就能执行回调函数callback，也就是第三个参数。回调函数也可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、XMLHttpRequest（XMLHttpRequest 对象）。

$('input').click(function () {

   $('#box').load('test.jsp', {

      url : 'xxx'

   }, function (response, status, xhr) {

      alert('返回的值为：' + response + '，状态为：' + status + '，

            状态是：' + xhr.statusText);

   });

});

注意：status 得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest对象属于JavaScript 范畴，可以调用一些属性如下：

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM 文档
status	响应的HTTP 状态
statusText	HTTP 状态的说明

如果成功返回数据，那么xhr 对象的statusText 属性则返回'OK'字符串。除了'OK'的状态字符串，statusText 属性还提供了一系列其他的值，如下：

HTTP	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误导致服务器不识别
401	Unauthorized	请求需要用户认证
404	Not found	指定的URL 在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或维护导致无法完成请求

三．$.get()和$.post()

.load()方法是局部方法，因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp 和text。第一个参数为必选参数，后面三个为可选参数。

//使用$.get()异步返回html 类型
$('input').click(function () {

   $.get('test.jsp', {

      url : 'xxx'

   }, function (response, status, xhr) {

      if (status == 'success') {

         $('#box').html(response);

      }

   })      //type 自动转为html

});

注意：第四参数type 是指定异步返回的类型。一般情况下type 参数是智能判断，并不需要主动设置，如果主动设置，则会强行按照指定类型格式返回。

//使用$.get()异步返回xml
$('input').click(function () {

   $.get('test.xml', function (response, status, xhr) {

      $('#box').html($(response).find('root').find('url').text());

   });       //type 自动转为xml

});

注意：如果载入的是xml 文件，type 会智能判断。如果强行设置html 类型返回，则会把xml 文件当成普通数据全部返回，而不会按照xml 格式解析数据。

//使用$.get()异步返回json
$.get('test.json', function (response, status, xhr) {

   alert(response[0].url);

});

$.post()方法的使用和$.get()基本上一致，它们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过URL 提交的，而POST 请求则是HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB），而POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而POST 没有这个问题；

4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

//使用$.post()异步返回html
$.post('test.jsp', {

   url : 'xxx'

}, function (response, status, xhr) {

   $('#box').html(response);

});

四．$.getScript()和$.getJSON()

jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的JS 文件；$.getJSON()，用于专门加载JSON 文件。

有时希望能够特定的情况再加载JS 文件，而不是一开始把所有JS 文件都加载了，这时使用$.getScript()方法。

//点击按钮后再加载JS 文件
$('input').click(function () {

   $.getScript('test.js');

});

$.getJSON()方法是专门用于加载JSON 文件的，使用方法和之前的类似。
$('input').click(function () {

   $.getJSON('test.json', function (response, status, xhr) {

      alert(response[0].url);

   });

});

五．$.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 使用
$('input').click(function () {

   $.ajax({

      type : 'POST', //这里可以换成GET

      url : 'test.jsp',

      data : {

         url : 'xxx'

      },

      success : function (response, stutas, xhr) {

         $('#box').html(response);

      }

   });

});

注意：对于data 属性，如果是GET 模式，可以使用三种之前说所的三种形式。如果是POST 模式可以使用之前的两种形式。

六．表单序列化
Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过submit 提交将数据传输到服务器端。如果使用Ajax 异步处理的话，需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低。

//常规形式的表单提交
$('form input[type=button]').click(function () {

   $.ajax({

      type : 'POST',

      url : 'test.jsp',

      data : {

         user : $('form input[name=user]').val(),

         email : $('form input[name=email]').val()

      },

      success : function (response, status, xhr) {

         alert(response);

      }

   });

});

使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax 请求。

//使用.serialize()序列化表单内容
$('form input[type=button]').click(function () {

   $.ajax({

      type : 'POST',

      url : 'test.jsp',

      data : $('form').serialize(),

      success : function (response, status, xhr) {

         alert(response);

      }

   });

});

.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。

//使用序列化得到选中的元素内容
$(':radio').click(function () {

   $('#box').html(decodeURIComponent($(this).serialize()));

});

除了.serialize()方法，还有一个可以返回JSON 数据的方法：.serializeArray()。这个方法可以直接把数据整合成键值对的JSON 对象。

$(':radio').click(function () {

   console.log($(this).serializeArray());

   var json = $(this).serializeArray();

   $('#box').html(json[0].value);

});

有时，可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同，这个时候可以使用jQuery 提供的$.ajaxSetup()请求默认值来初始化参数

$('form input[type=button]').click(function () {

   $.ajaxSetup({

      type : 'POST',

      url : 'test.jsp',

      data : $('form').serialize()

   });

   $.ajax({

      success : function (response, status, xhr) {

         alert(response);

      }

   });

});

在使用data 属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式。

var obj = {a : 1, b : 2, c : 3};

var form = $.param(obj);

alert(form);

注意：使用$.param()将对象形式的键值对转为URL 地址的字符串键值对，可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递obj对象要谨慎。

初心始终钰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.jQuery Ajax

Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和XML），它并不是JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
复制链接

扫一扫