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 相关文章推荐
jquery uaMatch源代码
Feb 14 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
php+js实现倒计时功能
Jun 02 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JSONP之我见
Mar 24 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
Angular value与ngValue区别详解
Nov 27 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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
浅谈Python的文件类型
2016/05/30 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
wxPython实现文本框基础组件
2019/11/18 Python
使用python模拟高斯分布例子
2019/12/09 Python
python 项目目录结构设置
2020/02/14 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
如何查看python关键字
2021/01/17 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
领导干部考察材料
2014/02/08 职场文书
《童趣》教学反思
2014/02/19 职场文书
公司接待方案
2014/03/08 职场文书
七一党日活动总结
2014/07/08 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书