Jquery操作Ajax方法小结


Posted in Javascript onNovember 29, 2015

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法

jQuery.ajax([settings])

参数 描述
settings 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。

jQuery.get()

使用一个HTTP GET 请求从服务器加载数据。

jQuery.get(url [,data] [,success(data,textStatus,jqXHR)] [dtaType])

url 一个包含发送请求的URL

data 发送给服务器的字符串后键值对

success() 当请求成功时回调的函数

dataType 从服务器返回的预期数据。

用法:

$.get("test.cgi", { name: "John", time: "2pm" },

function(data){



alert("Data Loaded: " + data);

});

jQuery.getJSON()

使用一个HTTP GET 请求服务器加载JSON 编码的数据。

jQuery.getJSON(url [,data] [,success(data,textStatus,jqXHR)])

url 一个包含发送请求的URL

data 发送给服务器的字符串后键值对

success() 当请求成功时回调的函数

jQuery.getScript()

使用一个HTTP GET请求从服务器加载并执行一个JavaScript文件。

jQuery.getScript(url[success(script,textStatus,jqXHR)])

url 一个包含发送请求的URL

data 发送给服务器的字符串后键值对

用法:

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {


console.log(data); //data returned


console.log(textStatus); //success


console.log(jqxhr.status); //200


console.log('Load was performed.');

});

jQuery.post([settings])

使用一个HTTP POST请求从服务器加载数据。

jQuery.post(url[,data][,success(data,textStatus,jqXHR)][,dataType])

url 一个包含发送请求的URL

data 发送给服务器的字符串后键值对

success() 当请求成功时回调的函数

用法:

$.post("test.php", { name: "John", time: "2pm" },



function(data) {




alert("Data Loaded: " + data);

});

.load()

从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中。

.load(url[,data][,complete(responseText,textStatus,XMLHttpRequest)])

url 一个包含发送请求的URL

data 发送给服务器的字符串后键值对

complete 当请求成功时回调的函数

用法:

$('#result').load('ajax/test.html #container');

jQuery.ajax()

执行一个异步的HTTP(ajax)的请求。

参数:

url 类型: Sting 发送请求的地址(默认当前页面)

type 类型:Sting (默认为GET) 请求方式(”POST“或”GET“)

timeout 类型:Number 设置请求超时时间(毫秒),此设置默认覆盖全局。

async 类型:Boolean 默认设置(true)默认设置下所有请求均为一步请求,如果需要同步请求,设置为false。

beforeSend 类型:function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

cache 类型:Boolean  默认为(true) 设置为false 将不会从浏览器缓存中加载请求信息。

complete 类型:Function  请求完成后回调函数,(请求成功或失败时均调用)参数: XMLHttpRequest 对象,成功信息字符串。function (  XMLHttpRequest,

       textStatus) {this; // the options for this ajax request}

contentType  类型为:String  发送信息至服务器时内容编码类型,默认值适合大多数应用场合。

data 类型:Object String 发送到服务器的数据。将自动转换为请求字符串格式,GET请求附加在URL后

dataType 类型:String 预期服务器返回的数据类型, ”xml“返回XML文档。”html“返回纯文本信息,包含script 元素。”script“返回纯文本JavaScript 代码,不会自动缓存

结果。”json“返回JSON 数组。”jsonp“JSONP格式。

error 类型:function 请求失败时将调用此方法。

global  类型:Boolean 是否触发全局AJAX事件。默认为(true) 设置为false 将不会触发全局ajax 事件,可用于控制不同的AJAX事件。

ifModified 类型:Boolean  默认为false 仅在服务器数据改变时获取新数据。

processData 类型:Boolean  默认为(true)默认情况下,发送的数据发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-            urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success  类型:Function  请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态。

$(document).ready(function() {

jQuery("#clearCac").click(function() {



jQuery.ajax({




url: "/Handle/Do.aspx",




type: "post",




data: { id: '0' },




dataType: "json",




success: function(msg) {





alert(msg);




},



error: function(XMLHttpRequest, textStatus, errorThrown) {




alert(XMLHttpRequest.status);




alert(XMLHttpRequest.readyState);




alert(textStatus);



},



complete: function(XMLHttpRequest, textStatus) {




this; // 调用本次AJAX请求时传递的options参数


}

});

});
});

error事件返回的第一个参数XMLHttpRequest有一些有用的信息:

XMLHttpRequest.readyState:

状态码

0 - (未初始化)还没有调用send()方法

1 - (载入)已调用send()方法,正在发送请求

2 - (载入完成)send()方法执行完成,已经接收到全部响应内容

3 - (交互)正在解析响应内容

4 - (完成)响应内容解析完成,可以在客户端调用了

XMLHttpRequest.status:

1xx-信息提示
这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接收一个或多个1xx响应。
100-继续。
101-切换协议。
2xx-成功
这类状态代码表明服务器成功地接受了客户端请求。
200-确定。客户端请求已成功。
201-已创建。
202-已接受。
203-非权威性信息。
204-无内容。
205-重置内容。
206-部分内容。
3xx-重定向
客户端浏览器必须采取更多操作来实现请求。例如,浏览器可能不得不请求服务器上的不同的页面,或通过代理服务器重复该请求。
301-对象已永久移走,即永久重定向。
302-对象已临时移动。
304-未修改。
307-临时重定向。
4xx-客户端错误
发生错误,客户端似乎有问题。例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息。400-错误的请求。
401-访问被拒绝。IIS定义了许多不同的401错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在IIS日志中显示:
401.1-登录失败。
401.2-服务器配置导致登录失败。
401.3-由于ACL对资源的限制而未获得授权。
401.4-筛选器授权失败。
401.5-ISAPI/CGI应用程序授权失败。
401.7?访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。
403-禁止访问:IIS定义了许多不同的403错误,它们指明更为具体的错误原因:
403.1-执行访问被禁止。
403.2-读访问被禁止。
403.3-写访问被禁止。
403.4-要求SSL。
403.5-要求SSL128。
403.6-IP地址被拒绝。
403.7-要求客户端证书。
403.8-站点访问被拒绝。
403.9-用户数过多。
403.10-配置无效。
403.11-密码更改。
403.12-拒绝访问映射表。
403.13-客户端证书被吊销。
403.14-拒绝目录列表。
403.15-超出客户端访问许可。
403.16-客户端证书不受信任或无效。
403.17-客户端证书已过期或尚未生效。
403.18-在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。
403.19-不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。
403.20-Passport登录失败。这个错误代码为IIS6.0所专用。
404-未找到。
404.0-(无)?没有找到文件或目录。
404.1-无法在所请求的端口上访问Web站点。
404.2-Web服务扩展锁定策略阻止本请求。
404.3-MIME映射策略阻止本请求。
405-用来访问本页面的HTTP谓词不被允许(方法不被允许)
406-客户端浏览器不接受所请求页面的MIME类型。
407-要求进行代理身份验证。
412-前提条件失败。
413?请求实体太大。
414-请求URI太长。
415?不支持的媒体类型。
416?所请求的范围无法满足。
417?执行失败。
423?锁定的错误。
5xx-服务器错误
服务器由于遇到错误而不能完成该请求。
500-内部服务器错误。
500.12-应用程序正忙于在Web服务器上重新启动。
500.13-Web服务器太忙。
500.15-不允许直接请求Global.asa。
500.16?UNC授权凭据不正确。这个错误代码为IIS6.0所专用。
500.18?URL授权存储不能打开。这个错误代码为IIS6.0所专用。
500.100-内部ASP错误。
501-页眉值指定了未实现的配置。
502-Web服务器用作网关或代理服务器时收到了无效响应。
502.1-CGI应用程序超时。
502.2-CGI应用程序出错。application.
503-服务不可用。这个错误代码为IIS6.0所专用。
504-网关超时。
505-HTTP版本不受支持。
jQuery.param()
创建一个数组,一个普通的对象,或一个jQuery对象的序列化表现形似,用于URL查询字符串或Ajax请求。
jQuery.param(obj)
obj 一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。
jQuery.param( obj, traditional )
obj 一个用来序列化的一个数组,一个普通的对象,或一个jQuery对象。
traditional
一个布尔值,指示是否执行了传统的“shallow”的序列化。
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

Javascript 相关文章推荐
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vue中配置scss全局变量的步骤
Dec 28 Vue.js
jquery+php实现滚动的数字特效
Nov 29 #Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 #Javascript
Javascript闭包实例详解
Nov 29 #Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
javascript实现拖动元素交换位置
Nov 29 #Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 #Javascript
You might like
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP引用符&的用法详细解析
2013/08/22 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
在Python中使用元类的教程
2015/04/28 Python
python3个性签名设计实现代码
2018/06/19 Python
python 深度学习中的4种激活函数
2020/09/18 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
财务管理职业生涯规划书
2014/02/26 职场文书
期中考试反思800字
2014/05/01 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
实习生辞职信范文
2015/03/02 职场文书
综合测评个人总结
2015/03/03 职场文书
银行招聘自荐信
2015/03/06 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL