[JavaScript知识库]jQuery 的Ajax

• 知识点

1. jQuery Ajax介绍

(1)、什么是 AJAX？

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

?????????

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

(2)、关于 jQuery 与 AJAX

1、如果没有 jQuery，AJAX 编程还是有些难度的。

2、编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

3、jQuery 提供多个与 AJAX 有关的方法。

4、通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1. jQuery load() 方法

(1)、什么是load() 方法？

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

必需的?URL?参数规定您希望加载的 URL。

可选的?data?参数规定与请求一同发送的查询字符串键/值对集合。

可选的?callback?参数是 load() 方法完成后所执行的函数名称。

1. 、load() 方法回调？

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt?- 包含调用成功时的结果内容

statusTXT?- 包含调用的状态

xhr?- 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

1. jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

GET 基本上用于从服务器获得（取回）数据。

必需的?URL?参数规定您希望请求的 URL。

可选的?callback?参数是请求成功后所执行的函数名。

demo_test.php 文件代码:

1. jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

必需的?URL?参数规定您希望请求的 URL。

可选的?data?参数规定连同请求发送的数据。

可选的?callback?参数是请求成功后所执行的函数名。

demo_test_post.php 文件代码:

演示示例：$.post()方法

1. ?$.ajax()

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

使用 AJAX 请求改变 <div> 元素的文本：

url:?
???????? 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type:?
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

async:?
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache:?
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

data:?
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType:?
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
???????? ：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
????????? function(XMLHttpRequest, textStatus){
???????????? this;??? //调用本次ajax请求时传递的options参数
????????? }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
???????? (1)由服务器返回，并根据dataType参数进行处理后的数据。
???????? (2)描述状态的字符串。
???????? function(data, textStatus){
??????????? //data可能是xmlDoc、jsonObj、html、text等等
??????????? this;? //调用本次ajax请求时传递的options参数
???????? }

error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
?????? function(XMLHttpRequest, textStatus, errorThrown){
????????? //通常情况下textStatus和errorThrown只有其中一个包含信息
????????? this;?? //调用本次ajax请求时传递的options参数
?????? }

contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

1. JSON

1. 、什么是JSON？

JSON:?JavaScript?Object?Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON 具有自我描述性，更易理解

JSON 实例：

1. 、JSON?语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中、数据由逗号分隔、大括号保存对象、中括号保存数组。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

这很容易理解，等价于这条 JavaScript 语句：

JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null

JSON 数字

JSON 对象

JSON 数组

JSON 布尔值

JSON null

JSON 使用 JavaScript 语法创建对象数组

可以像这样访问 JavaScript 对象数组中的第一项（索引从 0 开始）：

1. 、JSON对象

JSON 对象使用在大括号({})中书写。

对象可以包含多个?key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

你可以使用点号（.）来访问对象的值：

你也可以使用中括号（[]）来访问对象的值：

1. 、JSON数组

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及?undefined。

对象属性的值可以是一个数组：

我们可以使用索引值来访问数组：

1. 、JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

例如我们从服务器接收了以下数据：

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。

你可以使用我们的在线工具检测：https://www.json.cn/。

1. 、JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

例如我们向服务器发送以下数据：

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

1. 、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

如客户想访问 :??

https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

假设客户期望返回数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件 jsonp.php 代码为：