ajax与jsonp的区别及用法


Posted in Javascript onOctober 16, 2018

首先我们应该知道ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新。

接下来我们就来看一下ajax和jsonp的区别。

ajax和jsonp的区别:

ajax是一种发送http请求与后台进行异步通讯的技术。其原理是实例化xmlhttp对象,使用此对象与后台通信。

一个完整的AJAX请求一般包括以下步骤:

(1)实例化XMLHttpRequest对象

(2)连接服务器

(3)发送请求

(4)接收响应数据

jsonp是一种可以实现跨域发送http请求的数据通信格式,可以嵌在ajax中使用。其原理是利用script标签可以跨域链接资源的特性。

JSONP由两部分组成:回调函数和数据,回调函数一般是在浏览器控制,作为参数发往服务器端(当然,你也可以固定回调函数的名字,但客户端和服务器端的名称一定要一致)。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。

JSONP的请求过程如下:

请求阶段:浏览器创建一个 script 标签,并给其src 赋值。

发送请求:当给script的src赋值时,浏览器就会发起一个请求。

数据响应:服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据,由于发起请求的是 script,所以相当于直接调用 jsonpCallback 方法,并且传入了一个参数。

最后:jsonp只支持get请求,ajax支持get和post请求。

Javascript 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
详解ESLint在Vue中的使用小结
Oct 15 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
Javascript中replace()小结
2015/09/30 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python实现简单http服务器功能
2018/09/17 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
大数据分析用java还是Python
2020/07/06 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
大学校庆邀请函
2014/01/11 职场文书
文秘自荐信
2014/06/28 职场文书
党员民主生活会材料
2014/12/15 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
红旗渠导游词
2015/02/09 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技