jQuery Ajax Call简介及实例jQuery Ajax Call简介 jQuery ajax调用请求是用aja

jQuery Ajax Call

jQuery Ajax Call简介

jQuery ajax调用请求是用ajax函数处理的；ajax被所有jQuery AJAX函数使用。这个方法通常用于其他方法无法处理的请求。在jQuery中，ajax方法是用来做一个异步的HTTP请求或AJAX请求。Ajax是一种编程语言，使开发人员能够进行异步的HTTP查询，而无需重新加载整个页面。

什么是jQuery Ajax调用？

开发人员多年来一直在利用jQuery库，使这个过程不象纯JavaScript那样繁琐。
jQuery最常用的一些Ajax速记方法： $.get，$ .post，和$.load。只用几行代码就可以快速地进行Ajax请求。
对我们希望进行的Ajax调用的更多控制有时是必要的。例如，我们希望指出如果Ajax调用失败会发生什么，或者我们需要做一个Ajax请求，但只需要在特定的时间长度内返回结果。在这些情况下，我们可以使用jQuery的$.ajax方法。

下面是jQuery ajax调用的语法，如下所示。

语法 -

$.ajax ({name:value, name:value, … })

下面是参数的可能值列表，如下:

Type- 这个参数用于指定请求类型。
Url- 这指定了请求应被发送到的URL。
Username- 它用于在HTTP访问认证请求中指定一个用户名。
Xhr- 它用于制作XMLHttpRequest对象。
Async- True是async的默认设置。它指定请求是否应该被异步处理。
BeforeSend- 这个函数应该在请求被发送之前执行。
Data Type- 服务器响应的预期数据类型。
Error- 它用于在请求失败时运行。
Global- True是默认值。它用于声明该请求是否应该激活全局AJAX事件处理程序。
IfModified- 默认情况下，它被设置为false。它用于说明是否只有在响应自上一次发生变化时请求才会成功。
Jsonp- 在一个jsonp请求中，一个字符串覆盖了回调函数。
JsonpCallback- 它用于为jsonp请求中的回调函数提供一个名字。
Cache- True是默认值。它告诉浏览器是否应该对请求的页面进行缓存。
Complete (xhr)- 这是一个在请求完成后被调用的函数。
内容类型- contentType的默认选项是 "application/x-www-form-urlencoded"，当数据被发送到服务器时使用。

如何编写jQuery Ajax调用？

使用jQuery库，我们可以利用jQuery的一些功能来构建ajax请求。
用户不希望被转移到另一个页面，在那里我们只能看到产品的描述，并且要返回去寻找新的产品。
JavaScript、DOM、XML、HTML/XHTML、CSS和XMLHttpRequest是相互联系的技术的例子。
它使我们能够在不重新加载网站的情况下实时沟通和接收数据。因此，它是快速的。
在jQuery中，ajax方法做一个AJAX调用。它通过一个异步的HTTP请求与服务器进行通信。
对于构建网络应用，jQuery提供了大量的AJAX技术。对于请求，它被广泛地使用。

jQuery Ajax调用方法

ajax函数是jQuery Ajax的核心。这个函数是用来做异步的HTTP请求。
jQuery ajax方法提供了Ajax能力。此外，它还与服务器进行异步通信。

下面是jQuery ajax调用方法的语法。

语法 -

$.ajax(url);

$.ajax(url,[options]);

Ajax请求配置选项为一个字符串的URL，数据选项应该被提交或检索到。JSON格式可以用来指定一个选项参数。然而，这个参数不是必需的。
使用url参数和设置中提供的选项，该函数以第一种形式进行Ajax请求。在第二种形式的设置参数中提供了URL，或者可以省略，在这种情况下，会请求当前页面。
在请求头中指定的内容类型通知服务器它将接受的答案的类型。
所有的查询在默认情况下都是异步派发的。要使其同步，请将其设置为false。
ajax方法向服务器发送一个异步的http请求，并从中获取数据。
JQuery XMLHttpRequest由ajax()方法返回。一个异步的HTTP请求是使用jQuery $.ajax()函数进行的。自1.0版本以来，它一直在库中，所以它不是新的。

jQuery Ajax调用实例

下面是jQuery Ajax Call的不同例子。

例子 #1

下面的例子显示了一个jQuery ajax调用，发送请求，如下所示。

代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jQuery/1.11.2/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ajaxBtn').click(function(){
$.ajax('/jQuery/getdata',
{
success: function (data, status, xhr) {
$('p').append(data);
}
});
});
});
</script>
</head>
<body>
<h1> Jquery Ajax Call
</h1>
<input type="button" id="ajaxBtn" value="Click on this button to send ajax request" />
<p>
</p>
</body>
</html>

输出

jQuery Ajax Call Example 1-1

jQuery Ajax Call Example 1-2

例子 #2

下面的例子显示了通过使用jQuery ajax调用获得json数据，如下所示。

代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jQuery/1.11.2/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#ajaxBtn').click(function(){
$.ajax('/jQuery/getjsondata',
{
dataType: 'json',
timeout: 500,
success: function (data,status,xhr) {
$('p').append (data.firstName + ' ' + data.middleName + ' ' + data.lastName);
},
error: function (jqXhr, textStatus, errorMessage) {
$('p').append('Error: ' + errorMessage);
}
});
});
});
</script>
</head>
<body>
<h1> Jquery Ajax Call
</h1>
<input type="button" id="ajaxBtn" value="Click on this button to send ajax request" />
<p>
</p>
</body>
</html>

输出

jQuery Ajax Call Example 2-1

Example 2-2

结论

这个方法通常用于其他方法无法处理的请求。例如，我们可以利用jQuery的一些功能来构建使用jQuery库的ajax请求。JQuery ajax调用请求是用ajax函数处理的；ajax被所有jQuery AJAX函数所使用。