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 相关文章推荐
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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实现框架(二)
2006/10/09 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
jquery multiSelect 多选下拉框
2010/07/09 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
pycharm设置注释颜色的方法
2018/05/23 Python
对python函数签名的方法详解
2019/01/22 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python学习笔记之装饰器
2020/08/06 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
档案接收函格式
2015/01/30 职场文书
小学教师自我评价
2015/03/04 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书