Ajax请求(二)--JQuery的Ajax请求方法
$(".ajax.load").load("[url]http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态:success,error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
参数:url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。
当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});

参数:url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
Response.ContentType = "application/json";
Response.Write("{result: ’’" + Request["Name"] + ",你好!(这消息来自服务器)’’}");
jQuery 代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
}, "json");

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
$("#loading").ajaxStart(function(){
$(this).show();
});
$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});
- ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.- beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.) - ajaxSend (Global Event)
This global event is also triggered before the request is run. - success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data). - ajaxSuccess (Global Event)
This event is also only called if the request was successful. - error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request). - ajaxError (Global Event)
This global event behaves the same as the local error event. - complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests. - ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
- beforeSend (Local Event)
- ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.具体的全局事件请参考API文档。
好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
当设置 datatype 类型为 ’’script’’ 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)参数列表:参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) {
this; // the options for this ajax request
}cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。 function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 data Object,
String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ’’&foo=bar1&foo=bar2’’。 dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:"xml": 返回 XML 文档,可用 jQuery 处理。"html": 返回纯文本 HTML 信息;包含 script 元素。"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。"json": 返回 JSON 数据 。error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态 function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。示例代码,获取博客园首页的文章题目:
$.ajax({
type: "get",
url: "[url]http://www.cnblogs.com/rss[/url]",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append(" - "+$(domEle).children("title").text()+""); }); }, complete: function(XMLHttpRequest, textStatus){ //HideLoading(); }, error: function(){ //请求出错处理 } });
其他
- jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。jQuery 代码:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });serialize() 与 serializeArray()serialize() : 序列表表格内容为字符串。serializeArray() : 序列化表格元素 (类似 ’’.serialize()’’ 方法) 返回 JSON 数据结构数据。示例:HTML代码:<p id="results"><b>Results: b> p>
<form>
<select name="single">
<option>Singleoption>
<option>Single2option>
select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multipleoption>
<option>Multiple2option>
<option selected="selected">Multiple3option>
select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
form>serializeArray() 结果为:
Ajax请求(二)--JQuery的Ajax请求方法的更多相关文章
- Ajax:后台jquery实现ajax无刷新删除数据及demo
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8
- 跨域请求之jQuery的ajax jsonp的使用解惑
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 (转载)
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- jQuery(二) jQuery对Ajax的使用
学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...
- Ajax 原生和jQuery的ajax用法
https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').se ...
- Ajax第二天——JQuery的Ajax
JQuery中的Ajax jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法是 $.ajax(), 第二层是 load(), $.get() 和 $.post(), (常 ...
- jQuery源代码阅读之二——jQuery静态属性和方法
一.jQuery.extend/jQuery.fn.extend //可接受的参数类型如下:jQuery.extend([deep],target,object1,[objectN]) jQuery. ...
- Ajax学习系列——jQuery中Ajax的请求方式
在jQuery中,Ajax常见的请求方式主要有4种. 1.$.ajax()返回其创建的XMLHttpRequest对象. $.ajax({ type:"POST", content ...
- 第六章 jQuery和ajax应用
ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...
随机推荐
- script defer和async一探
今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异. 定义和用法 async 属性规定一旦脚本可用,则会异步 ...
- 函数指针|指针函数|C文件操作
body,table { font-family: 微软雅黑; font-size: 10pt } table { border-collapse: collapse; border: solid g ...
- Spring数据库访问
一般采用第三方具有连接缓冲池的数据源实现类:spring支持最常见的两个具有连接缓冲池的数据源为:DBCP和C3P0; DBCP(Database connection pool) 是Apache的一 ...
- 局域网内补丁更新80072EE2错误
在公网中,80072ee2通常是在进行自动更新时遇到的连接性错误.通常由于三防杀毒软件或者浏览器,代理服务器设置不正确而导致的.那么如果是在局域网中遇到该问题,该如何解决呢? 错误截图: 1.首先确认 ...
- C++STL中map容器的说明和使用技巧(杂谈)
1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...
- 关于phpMyAdmin表数据不能编辑更改的问题
今天在使用phpMyAdmin更改表中的数据时, 发现表的前面没有编辑.复制.删除这些内容, 于是我很奇怪,上网查了查,终于找到了一个解决的办法, 原来是我的这个表没有主键,于是我点击表 的 结构 , ...
- mysql sql语句
1.数据库和表的操作 创建 create修改 alter删除 drop查看 show 1.1创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [crea ...
- stl中的容器、迭代器和算法----vector中的find实现
来源 http://blog.csdn.net/huangyimin/article/details/6133650 stl包括容器.迭代器和算法: 容器 用于管理一些相关的数据类型.每种容器都有它的 ...
- Asp.net mvc 小试牛刀一:多语言支持
最近因为项目需要又从UWP开发转到了Asp.net mvc 开发,由于也不是什么老手,所以就将项目常见的一些技术问题记录一下自己的解决方案. 第一个需求:用户可以自由切换界面显示语言. 解决方案一:界 ...
- 如何使用RSYNC搭建备份服务器
1. RSYNC介绍 RSYNC是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windows等多种操作系统平台. 远程数 ...