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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
原生js实现弹幕效果
Nov 29 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
js回调函数仿360开机
2019/12/26 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Java程序员面试题
2013/07/15 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
2014年情人节活动方案
2014/02/16 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
企业员工集体活动方案
2014/08/17 职场文书
党支部对照检查材料
2014/08/25 职场文书
毕业生实习证明
2014/09/19 职场文书
财政局个人年终总结
2015/03/03 职场文书
环卫处个人工作总结
2015/03/04 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers