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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
跟我学习javascript的Date对象
2015/11/19 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python中方法链的使用方法
2016/02/23 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python小进度条显示代码
2019/03/05 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
七年级政治教学反思
2014/02/03 职场文书
项目工作说明书
2014/07/29 职场文书
法人代表证明书格式
2014/10/01 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技