在前面我们了解到了jQuery里有关Ajax事件的一些相关函数,现在我们来看看有关Ajax请求的相关函数。
jQuery.ajax(options)
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
注意:如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。
返回值:XMLHttpRequest
参数:options (可选) : AJAX 请求设置。所有选项都是可选的。
选项:
async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。Ajax 事件。
程序代码
function (XMLHttpRequest) {
this; // 调用本次AJAX请求时传递的options参数
}
cache (Boolean) : (默认: true,dataType为script时默认为false) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串。Ajax 事件。
程序代码
function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter (Function) :给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
程序代码
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
dataType (String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:
程序代码
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象。Ajax 事件。
程序代码
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}
global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
jsonp (String) : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
password (String) : 用于响应HTTP访问认证请求的密码。
processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
scriptCharset (String) : 只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。Ajax 事件。
程序代码
function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}
timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 Delete 也可以使用,但仅部分浏览器支持。
url (String) : (默认: 当前页地址) 发送请求的地址。
username (String) : 用于响应HTTP访问认证请求的用户名。
示例:
加载并执行一个 JS 文件。
jQuery代码:
程序代码
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
保存数据到服务器,成功时显示信息。
jQuery代码:
程序代码
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
装入一个 HTML 网页最新版本。
jQuery代码:
程序代码
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
jQuery代码:
程序代码
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。
jQuery代码:
程序代码
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
分享到:
相关推荐
Ajax,即Asynchronous JavaScript and XML,允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中,我们可能是在设计一个...
总之,jQuery提供了一种简单易用的方式来处理跨域Ajax请求,无论是通过JSONP还是CORS。理解并熟练掌握这些技术,对于构建现代Web应用至关重要。在实际项目中,根据具体需求和安全考虑选择合适的方法,确保数据能够...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
在现代Web开发中,使用jQuery进行Ajax请求是一种常见的操作。jQuery作为一个广泛使用的JavaScript库,简化了从客户端到服务器的数据交互,而Ajax超时的设置则是保证请求响应时效性的重要手段。当客户端向服务器发送...
- 对于文字分页,我们可以看到如何使用jQuery选择器定位分页元素,动态生成和更新页码链接,同时通过AJAX请求获取新的数据。 - 图片分页可能涉及到图片预加载和懒加载技术,确保在用户滚动到相应位置时,图片能够...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...
- jQuery的$.getJSON()和$.get()、$.post()方法使AJAX请求更易编写,同时提供了一系列便利的事件处理函数,简化了页面元素的操作。 - 结合使用,可以轻松实现如分页链接的点击事件监听,触发AJAX请求,更新页面...
5. **Ajax请求**:在前端,使用jQuery的`$.ajax()`或者更高级的`$.post()`、`$.get()`方法发送Ajax请求,例如添加商品时,将商品信息发送到服务器。 6. **JSP页面**:展示商品列表和详细信息,使用Struts2的标签库...
2. 编写Ajax请求,设置URL指向C#服务端接口,类型通常为GET或POST。 3. 在Ajax请求的`beforeSend`回调中,启动进度条动画。 4. `success`或`progress`回调接收到服务器返回的进度信息,更新进度条的宽度或填充度。 5...
jQuery提供了`$.ajaxStart()`和`$.ajaxStop()`来监听所有AJAX请求的开始和结束。同时,`$.ajaxComplete()`会在每个请求完成后触发,无论成功或失败。 ### 错误处理 使用`error`回调函数可以捕获和处理请求错误,如...
在提供的代码片段中,可以看到两个函数:`doload1` 和 `doload2`,它们都使用了 jQuery 的 AJAX 方法来发送请求并处理返回的数据。 ##### 2.1 doload1 函数 ```javascript function doload1() { $.ajax({ url: ...
在这个"JqueryAjax简单实例"中,我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先,我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。
然后,使用jQuery的`.ajax()`方法或更简单的`.get()`、`.post()`方法发起AJAX请求。例如: ```javascript $.ajax({ type: 'POST', url: '/ajax', // 对应控制器中的方法 data: {key: 'value'}, // 发送的数据 ...
在C# ASP.NET环境下,我们可以创建一个Web服务(ASMX或WCF)来接收和处理AJAX请求。例如,可以创建一个名为`AjaxService.asmx`的服务,其中包含处理AJAX调用的方法。这些方法通常返回JSON或XML格式的数据,以便于...
2. **创建AJAX请求**:jQuery的`.ajax()`方法用于创建AJAX请求。在这个例子中,我们可能使用类似`$.ajax({ url: 'Handler.ashx', type: 'POST' })`的代码,其中`url`指定服务器端的处理程序,`type`指明请求类型...
更通用的 AJAX 方法是 `$.ajax()`, 允许自定义更多的选项,如请求类型、URL、数据、成功的回调函数以及预期的数据类型。在 `$.ajax()` 示例中,`success` 回调函数在请求成功时执行,`dataType` 指定了期望的响应...
然后,我们可以编写jQuery事件监听器来发送AJAX请求: ```javascript $(document).ready(function() { $("#getVerifyCode").click(function() { $.ajax({ type: "POST", // 通常用POST方式发送验证码请求 url: ...
在jQuery中,`ajaxSend`、`ajaxComplete`、`ajaxSuccess`、`ajaxError`等事件是Ajax过滤器的一部分,它们允许我们在Ajax请求的生命周期中插入自定义的行为。通过绑定这些事件,我们可以监听Ajax请求的状态,比如在...