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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php 购物车完整实现代码
2014/06/05 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
pycharm配置git(图文教程)
2019/08/16 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
社区党务公开实施方案
2014/03/18 职场文书
服务口号大全
2014/06/11 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技