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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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实现的下载css文件中的图片的代码
2010/02/08 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
浅谈Python中的闭包
2015/07/08 Python
浅谈五大Python Web框架
2017/03/20 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python绘制简单折线图代码示例
2017/12/19 Python
详解用python写一个抽奖程序
2019/05/10 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
优秀体育委员自荐书
2014/01/31 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python