提交 926e1527 编写于 作者: W wizardforcel

2020-06-07 10:47:01

上级 95140a1d
......@@ -20,13 +20,13 @@ Table of Contents
![angular http service example](img/86d06f4678afa7c0a0f7945cb17bb223.png)
angular http service example
angular http 服务示例
屏幕选项非常简单。 您可以使用以下表格添加员工。 所有员工都列在上表中。 您可以通过单击该行中的“删除”链接来删除员工。 同样,单击编辑链接将在下面的表格中填充员工详细信息,您可以通过按提交按钮保存更改。
## 2\. AngularJS $ http 用法–不耐烦
## 2\. AngularJS `$http`用法 – 不耐烦
尽管我将在本教程的后面部分进行详细介绍,但是如果您急于阅读本节以了解对 REST API 的`$http`调用。
......@@ -46,7 +46,7 @@ angular http service example
```
GET 调用上方使用相对 URL `/employees`。 如果当前位置为`HTTP GET http://localhost:8080/myapplication`,则会调用`HTTP GET http://localhost:8080/myapplication/employees` URL。 您也可以使用完整的应用网址,例如 “ http:// localhost:8080 / myapplication / employees”。 两种 URL 模式都可以使用。
GET 调用上方使用相对 URL `/employees`。 如果当前位置为`HTTP GET http://localhost:8080/myapplication`,则会调用`HTTP GET http://localhost:8080/myapplication/employees` URL。 您也可以使用完整的应用网址,例如 “ `http://localhost:8080/myapplication/employees`”。 两种 URL 模式都可以使用。
默认情况下,angular 使用**异步 HTTP 调用**。 因此,我使用了两个函数`successCallback()`和`errorCallback()`,它们将从服务器返回响应后由 angular 调用。
......@@ -98,7 +98,7 @@ angular http service example
## 3\. 示例中使用的 Spring REST API
现在让我们看一下本示例中使用的 RESTful API。 这些是使用 [**Spring REST JSON 示例**](//howtodoinjava.com/spring/spring-restful/spring-rest-hello-world-json-example/) 的源代码创建的。
现在让我们看一下本示例中使用的 RESTful API。 这些是使用 [**Spring REST JSON 示例**](//howtodoinjava.com/spring/spring-restful/spring-rest-hello-world-json-example/)的源代码创建的。
```java
package com.howtodoinjava.demo.controller;
......@@ -371,8 +371,8 @@ public class EmployeeRESTController
1. 参见`app.controller("UserManagementController", function($scope, $http)`行。 它创建 Angular 控制器组件,并传递`$http`服务和`$scope`变量的相关性。 `$http`用于进行 REST 调用,`$scope`用于与页面数据进行交互。
2. `$scope`具有两个数据元素。 `$scope.employees`引用页面中的所有员工集合,`$scope.form`映射到页面中的表单元素字段。
3. 加载页面后,将调用`_refreshPageData()`,该调用将调用 HTTP GET api,以 JSON 格式从服务器获取所有员工数据。 检索到数据后,将使用`$scope.employees = response.data.employees`将其映射到`$scope.employees`。 该调用将自动刷新 UI,并使用员工数据填充表格。
4. 使用`ng-click="removeEmployee( employee )"`将页面中的删除链接绑定到`removeEmployee()`功能。 该调用具有附加参数`employee`,该参数用于标识需要从表中删除哪个雇员( **employee.id** 用于获取雇员 ID)。
5. Similarily, edit link is bind with `ng-click="editEmployee( employee )"`. Inside `editEmployee()` function, we simply populate the form text fields with existing employee data by below mapping.
4. 使用`ng-click="removeEmployee( employee )"`将页面中的删除链接绑定到`removeEmployee()`功能。 该调用具有附加参数`employee`,该参数用于标识需要从表中删除哪个雇员(`employee.id`用于获取雇员 ID)。
5. 类似地,编辑链接与`ng-click="editEmployee( employee )"`绑定。 在`editEmployee()`函数内部,我们通过下面的映射简单地使用现有员工数据填充表单文本字段。
```java
$scope.editEmployee = function(employee) {
......
# Ajax 教程面向初学者的 Ajax 指南
# Ajax 教程面向初学者的 Ajax 指南
> 原文: [https://howtodoinjava.com/ajax/complete-ajax-tutorial/](https://howtodoinjava.com/ajax/complete-ajax-tutorial/)
......@@ -24,7 +24,7 @@ Table of Contents
## 1\. ajax 如何工作?
重要的是要了解 Ajax 不是单一技术,而是一组技术,例如 HTML,CSS,DOM 和 JavaScript 等。 [**HTML**](https://en.wikipedia.org/wiki/HTML "html")[**CSS**](https://en.wikipedia.org/wiki/Cascading_Style_Sheets "css") 可以组合使用以标记和样式信息。 通过 [**JavaScript**](https://en.wikipedia.org/wiki/JavaScript "JavaScript") 访问 [**DOM**](https://en.wikipedia.org/wiki/Document_Object_Model "dom") ,以动态显示所呈现的信息,并允许用户与之交互。 JavaScript 和 [**XMLHttpRequest**](https://en.wikipedia.org/wiki/XMLHttpRequest "XMLHttpRequest") 对象提供了一种在浏览器和服务器之间异步交换数据以避免重新加载整个页面的方法。
重要的是要了解 Ajax 不是单一技术,而是一组技术,例如 HTML,CSS,DOM 和 JavaScript 等。 [**HTML**](https://en.wikipedia.org/wiki/HTML "html")[**CSS**](https://en.wikipedia.org/wiki/Cascading_Style_Sheets "css") 可以组合使用以标记和样式信息。 通过 [**JavaScript**](https://en.wikipedia.org/wiki/JavaScript "JavaScript") 访问 [**DOM**](https://en.wikipedia.org/wiki/Document_Object_Model "dom") ,以动态显示所呈现的信息,并允许用户与之交互。 JavaScript 和[**`XMLHttpRequest`**](https://en.wikipedia.org/wiki/XMLHttpRequest "XMLHttpRequest")对象提供了一种在浏览器和服务器之间异步交换数据以避免重新加载整个页面的方法。
近年来,XML 的本质已经减少。 [**JSON**](https://en.wikipedia.org/wiki/JSON "json") (JavaScript 对象表示法)通常用作数据交换的替代格式,尽管其他格式(例如预格式化的 HTML 或纯文本)也可以用于数据目的。
......@@ -32,7 +32,7 @@ Table of Contents
通常,对服务器的 ajax 调用和从服务器获取响应(**生命周期事件**)涉及以下步骤:
* 您在浏览器的地址栏中键入网页的 URL,然后按 Enter。 页面已加载到浏览器窗口中。
* 您在浏览器的地址栏中键入网页的 URL,然后按`Enter`。 页面已加载到浏览器窗口中。
* 某些操作会触发事件,例如用户单击按钮。
* 事件触发 ajax 调用,并使用 xml 或 json 向服务器发送请求。
* 服务器服务从 ajax / http 请求获取输入,并处理该请求。 如果需要,它还会准备响应数据。
......@@ -43,19 +43,19 @@ Table of Contents
![How AJAX works](img/88a5c7a3fb3b65320344f9bda5eb95b4.png)
**How AJAX works?**
**AJAX 如何工作?**
## 2\. Ajax XMLHttpRequest 对象
## 2\. Ajax `XMLHttpRequest`对象
AJAX 的核心是 **XMLHttpRequest** 对象(可在客户端脚本语言(如 javascript)中使用)。 XMLHttpRequest 对象用于与后台的服务器交换数据。 所有现代浏览器(IE7 +,Firefox,Chrome,Safari 和 Opera)都具有内置的 XMLHttpRequest 对象。
AJAX 的核心是`XMLHttpRequest`对象(可在客户端脚本语言(如 javascript)中使用)。 `XMLHttpRequest`对象用于与后台的服务器交换数据。 所有现代浏览器(IE7+,Firefox,Chrome,Safari 和 Opera)都具有内置的`XMLHttpRequest`对象。
如果您使用的是 IE 5 或 IE6(我想知道是否有人仍在使用它),则 **ActiveXObject** 将用于服务器通信以发送 Ajax 请求。
如果您使用的是 IE5 或 IE6(我想知道是否有人仍在使用它),则`ActiveXObject`将用于服务器通信以发送 Ajax 请求。
#### 2.1 创建 XMLHttpRequest 对象
#### 2.1 创建`XMLHttpRequest`对象
这样创建一个 XMLHttpRequest 的新对象:
这样创建一个`XMLHttpRequest`的新对象:
```java
//Creating a new XMLHttpRequest object
......@@ -71,15 +71,15 @@ AJAX 的核心是 **XMLHttpRequest** 对象(可在客户端脚本语言(如
```
可以重新使用此 xmlhttp 变量**发送多个 ajax 请求**,而无需创建新对象。 出于安全原因,XMLHttpRequest 受浏览器的*相同来源策略*约束。 这意味着只有在向原始网页提供服务的同一服务器上发出请求时,请求才会成功。
可以重新使用此`xmlhttp`变量**发送多个 ajax 请求**,而无需创建新对象。 出于安全原因,`XMLHttpRequest`受浏览器的*相同来源策略*约束。 这意味着只有在向原始网页提供服务的同一服务器上发出请求时,请求才会成功。
## 3\. XMLHttpRequest 方法
## 3\. `XMLHttpRequest`方法
为了发送请求和设置请求属性,XMLHttpRequest 对象具有一些方法。 让我们来看看他们:
为了发送请求和设置请求属性,`XMLHttpRequest`对象具有一些方法。 让我们来看看他们:
#### 3.1 打开(方法,URL,isAsync,用户名,密码)
#### 3.1 `open(method, url, isAsync, userName, password)`
必须通过打开方法初始化 **XMLHttpRequest 对象的 HTTP 和 HTTPS 请求。 此方法指定请求的类型(GET,POST 等),URL,以及是否应异步处理请求。 我将在下一部分中介绍第三个参数。**
必须通过打开方法初始化`XMLHttpRequest`对象的 HTTP 和 HTTPS 请求。 此方法指定请求的类型(GET,POST 等),URL,以及是否应异步处理请求。 我将在下一部分中介绍第三个参数。
第四个和第五个参数分别是用户名和密码。 如果服务器需要此参数,则可以提供这些参数或仅提供用户名以进行身份​​验证和授权。
......@@ -92,11 +92,11 @@ AJAX 的核心是 **XMLHttpRequest** 对象(可在客户端脚本语言(如
```
#### 3.2 setRequestHeader(名称,值)
#### 3.2 `setRequestHeader(name, value)`
成功初始化请求后,可以调用 XMLHttpRequest 对象的 setRequestHeader 方法**来发送带有请求**的 HTTP 标头。
成功初始化请求后,可以调用`XMLHttpRequest`对象的`setRequestHeader`方法**来发送带有请求**的 HTTP 标头。
Example:
示例:
```java
//Tells server that this call is made for ajax purposes.
......@@ -104,12 +104,12 @@ Example:
```
#### 3.3 发送(有效负载)
#### 3.3 `send(payload)`
**要发送 HTTP 请求**,必须调用 XMLHttpRequest 的 send 方法。 此方法接受单个参数,该参数包含要与请求一起发送的内容。
在 POST 请求中,该内容是必需的。 对于 GET 方法,隐式传递 null 作为参数。
**要发送 HTTP 请求**,必须调用`XMLHttpRequest``send`方法。 此方法接受单个参数,该参数包含要与请求一起发送的内容。
在 POST 请求中,该内容是必需的。 对于 GET 方法,隐式传递`null`作为参数。
Example:
示例:
```java
xmlhttp.send(null); //Request with no data in request body; Mostly used in GET requests.
......@@ -117,9 +117,9 @@ Example:
```
#### 3.4 流产()
#### 3.4 `abort()`
如果 XMLHttpRequest 对象的 readyState 尚未变为 4 (请求完成),则此方法**将中止请求。 abort 方法确保回调方法不会在异步请求中被调用。**
如果`XMLHttpRequest`对象的`readyState`尚未变为 4 (请求完成),则此方法**将中止请求**`abort`方法确保回调方法不会在异步请求中被调用。
句法:
......@@ -129,11 +129,11 @@ Example:
```
除上述方法外,onreadystatechange 事件监听器非常重要,我们将在下一部分中进行讨论。
除上述方法外,`onreadystatechange`事件监听器非常重要,我们将在下一部分中进行讨论。
## 4\. 同步和异步 ajax 请求
XMLHttpRequest 对象能够根据网页中的要求发送同步和异步请求。 该行为由打开方法的第三个参数**控制。 对于异步请求,此参数设置为**,对于同步请求**,此参数设置为 false。**
`XMLHttpRequest`对象能够根据网页中的要求发送同步和异步请求。 该行为由打开方法的第三个参数**控制**。 对于异步请求,此参数设置为`true`,对于同步请求,此参数设置为`false`
```java
xmlhttp.open("GET", "report_data.xml", true); //Asynchrnonos request as third parameter is true
......@@ -141,7 +141,7 @@ XMLHttpRequest 对象能够根据网页中的要求发送同步和异步请求
```
如果未提供,则此参数的**默认值为“ true”**
如果未提供,则此参数的**默认值为“`true`”**
异步 Ajax 请求不会阻止网页,并且在服务器上处理请求时,用户可以继续与页面上的其他元素进行交互。 您应该始终使用异步 Ajax 请求,因为同步 Ajax 请求会使 UI(浏览器)无响应。 这意味着在请求完成之前,用户将无法与网页进行交互。
......@@ -188,22 +188,27 @@ request.send(null)
```
#### 4.3 onreadystatechange 事件
#### 4.3 `onreadystatechange`事件
在上面的示例中,onreadystatechange 是向 XMLHttpRequest 请求注册的事件监听器。 onreadystatechange 存储一个函数,该函数将处理从服务器返回的响应。 在请求的生命周期中,所有重要事件都将被调用。 每次在请求处理中完成一个步骤时,readyState 的值都会更改并设置为其他值。 让我们看一下可能的值:
在上面的示例中,`onreadystatechange`是向`XMLHttpRequest`请求注册的事件监听器。 `onreadystatechange`存储一个函数,该函数将处理从服务器返回的响应。 在请求的生命周期中,所有重要事件都将被调用。 每次在请求处理中完成一个步骤时,`readyState`的值都会更改并设置为其他值。 让我们看一下可能的值:
0:未初始化请求
1:建立服务器连接
2:接收请求
3:处理请求
4:请求已完成,响应已准备就绪
#### 4.4 处理来自服务器的响应
要从服务器获取响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 如果来自服务器的响应是 XML,并且您要将其解析为 XML 对象,请使用 responseXML 属性。 如果来自服务器的响应不是 XML,请使用 responseText 属性。
要从服务器获取响应,请使用`XMLHttpRequest` 对象的`responseText``responseXML`属性。 如果来自服务器的响应是 XML,并且您要将其解析为 XML 对象,请使用`responseXML`属性。 如果来自服务器的响应不是 XML,请使用`responseText`属性。
**`responseText`**:从服务器获取响应作为字符串
**responseText** :从服务器获取响应作为字符串
**responseXML** :从服务器获取 XML 响应
**`responseXML`**:从服务器获取 XML 响应
**示例代码:**
......@@ -220,7 +225,7 @@ if (xmlhttp.readyState == 4) {
```
## 5\. Ajax 教程演示
## 5\. Ajax 教程演示
出于演示目的,我创建了一个非常简单的 hello world 应用。 在此应用中,网页发送 ajax GET 请求以查询当前服务器的系统时间。 作为响应,服务器发送当前时间。 很简单。
......@@ -297,7 +302,7 @@ public class GetTimeServlet extends HttpServlet
#### 5.2 同步请求示例
要发送同步 ajax 请求,请使用以下命令更改 index.jsp 文件中的 javascript 代码:
要发送同步 ajax 请求,请使用以下命令更改`index.jsp`文件中的 javascript 代码:
```java
function ajaxSyncRequest(reqURL)
......@@ -375,9 +380,9 @@ $("#buttonId").submit(function(event) {
```
#### 6.2 原型
#### 6.2 Prototype
[**原型**](http://prototypejs.org/ "prototype") 是另一个用于相同目的的流行框架。 但是,请注意,已知原型与某些其他框架不兼容。 使用原型发送 ajax 请求的示例代码如下所示:
[**Prototype**](http://prototypejs.org/ "prototype") 是另一个用于相同目的的流行框架。 但是,请注意,已知 Prototype 与某些其他框架不兼容。 使用 Prototype 发送 ajax 请求的示例代码如下所示:
```java
new Ajax.Request('/some_url',
......
# 完整的 jQuery Ajax($ .ajax)教程
# 完整的 jQuery Ajax(`$.ajax`)教程
> 原文: [https://howtodoinjava.com/jquery/jquery-ajax-tutorial/](https://howtodoinjava.com/jquery/jquery-ajax-tutorial/)
在本 [Ajax 教程](//howtodoinjava.com/scripting/complete-ajax-tutorial/)中,我们已经学习了 [Ajax](https://en.wikipedia.org/wiki/Ajax_%28programming%29) (异步 JavaScript 和 XML)。 我们了解了有关 ajax 的工作原理和基本组成部分的基本但重要的概念。 让我们继续进行讨论,看看如何利用 jQuery 充分利用 ajax 的功能来使应用开发变得简单,快速和有效。
在本 [Ajax 教程](//howtodoinjava.com/scripting/complete-ajax-tutorial/)中,我们已经学习了 [Ajax](https://en.wikipedia.org/wiki/Ajax_%28programming%29)(异步 JavaScript 和 XML)。 我们了解了有关 ajax 的工作原理和基本组成部分的基本但重要的概念。 让我们继续进行讨论,看看如何利用 jQuery 充分利用 ajax 的功能来使应用开发变得简单,快速和有效。
```java
Table of Contents
......@@ -27,9 +27,9 @@ Other Ajax Powered Functions in jQuery
```
## $ .ajax()方法
## `$.ajax()`方法
jQuery Ajax 的**根目录是 ajax()函数。 此功能用于执行默认情况下异步的 HTTP 请求。 使用此功能的语法是:**
jQuery Ajax 的**根是`ajax()`函数**。 此功能用于执行默认情况下异步的 HTTP 请求。 使用此功能的语法是:
```java
$.ajax({name:value, name:value, ... })
......@@ -37,23 +37,24 @@ $.ajax({name:value, name:value, ... })
参数为 AJAX 请求指定一个或多个名称/值对。 下表中可能的名称/值:
| Name | 值/说明 |
| `async` | 一个布尔值,指示是否应异步处理请求。 默认为 true。 请注意,从 jQuery 1.8 开始,`async: false`的使用已被弃用。 您必须使用`success` / `error` / `complete`回调选项,而不要使用`jqXHR`对象的相应方法,例如`jqXHR.done()`或已弃用的`jqXHR.success()`。 |
| 名称 | 值/说明 |
| --- | --- |
| `async` | 一个布尔值,指示是否应异步处理请求。 默认为`true`。 请注意,从 jQuery 1.8 开始,`async: false`的使用已被弃用。 您必须使用`success` / `error` / `complete`回调选项,而不要使用`jqXHR`对象的相应方法,例如`jqXHR.done()`或已弃用的`jqXHR.success()`。 |
| `beforeSend(*xhr*)` | 发送请求之前运行的功能 |
| `cache` | 一个布尔值,指示浏览器是否应缓存请求的页面。 默认为 true |
| `cache` | 一个布尔值,指示浏览器是否应缓存请求的页面。 默认为`true` |
| `complete(*xhr,status*)` | 请求完成后要运行的功能(成功和错误功能之后) |
| `contentType` | 将数据发送到服务器时使用的内容类型。 默认值为:“ application / x-www-form-urlencoded” |
| `context` | 为所有与 AJAX 相关的回调函数指定“ this”值 |
| `contentType` | 将数据发送到服务器时使用的内容类型。 默认值为:“`application/x-www-form-urlencoded`” |
| `context` | 为所有与 AJAX 相关的回调函数指定“`this`”值 |
| `data` | 指定要发送到服务器的数据 |
| `dataFilter(*data*,*type*)` | 用于处理 XMLHttpRequest 的原始响应数据的函数 |
| `dataFilter(*data*,*type*)` | 用于处理`XMLHttpRequest`的原始响应数据的函数 |
| `dataType` | 服务器响应期望的数据类型。 |
| `error(*xhr,status,error*)` | 如果请求失败,则运行的功能。 |
| `global` | 一个布尔值,指定是否触发请求的全局 AJAX 事件句柄。 默认为 true |
| `ifModified` | 一个布尔值,指定是否仅在自上一个请求以来响应已更改的情况下,请求才成功。 默认值为:false。 |
| `global` | 一个布尔值,指定是否触发请求的全局 AJAX 事件句柄。 默认为`true` |
| `ifModified` | 一个布尔值,指定是否仅在自上一个请求以来响应已更改的情况下,请求才成功。 默认值为:`false`。 |
| `jsonp` | 覆盖 jsonp 请求中的回调函数的字符串 |
| `jsonpCallback` | 为 jsonp 请求中的回调函数指定名称 |
| `password` | 指定在 HTTP 访问认证请求中使用的密码。 |
| `processData` | 一个布尔值,指定是否应将与请求一起发送的数据转换为查询字符串。 默认为 true |
| `processData` | 一个布尔值,指定是否应将与请求一起发送的数据转换为查询字符串。 默认为`true` |
| `scriptCharset` | 指定请求的字符集 |
| `success(*result,status,xhr*)` | 请求成功时要运行的功能 |
| `timeout` | 请求的本地超时(以毫秒为单位) |
......@@ -61,7 +62,7 @@ $.ajax({name:value, name:value, ... })
| `type` | 指定请求的类型。 (获取或发布) |
| `url` | 指定将请求发送到的 URL。 默认为当前页面 |
| `username` | 指定在 HTTP 访问认证请求中使用的用户名 |
| `xhr` | 用于创建 XMLHttpRequest 对象的函数 |
| `xhr` | 用于创建`XMLHttpRequest`对象的函数 |
例如,示例 ajax 请求可以像这样(直到 jQuery 1.7 版本):
......@@ -106,19 +107,19 @@ $.ajax({
```
## jqXHR(jQuery XMLHttpRequest)与 XHR(XMLHttpRequest
## jqXHR(jQuery `XMLHttpRequest`)与 XHR(`XMLHttpRequest`
jQuery 1.8 在 jQuery 模式方面带来了重大变化。 此更改是`$.ajax()`方法的返回类型。 在 1.7 版之前,返回类型为`XHR`,即 **XMLHttpRequest** ,但从 1.8 版开始,其返回类型为`jqXHR`,即 **jQuery XMLHttpRequest**
jQuery 1.8 在 jQuery 模式方面带来了重大变化。 此更改是`$.ajax()`方法的返回类型。 在 1.7 版之前,返回类型为`XHR`,即`XMLHttpRequest`,但从 1.8 版开始,其返回类型为`jqXHR`,即 jQuery `XMLHttpRequest`
在 jQuery 1.8 中,库使用超集 API 包浏览器本机`XMLHttpRequest`对象,并返回`jqXHR`对象。 `jqXHR`对象可模拟本地`XHR`功能,并提供更多功能,例如:
* 它处理 HTTP 请求标头(最后修改的,etag,Content-Type,MIME 类型等)
* 它处理请求的回调(包括承诺回调.done()、. fail()等)
* 它处理 HTTP 请求标头(`Last-Modified`,etag,`Content-Type`,MIME 类型等)
* 它处理请求的回调(包括`Promise`回调`.done()``.fail()`等)
* 它处理为请求设置的所有预过滤器
* 它处理为请求设置的任何超时
* 它处理任何跨域调用(包括 jsonp)
The jqXHR objects returned by $.ajax() implement the Promise interface. The object has all the properties, methods, and behavior of a [**Promise**](https://api.jquery.com/deferred.promise/).
`$.ajax()`返回的 jqXHR 对象实现`Promise`接口。 该对象具有一个[**`Promise`**](https://api.jquery.com/deferred.promise/)对象的所有属性,方法和行为。
*jQuery 库作者已努力使其向后兼容,但不支持`onreadystatechange()`方法。*
......@@ -195,13 +196,13 @@ $.ajax({
```
In jQuery 1.8 and later, “`async : false`” option is deprecated.
在 jQuery 1.8 及更高版本中,不赞成使用“`async:false`”选项。
## jQuery Ajax 全局事件处理程序
## jQuery Ajax 全局事件处理
除了上述三种方法(即`done()``fail()``always()`)之外,jQuery 还具有一组全局 AJAX 函数,您可以使用这些函数来监听通过 jQuery 发送的所有 AJAX 请求中的 AJAX 事件。 让我们来看看它们:
#### $ .ajaxSend()
#### `$.ajaxSend()`
在通过 jQuery 发送 AJAX 请求之前,总是会调用在`ajaxSend()`函数中注册的回调函数。
......@@ -212,11 +213,11 @@ $(document).ajaxSend(function() {
```
#### $ .ajaxStart()
#### `$.ajaxStart()`
每当即将发送 Ajax 请求时,jQuery 都会检查是否还有其他未完成的 Ajax 请求。 如果没有正在进行中,则 jQuery 触发`ajaxStart`事件。
如果在全局选项设置为 false 的情况下调用`$.ajax()``$.ajaxSetup()`,则将不会触发`ajaxStart()`方法。
如果在全局选项设置为`false`的情况下调用`$.ajax()``$.ajaxSetup()`,则将不会触发`ajaxStart()`方法。
```java
$( document ).ajaxStart(function() {
......@@ -225,11 +226,11 @@ $( document ).ajaxStart(function() {
```
#### $ .ajaxStop()
#### `$.ajaxStop()`
每当 Ajax 请求完成时,jQuery 都会检查是否还有其他未完成的 Ajax 请求。 如果没有剩余的内容,jQuery 将触发`ajaxStop`事件。
如果在全局选项设置为 false 的情况下调用$ .ajax()或$ .ajaxSetup(),则不会触发.ajaxStop()方法。
如果在全局选项设置为`false`的情况下调用`$.ajax()``$.ajaxSetup()`,则不会触发`.ajaxStop()`方法。
```java
$( document ).ajaxStop(function() {
......@@ -238,7 +239,7 @@ $( document ).ajaxStop(function() {
```
#### $ .ajaxSuccess()
#### `$.ajaxSuccess()`
每当 Ajax 请求成功完成时,jQuery 就会触发`ajaxSuccess`事件。
......@@ -249,7 +250,7 @@ $( document ).ajaxSuccess(function( event, xhr, settings ) {
```
#### $ .AjaxError()
#### `$.AjaxError()`
只要 Ajax 请求完成并出现错误,jQuery 就会触发`ajaxError`事件。
......@@ -260,7 +261,7 @@ $( document ).ajaxError(function( event, xhr, settings ) {
```
#### $ .ajaxComplete()
#### `$.ajaxComplete()`
每当 Ajax 请求完成时,jQuery 都会触发`ajaxComplete`事件。
......@@ -271,7 +272,7 @@ $( document ).ajaxComplete(function( event, xhr, settings ) {
```
## 使用$ .ajaxSetup()全局化参数
## 使用`$.ajaxSetup()`全局化参数
您是否认为将一组通用参数传递给所有 ajax 请求很无聊,您可以使用`$.ajaxSetup()`函数对其进行一次注册,然后在所有 ajax 调用中重复使用它们。 `$.ajaxSetup()`功能可用于设置所有 AJAX 调用使用的选项,包括通过`$.ajax()``$.load()``$.get()`等执行的选项。
......@@ -292,11 +293,11 @@ $.ajax({
});
```
## 使用$ .ajaxPrefilter()过滤 Ajax 请求
## 使用`$.ajaxPrefilter()`过滤 Ajax 请求
如果您曾经在服务器端进行 Web 开发,那么您会认识到过滤器是实现某些目标(如输入值卫生等)的好方法。现在 jQuery 也使用`ajaxPrefilter`事件在客户端提供了此功能。 使用此功能,您可以在所有 AJAX 调用发送到服务器之前对其进行过滤。
如果您曾经在服务器端进行 Web 开发,那么您会认识到过滤器是实现某些目标(如输入值清洁等)的好方法。现在 jQuery 也使用`ajaxPrefilter`事件在客户端提供了此功能。 使用此功能,您可以在所有 AJAX 调用发送到服务器之前对其进行过滤。
发送请求之前,可以在`$.ajaxPrefilter()`中更改传递给`$.ajax()`功能的所有 Ajax 选项/参数(“过滤”)。 例如 如果您希望发送到以“ / add”结尾的 URL 的所有 HTTP 请求都必须是 HTTP POST 调用,则可以在此处应用逻辑。
发送请求之前,可以在`$.ajaxPrefilter()`中更改传递给`$.ajax()`功能的所有 Ajax 选项/参数(“过滤”)。 例如 如果您希望发送到以“`/add`”结尾的 URL 的所有 HTTP 请求都必须是 HTTP POST 调用,则可以在此处应用逻辑。
```java
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
......@@ -309,15 +310,15 @@ $.ajaxPrefilter(function(options, originalOptions, jqXHR){
这里的参数是:
* `options` –是请求选项
* `originalOptions`是$ .ajax()方法提供的选项,未经修改,因此没有 ajaxSettings 的默认值
* `jqXHR` –是请求的 jqXHR 对象
* `options` 是请求选项
* `originalOptions``$.ajax()`方法提供的选项,未经修改,因此没有`ajaxSettings`的默认值
* `jqXHR` 是请求的 jqXHR 对象
## jQuery 中其他由 Ajax 支持的函数
让我们在内部使用 ajax 浏览 jQuery 库提供的其他有用功能,这些功能可以直接使用。
#### $ .get()和$ .post()函数
#### `$.get()`和`$.post()`函数
jQuery 具有这些功能,可用于发送简化的 HTTP GET 和 HTTP POST 请求。 这是显示如何使用 jQuery 的`$.get()`函数的示例:
......@@ -336,7 +337,7 @@ $.get( "/app/url", parameters )
```
同样,您可以使用$ .post()函数发出 HTTP POST 请求。
同样,您可以使用`$.post()`函数发出 HTTP POST 请求。
```java
var parameters = { p1 : "val1", p2 : "val2"};
......@@ -353,9 +354,9 @@ $.post( "/app/url", parameters )
```
#### $ .load()函数
#### `$.load()`函数
jQuery load()函数通过 AJAX 加载一些 HTML,并将其插入到选定的元素中。 它是后台的简单 HTTP GET 方法,可从服务器获取一些 HTML 并插入元素的 DOM 中。
jQuery `load()`函数通过 AJAX 加载一些 HTML,并将其插入到选定的元素中。 它是后台的简单 HTTP GET 方法,可从服务器获取一些 HTML 并插入元素的 DOM 中。
```java
$("#loadTarget").load("html-response.html");
......@@ -367,13 +368,13 @@ $("#loadTarget").load("html-response.html");
$("#loadTarget").load("html-response.html #someDiv");
```
在上面的示例中,ajax 调用将从 URL `html-response.html`加载 HTML 响应,然后对`id=someDiv`执行响应的 jQuery ID [选择器](//howtodoinjava.com/scripting/jquery/jquery-selectors/),然后将结果 HTML 插入`loadTarget` innerHTML 中。
在上面的示例中,ajax 调用将从 URL `html-response.html`加载 HTML 响应,然后对`id=someDiv`执行响应的 jQuery ID [选择器](//howtodoinjava.com/scripting/jquery/jquery-selectors/),然后将结果 HTML 插入`loadTarget``innerHTML`中。
If the loaded HTML contains any JavaScript it will get executed when the HTML is inserted into the target HTML element. However, if you load a fragment (URL + jQuery selector) then any JavaScript found in the loaded file is remove before the HTML is inserted.
如果加载的 HTML 包含任何 JavaScript,则将 HTML 插入目标 HTML 元素时将执行该 JavaScript。 但是,如果加载片段(URL + jQuery 选择器),则在插入 HTML 之前,将删除在加载的文件中找到的所有 JavaScript。
#### $ .getScript()函数
#### `$.getScript()`函数
jQuery 中的$ .getScript()函数加载一个 JavaScript 文件并执行它。 此函数使用 jQuery 的基础 AJAX 函数,因此由于**跨域限制**,$ .getScript()函数无法从其他域加载脚本。 例如:
jQuery 中的`$.getScript()`函数加载一个 JavaScript 文件并执行它。 此函数使用 jQuery 的基础 AJAX 函数,因此由于**跨域限制**`$.getScript()`函数无法从其他域加载脚本。 例如:
```java
$.getScript("js/myscript.js");
......
......@@ -2,7 +2,7 @@
> 原文: [https://howtodoinjava.com/jquery/jquery-deep-cloning-example/](https://howtodoinjava.com/jquery/jquery-deep-cloning-example/)
jQuery 深度克隆意味着独立更改原始对象或克隆对象不会对其他对象产生影响。 换句话说,两个对象(原始对象和克隆对象)都彼此完全独立。 您可以在对象克隆[**指南中阅读有关克隆的更多信息。**](//howtodoinjava.com/java/cloning/a-guide-to-object-cloning-in-java/ "A guide to object cloning in java")
jQuery 深度克隆意味着独立更改原始对象或克隆对象不会对其他对象产生影响。 换句话说,两个对象(原始对象和克隆对象)都彼此完全独立。 您可以在对象克隆[**指南**](//howtodoinjava.com/java/cloning/a-guide-to-object-cloning-in-java/ "A guide to object cloning in java")中阅读有关克隆的更多信息。
![jquery_logo](img/5ade7672922b927bd760e8a881839896.png)
......@@ -15,9 +15,9 @@ var clonedObject = jQuery.extend({}, originalObject);
## jQuery 深度克隆示例
在 jquery 克隆示例代码中,我创建了一个 User 对象并创建了两个属性,即名字和姓氏。 然后,我为这些属性创建了两个设置器函数,还使用了原型属性添加了另一种方法。
在 jquery 克隆示例代码中,我创建了一个`User`对象并创建了两个属性,即名字和姓氏。 然后,我为这些属性创建了两个设置器函数,还使用了原型属性添加了另一种方法。
实际上,使用“ extend”关键字的 jquery 克隆机制用于将两个或多个对象的属性和属性复制/合并到第三个或完全新的对象中。 可以在中找到更多详细信息。
实际上,使用“`extend`”关键字的 jquery 克隆机制用于将两个或多个对象的属性和属性复制/合并到第三个或完全新的对象中。 可以在中找到更多详细信息。
示例代码如下所示:
......@@ -39,18 +39,12 @@ $("#clonedUser").html(cloned.getUserName());
**示例应用**
[su_tabs]
[su_tab title =“ Demo”]
<iframe height="100%" src="//howtodoinjava.com/wp-content/uploads/2014/01/jquery-cloning.html" style="" width="100%"></iframe>
[/ su_tab]
[su_tab title =“源代码”]
```java
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; jQuery Cloning Example &lt;/TITLE&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;SCRIPT LANGUAGE=&quot;JAVASCRIPT&quot;&gt;
<HTML>
<HEAD>
<TITLE> jQuery Cloning Example </TITLE>
<script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;></script>
<SCRIPT LANGUAGE=&quot;JAVASCRIPT&quot;>
var User = function(fname,lname){
this.fname = fname,
this.lname = lname,
......@@ -78,36 +72,33 @@ $(&quot;#clonedUser&quot;).html(cloned.getUserName());
//Verify cloned is same as original in starting
$(&quot;#clonedUser&quot;).html(cloned.getUserName());
}
&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;h3&gt;jQuery Cloning Example&lt;/h3&gt;
</SCRIPT>
</HEAD>
<BODY>
<h3>jQuery Cloning Example</h3>
To clone an object, you can directly use clone() method.
&lt;p&gt;
First Name : &lt;input type='text' id='fname'/&gt;
&lt;/p&gt;
&lt;p&gt;
Last Name : &lt;input type='text' id='lname'/&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;input type='button' value='Create above User and Clone it' onclick=&quot;cloneDemo();&quot;/&gt;
&lt;/p&gt;
&lt;p&gt;I have changed the first name of orginal Object to 'Noname'&lt;/p&gt;
&lt;p&gt;
Original User : &lt;span id='origUser'&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
After Cloning Original User : &lt;span id='origAfterUser'&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
Cloned User Still is : &lt;span id='clonedUser'&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
<p>
First Name : <input type='text' id='fname'/>
</p>
<p>
Last Name : <input type='text' id='lname'/>
</p>
<p>
<input type='button' value='Create above User and Clone it' onclick=&quot;cloneDemo();&quot;/>
</p>
<p>I have changed the first name of orginal Object to 'Noname'</p>
<p>
Original User : <span id='origUser'></span>
</p>
<p>
After Cloning Original User : <span id='origAfterUser'></span>
</p>
<p>
Cloned User Still is : <span id='clonedUser'></span>
</p>
</BODY>
</HTML>
```
[/ su_tab]
[/ su_tabs]
**祝您学习愉快!**
\ No newline at end of file
......@@ -53,9 +53,9 @@ public class UserService
```
## **步骤 2)添加验证异常处理程序**
## **步骤 2)添加验证异常处理**
好吧,这很重要,因为 **Hiberate 验证器插件没有任何用于异常处理的功能,因此您需要嵌入**。 RESTEasy 中的异常处理程序通过`ExceptionMapper`类使用。
好吧,这很重要,因为 **Hiberate 验证器插件没有任何用于异常处理的功能,因此您需要嵌入**。 RESTEasy 中的异常处理通过`ExceptionMapper`类使用。
```java
package com.howtodoinjava.exception;
......@@ -81,7 +81,7 @@ public class ValidationExceptionHandler implements ExceptionMapper<MethodConstra
## **步骤 3)构建客户端代码并测试应用**
我写了一个普通的 HTML 表单,它将使用表单提交为`firstName``lastName`参数发送两个参数。 参数验证自动执行,如果验证失败,则调用异常处理程序以返回正确的状态代码。
我写了一个普通的 HTML 表单,它将使用表单提交为`firstName``lastName`参数发送两个参数。 参数验证自动执行,如果验证失败,则调用异常处理以返回正确的状态代码。
```java
<html>
......
......@@ -6,7 +6,7 @@
> 必须使用`@Provider`注解`ExceptionMapper`接口的实现才能正常工作。
## 1\. Resteasy `ExceptionMapper` - 自定义异常处理程序
## 1\. Resteasy `ExceptionMapper` - 自定义异常处理
`ExceptionMapper`的示例实现供应器类如下所示:
......
......@@ -6,7 +6,7 @@
> 必须使用`@Provider`注解`ExceptionMapper`接口的实现才能正常工作。
## 1\. Resteasy `ExceptionMapper` - 自定义异常处理程序
## 1\. Resteasy `ExceptionMapper` - 自定义异常处理
`ExceptionMapper`的示例实现供应器类如下所示:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册