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 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
js实现无缝滚动图
Feb 22 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
Js+XML 操作
2006/09/20 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python制作词云的方法
2018/01/03 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Django中的forms组件实例详解
2018/11/08 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
error和exception有什么区别
2012/10/02 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
中考标语大全
2014/06/05 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript