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 相关文章推荐
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
PHP运行模式汇总
2016/11/06 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
jquery tools之tooltip
2009/07/25 Javascript
javascript 数组排序函数
2009/08/20 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
实时获取Python的print输出流方法
2019/01/07 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
医院后勤自我鉴定
2013/10/13 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
开学寄语大全
2014/04/08 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
冰峪沟导游词
2015/02/09 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Python入门之使用pandas分析excel数据
2021/05/12 Python