Jquery——Day4(Ajax进阶:加载请求、错误请求、请求全局事件、json/jsonp)

2023-11-15

1、加载请求

jQuery提供了两种全局事件:ajaxStart()、ajaxStop()。

只要用户触发了Ajax,请求开始时(未完成其他请求)激活ajaxStart(),请求结束时激活ajaxStop()

$('.loading').ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

若要请求时间太长。可以设置超时timeout;

若不想触发全局事件,可以设置“global”为false。

$.ajax({
	timeout:500
});

$.ajax({
	global:false
});


2、错误请求

(1)使用ajax,可以使用error()方法

$.ajax(function(){
	error:function(xhr,errorText,errorStatus){
		alert(xhr.status+':'+xhr.statusText);
	}
});

(2$.post()使用连缀的error()方法提示错误,连缀方法被fail()取代。
$.post('user.php').error(function(xhr,errorText,errorType){
	alert(errorText+':'+errorType);
	alert(xhr.status+':'+xhr.statusText);
});

(3)$.post()使用全局ajaxError()提示错误

$(document).ajaxError(function(event,xhr,settings,info){
	for(var i in event){
		document.write(i+"<br/>");
	}
});


3、请求全局事件

(1)ajaxSuccess(),对应局部方法success(),请求成功完成时执行

(2)ajaxComplete(),对应complete(),请求完成后注册一个回调函数

(3)ajaxSend(),没有对应的局部方法,请求之前要绑定的函数。(只有属性beforeSend)

$(function(){
	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize());
	});

	$(document).ajaxSend(function(){
		alert("发送请求之前!");
	}).ajaxComplete(function(){
		alert("请求完成后!");
	}).ajaxSuccess(function(){
		alert("请求成功后!");
	}).ajaxError(funcion(){
		alert("请求失败后!");
	});
});
此外,若要在ajax()方法下执行上述这些函数,如下所示:

$.ajax({
	type:'POST',
	url:'user.php',
	data:$('form').serialize(),
	success:function(response,status,xhr){
		$('#box').html(response);
	},
	complete:function(){
		alert('请求完成后,不管成功与失败!');
	},
	beforeSend:function(){
		alert('请求发送之前!');
	},
	error:function(){
		alert('请求失败后!');
	}
});


4、JSON和JSONP

(1)JSON

首先,以一个json文件为例,text.json

[
	{
		"url":"baidu.com"
	}
]
若要在ajax中加载该json文件,即
$.ajax({
	type:'POST',
	url:'text.json',
	//dataType:'html',
	success:function(response,status,xhr){
		//alert(response);
	}

});
由于json文件默认的dataType为“json”;

若强制将其改为“html”,则在alert弹出对话框时,需要借助“response”


(2)JSONP

若想跨域进行操作文件时,就必须使用JSONP。

JSONP(JSON with Padding),它是一个非官方的协议,它允许在服务器集成Script tags返回至客户端,同时通过JavaScript callback回调函数的形式实现跨域访问。

//跨域的php端文件,即远程端的文件jsonp.php
<?php
	$arr=array('a'=>1,'b'=>2,'c'=>3);
	$result=json_encode($arr);
	$callback=$_GET['callback'];
	echo $callback"($result)";
?>


类似于上述的远程端php,需要使用jsonp文件,如下所示:
a、本地访问——“jsonp.php”
$.ajax({
	type:'POST',
	url:'jsonp.php',    //php文件默认是html文件,得到的是json文件;
	dataType:'json',
	success:function(response,status,xhr){
		alert(response.a);
	}

});


b、远程端访问
若url对应的不是“jsonp.php”,而是“http://www.li/jsonp.php?callback=?”
若远程访问json2.php,此时不用ajax()方法,用getJSON()方法
//跨域,远程
$.getJSON("http://www.li/json.php?callback=?",function(){
	alert(response.a);
	console.log(response);
});


远程访问json,采用jsonp进行
(1)若dataType:'json'时,所对应的url文件必须是含有“?callback=?”的情况;
(2)若不使用“callback”回调函数时,还可以使用第二种方法,在ajax()方法中,将“dataType”设置为“jsonp”。


5、jqXHR对象
该对象是原生XMLHttpRequest的超级,包括“success()、complete()、error()”
而对于jqXHR是$.ajax()返回的对象。
//获取jqXHR对象
var jqXHR=$.ajax({
	type:'POST',
	url:'test.php',
	data:$('form').serialize();
});
jqXHR.succss(function(){
	alert(response);
});



由于success()、complete()、error()方法可能取消,同时用done()、always()、fail()三种代替。
done()表示成功后的回调函数。
jqXHR.done(function(response){
	alert(response+'1');
}).done(function(response){
	alert(response+'2');
});


使用jqXHR的连缀方式比$.ajax()属性方式3大好处:
(1)可连缀操作,可读性大大提高;
(2)可以多次执行同一个回调函数;
(3)为多个操作指定回调函数。

(注意:在上述案例中类似于jqXHR.done().done())




本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery——Day4(Ajax进阶:加载请求、错误请求、请求全局事件、json/jsonp) 的相关文章

随机推荐

  • 【数据预处理】Pandas缺失的数据处理

    目录 缺少数据基础 何时 为何 数据丢失 被视为 缺失 的值 日期时间 插入缺失数据 缺少数据的计算 Sum Prod of Empties Nans GroupBy中的NA值 清理 填写缺失数据 填充缺失值 fillna 用PandasO
  • flutter -- 自定义音乐播放器/视频播放器

    写在前头 flutter 自定义实现音乐播放的文章挺多的 但是在开发中还是碰见了超级无语的情况 没想到需求竟然要音频的1倍到2倍的播放倍速 我一度质疑这个功能的实际用途 但是既然提出来了 开发就得撅屁股实现 这里采用了第三方的视频播放器来实
  • 如何使用BurpSuite(后续)

    前面那篇文章是我前几天写的 我发现我把简单的问题弄得复杂了 今天我给大家再写一篇关于BurpSuite的使用 1 下载安装免费版或者收费版 这里就不演示了 2 运行软件 一直NEXT就可以 3 打开工具 此时拦截状态显示OFF 4 在打开的
  • Python中类成员变量与实例成员变量相互影响的原因超详细解释

    今天在看python学习手册时看到了两句话 一 第26章中 类对象提供默认行为 二 第26章中 实例对象是具体的元素 书中给的例子是这样的 但上网查了一下好像第二句话不是非常准确 如下面的文章 原文 https www jb51 net a
  • 优化算法学习(LM算法)

    文章目录 推荐书籍 理论理解 程序实现 ceres安装 代码 推荐书籍 建议学习 METHODS FOR NON LINEAR LEAST SQUARES PROBLEMS http www2 imm dtu dk pubdb views
  • Eclipse导入Maven项目,实在算得上是历经千辛万苦

    私下接触了一个项目 架构师那边用的是idea 并且是一个Maven项目 架构师说他那边idea可以自动将Maven项目转换为Web项目 但我已经习惯用Eclipse了 所以还需要自己动手试一试 这一试 一上午的时间算是过去了 尤其是中间遇到
  • 商品关联度分析(关联三度,附Python实战) 我的钱就是这么没的,不只有皮尔森系数的相关分析

    引言 上一年组织烧烤活动买食材时 我在超市的货架29买了一个烧烤架 然后到货架27买了瓶1 5L的可乐 最后在货架25找到了我需要的塑料小碗 今年再去那家超市的时候 特地再去烧烤架所在的货架查看了一下 看看有没有什么值得记录的灵感 果不其然
  • Mybatis处理枚举

    Springboot 集成 Mybatis 处理枚举 mybatis自带了两个处理枚举的 类 EnumTypeHandler EnumOrdinalTypeHandler 一个使用枚举的name 一个使用枚举的下标 做项目时 会节省数据库资
  • 业务逻辑漏洞总结

    业务逻辑漏洞总结
  • 纯前端实现excel表格导入导出

    前言 github https github com stardew516 以往做excel表格下载功能的时候 都是后端生成好表格后 存储在某个地方 然后给前端一个链接 前端使用a标签加download下载 或者使用node 其实纯前端也是
  • CSP 202209-1 如此编码

    答题 题目就是字多 include
  • ARIMA序列分析

    1 什么是平稳序列 stationary series 基本上不存在趋势的序列 各观察值基本上在某个固定的水平上波动或虽有波动 但并不存在某种规律 而其波动可以看成是随机的 2 ARMA模型 ARIMA的优缺点 优点 模型十分简单 只需要内
  • 关于谷歌浏览器安装油猴插件失败的解决方法

    今天拿到了一台二手电脑 刷完之后开始安装需要的程序 在给谷歌浏览器安装油猴插件的时候出现了很多错误 现在一一道来 希望对大家有所帮助 一 不知道如何找油猴插件 上某度搜了一下 都是exe执行文件 运行一下不知道会带来多少 兄弟姐妹 官网又没
  • 刷脸支付为高效便捷的生活这样应运而生

    科技让我们的生活更加便捷 没有人会拒绝更加高效便捷的生活 刷脸支付便是这样应运而生 拿我们的爷爷奶奶举例 他们并不精通手机 扫码支付对他们来说十分繁琐 甚至还没现金支付来的方便 因此刷脸支付便替他们解决了这一难题 不需任何操作 也无需记住密
  • java中的异常

    异常 什么是异常 运行时异常和编译时异常 编译时异常 运行时异常 异常处理及其语法 异常的产生及处理 try catch语句 finally语句 抛出异常 throws关键字 throw关键字 自定义异常类 什么是异常 java中的异常是指
  • 使用openssl的md5库

    http blog csdn net hepeng597 article details 8984797 在linux机器上 有一个命令可以计算出文件的md5值 那就是md5sum 如果没有的话 就需要安装RPM包 coreutils 现在
  • 嵌入式Ai方案介绍

    原文 https blog 51cto com zjbintsystem 2147975 utm source oschina app 公司玩了大半年的嵌入式AI平台 现在产品进入量产模式 也接触了很多嵌入式方案 有了一些心得体会 本人不才
  • 每天200亿次查询 – MongoDB在奇虎360

    每天200亿次查询 MongoDB在奇虎360 时间 2015 03 11 18 19 35 MongoDB中文社区 原文 http www mongoing com archives 715 主题 MongoDB 100 多个应用 1 5
  • 看完这篇 教你玩转渗透测试靶机Vulnhub——DriftingBlues-6

    Vulnhub靶机driftingblues6 vh渗透测试详解 Vulnhub靶机介绍 Vulnhub靶机下载 Vulnhub靶机漏洞详解 信息收集 开始目录爆破 暴力破解zip 上传WebShell 脏牛提权 获取flag Vulnhu
  • Jquery——Day4(Ajax进阶:加载请求、错误请求、请求全局事件、json/jsonp)

    1 加载请求 jQuery提供了两种全局事件 ajaxStart ajaxStop 只要用户触发了Ajax 请求开始时 未完成其他请求 激活ajaxStart 请求结束时激活ajaxStop loading ajaxStart functi