JQuery系列(4) - AJAX方法
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作。调用该方法后,浏览器就会向服务器发出一个HTTP请求。
$.ajax方法
$.ajax()的用法主要有两种。
$.ajax(url[, options]) $.ajax([options])
上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数。
$.ajax({async: true,url: '/url/to/json',type: 'GET',data : { id : 123 },dataType: 'json',timeout: 30000,success: successCallback,error: errorCallback,complete: completeCallback,statusCode: {404: handler404,500: handler500} })function successCallback(json) {$('<h1/>').text(json.title).appendTo('body'); }function errorCallback(xhr, status){console.log('出问题了!'); }function completeCallback(xhr, status){console.log('Ajax请求已结束。'); }
View Code
上面代码的对象参数有多个属性,含义如下:
- accepts:将本机所能处理的数据类型,告诉服务器。
- async:该项默认为true,如果设为false,则表示发出的是同步请求。
- beforeSend:指定发出请求前,所要调用的函数,通常用来对发出的数据进行修改。
- cache:该项默认为true,如果设为false,则浏览器不缓存返回服务器返回的数据。注意,浏览器本身就不会缓存POST请求返回的数据,所以即使设为false,也只对HEAD和GET请求有效。
- complete:指定当HTTP请求结束时(请求成功或请求失败的回调函数,此时已经运行完毕)的回调函数。不管请求成功或失败,该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。
- contentType:发送到服务器的数据类型。 //发送服务器的数据类型,请求返回的数据类型是由dataType指定!!!
- context:指定一个对象,作为所有Ajax相关的回调函数的this对象。
- crossDomain:该属性设为true,将强制向相同域名发送一个跨域请求(比如JSONP)。
- data:向服务器发送的数据,如果使用GET方法,此项将转为查询字符串,附在网址的最后。
- dataType:向服务器请求的数据类型,可以设为text、html、script、json、jsonp和xml。
- error:请求失败时的回调函数,函数参数为发出请求的原始对象以及返回的状态信息。
- headers:指定HTTP请求的头信息。
- ifModified:如果该属性设为true,则只有当服务器端的内容与上次请求不一样时,才会发出本次请求。
- jsonp:指定JSONP请求“callback=?”中的callback的名称。
- jsonpCallback: 指定JSONP请求中回调函数的名称。
- mimeType:指定HTTP请求的mime type。
- password:指定HTTP认证所需要的密码。
- statusCode:值为一个对象,为服务器返回的状态码,指定特别的回调函数。
- success:请求成功时的回调函数,函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
- timeout: 等待的最长毫秒数。如果过了这个时间,请求还没有返回,则自动将请求状态改为失败。
- type:向服务器发送信息所使用的HTTP动词,默认为GET,其他动词有POST、PUT、DELETE。
- url:服务器端网址。这是唯一必需的一个属性,其他属性都可以省略。
- username:指定HTTP认证的用户名。
- xhr:指定生成XMLHttpRequest对象时的回调函数。
$.ajax简便写法
ajax方法还有一些简便写法。
- $.get():发出GET请求。
- $.getScript():读取一个JavaScript脚本文件并执行。
- $.getJSON():发出GET请求,读取一个JSON文件。
- $.post():发出POST请求。
- $.fn.load():读取一个html文件,并将其放入当前元素之中。
一般来说,这些简便方法依次接受三个参数:url、数据、成功时的回调函数。
(1)$.get(),$.post()
这两个方法分别对应HTTP的GET方法和POST方法。
$.get('/data/people.html', function(html){$('#target').html(html); });$.post('/data/save', {name: 'Rebecca'}, function (resp){console.log(JSON.parse(resp)); });
View Code
get方法和post方法的参数相同,第一个参数是服务器网址,该参数是必需的,其他参数都是可选的。第二个参数是发送给服务器的数据,第三个参数是操作成功后的回调函数。
(2)$.getJSON()
ajax方法的另一个简便写法是getJSON方法。当服务器端返回JSON格式的数据,可以用这个方法代替$.ajax方法。
$.getJSON('url/to/json', {'a': 1}, function(data){console.log(data); });
上面的代码等同于下面的写法。
(3)$.getScript()
$.getScript方法用于从服务器端加载一个脚本文件。
getScript的回调函数接受三个参数,分别是脚本文件的内容,HTTP响应的状态信息和ajax对象实例。
$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){console.log( data ); // test.js的内容console.log( textStatus ); // Successconsole.log( jqxhr.status ); // 200 });
getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口。
jQuery.getScript("/path/to/myscript.js").done(function() {// ... }).fail(function() {// ... });
(4)$.fn.load()
$.fn.load不是jQuery的工具方法,而是定义在jQuery对象实例上的方法,用于获取服务器端的HTML文件,将其放入当前元素。由于该方法也属于ajax操作,所以放在这里一起讲。
$('#newContent').load('/foo.html');
$.fn.load方法还可以指定一个选择器,将远程文件中匹配选择器的部分,放入当前元素,并指定操作完成时的回调函数。
$('#newContent').load('/foo.html #myDiv h1:first',function(html) {console.log('内容更新!'); });
load方法可以附加一个字符串或对象作为参数,一起向服务器提交。如果是字符串,则采用GET方法提交;如果是对象,则采用POST方法提交
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {console.log( "已经载入" ); });
上面代码将{ limit: 25 }
通过POST方法向服务器提交。
Ajax其它
ajax事件方法绑定
jQuery提供以下一些方法,用于指定特定的AJAX事件的回调函数。
- .ajaxComplete():ajax请求完成。
- .ajaxError():ajax请求出错。
- .ajaxSend():ajax请求发出之前。
- .ajaxStart():第一个ajax请求开始发出,即没有还未完成ajax请求。
- .ajaxStop():所有ajax请求完成之后。
- .ajaxSuccess():ajax请求成功之后。
下面是示例。
//Ajax请求指示器 $('#loading_indicator') .ajaxStart(function (){$(this).show();}) .ajaxStop(function (){$(this).hide();});//下面是处理Ajax请求出错(返回404或500错误)的例子。 $(document).ajaxError(function (e, xhr, settings, error) {console.log(error); });
返回值
ajax方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数.
详细参见:JQuery系列(5) - Deferred对象
JSONP
由于浏览器存在“同域限制”,ajax方法只能向当前网页所在的域名发出HTTP请求。但是,通过在当前网页中插入script元素(<script>),可以向不同的域名发出GET请求,这种变通方法叫做JSONP(JSON with Padding)。
ajax方法可以发出JSONP请求,方法是在对象参数中指定dataType为JSONP。
$.ajax({url: '/data/search.jsonp',data: {q: 'a'},dataType: 'jsonp',success: function(resp) {$('#target').html('Results: ' + resp.results.length);} });)
JSONP的通常做法是,在所要请求的URL后面加在回调函数的名称。ajax方法规定,如果所请求的网址以类似“callback=?”的形式结尾,则自动采用JSONP形式。所以,上面的代码还可以写成下面这样。
$.getJSON('/data/search.jsonp?q=a&callback=?',function(resp) {$('#target').html('Results: ' + resp.results.length);} );
文件上传
假定网页有一个文件控件。
<input type="file" id="test-input">
方法1,将文件作为表单数据上传:
var file = $('#test-input')[0].files[0]; var formData = new FormData();formData.append('file', file);$.ajax('myserver/uploads', {method: 'POST',contentType: false,processData: false,data: formData });
var file = $('#test-input')[0].files[0];$.ajax('myserver/uploads', {method: 'POST',contentType: file.type,processData: false,data: file });
参考
转载于:https://www.cnblogs.com/ybtools/p/6819719.html
JQuery系列(4) - AJAX方法相关推荐
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
- ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...
- jquery封装的ajax方法获取web服务器时间
解决方案: Ajax HTTP Head法 原理: 一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用 ...
- jquery中的ajax方法参数——$.ajax()方法详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法, ...
- jquery中的ajax方法请求后台数据
首先要插入jQuery.js文件,我这里用的是2.2.4版本,也可以用最新的3.1版本 案例 提前和后台沟通好对应的网址接口,我这里是用node.js写的后台,同时因为保存在本地,所以协议名和域名省略 ...
- jquery中的ajax方法(备忘)
参考:https://www.cnblogs.com/tylerdonet/p/3520862.html w3school:http://www.w3school.com.cn/jquery/ajax ...
- 深入了解jquery中的ajax方法参数
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- jQuery系列(十四):jQuery中的ajax
1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...
- 阿里jquery的ajax迁移fetch,你不需要jQuery(三):新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
最新文章
- 【文末送5本书】与「韦神」齐名,35岁刁晗生任教清华!18岁一战成名,数学界颜值巅峰...
- 深度学习在视觉搜索和匹配中的应用
- mysql+dump+选项_详解MySQL数据备份之mysqldump使用方法
- iOS系类教程之用instruments来检验你的app
- 时下最热开源大数据技术TOP10
- 北斗导航 | GPS卫星导航技术重要人物简介
- 怎么用cmd关闭系统弹窗_C盘空间越来越小怎么办?5招帮你解决问题!
- 聚焦一切关联需求-企业数字化转型:外部驱动力之客户篇
- LinkButton指定ClientOnClick的问题
- Android开发之虹软人脸识别活体检测SDK包Bitmap转NV21方法
- linux gpu 电脑推荐,System76推出具有RTX GPU更大显示器的Oryx Pro Linux笔记本电脑
- 2013年11月17日
- 【英语学习】【Daily English】U13 Holiday L02 That's supposedly the best time of year to go
- 利用UIScrollView和UIPageControl实现图片切换
- 腾讯广告算法大赛 | 初赛第一名心得分享
- Flink系列之流式
- 毕设题目:Matlab瑕疵检测
- matlab plv,脑电脑网络分析代码使用流程介绍
- matlab2016 win10,新手,win10电脑上面装matlab2016a还是b好呢?64位操作系统
- 浏览器下载ftp文件