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读取ASP设定的COOKIE
Feb 15 Javascript
javascript AutoScroller 函数类
May 29 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
vue2.x数组劫持原理的实现
Apr 19 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+javascript的日历控件
2009/11/19 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
js常见表单应用技巧
2008/01/09 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
离婚被告答辩状
2015/05/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers