美文网首页前端开发专题
ajax与jsonp的区别及用法

ajax与jsonp的区别及用法

作者: a333661d6d6e | 来源:发表于2018-11-18 16:13 被阅读12次

首先我们应该知道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请求。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

相关文章

  • ajax与jsonp的区别及用法

    首先我们应该知道ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新。接...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 跨域请求解决办法

    CORS:即跨域资源共享,它允许浏览器向跨域服务器发送ajax请求 与JSONP的区别:jsonp是绕过了同源限制...

  • 细说JSONP与Ajax的区别

    jsonp与ajax是两种截然不同的请求方式,了解它们的原理,我们先了解什么是跨域。跨域请求顾名思义就是请求超过自...

  • ajax与jsonp、jsonp

    轮播图 json 数据格式 ajax与jsonp ajax是获取数据的 get请求 post请求 url:"js/...

  • 2018-12-10

    节点操作 ajax jsonp jQuery-jsonp jsonp公开接口

  • ajax和jsonp区别

    ajax和jsonp的调用方式很像,目的一样,都是请求url,然后把服务器返回的数据进行处理,因此jquery和e...

  • Ajax的优缺点及工作原理?

    Ajax的优缺点及工作原理? 定义和用法: AJAX = Asynchronous JavaScript and ...

  • Ajax的跨域请求

    1)前端Ajax部分代码 2)后端路由部分代码 3)附加链接,解释json和jsonp的区别

  • 正则与json

    正则 ajax与jsonp ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息...

网友评论

    本文标题:ajax与jsonp的区别及用法

    本文链接:https://www.haomeiwen.com/subject/nehgfqtx.html