细说JSONP与Ajax的区别

jsonp与ajax是两种截然不同的请求方式,了解它们的原理,我们先了解什么是跨域。跨域请求顾名思义就是请求超过自身域名空间的资源。举个例子,假如a.com的首页index.html页面里有一段js:

<script>
// jquery写法
$.ajax({
 Url: “http://b.com/getUserInfo”,
 Method: “post”,
 data: {
   userId: “001”
 },
 success: function(res) {
  console.info(res)
 },
 error: function(e) {
  console.error(e)
 }
})
</script>

当你进入a.com/index.html,这段js开始执行,结果是报错的,因为你当前的域名空间呢是a.com,而你去请求b.com的用户数据,跨域了,浏览器由于安全限制是不允许js去请求跨域的数据(要是运行,那银行卡的用户数据不就也可以请求了)。
但是其实很多时候,我们需要跨域请求,有两种方式,1种是代理(下次介绍node做获取音乐数据),另外一种是用jsonp。细心的程序员发现<script> <img><a>这一类的节点的src属性不受域名限制,还是那个例子:

<html>
<head>
  <script src=”http://b.com/getUserInfo”><!--改成用script标签请求刚才的接口-->
</head>
<body><body>
</html>

script标签可以请求到的getUserInfo接口返回的文本数据,其实就是跟你引入jquery用了官网提供的cdn链接是一样的
利用这个方式,我们可以这么写:
a域名下的 index.html:

<script  src =” b.com/getUserInfo?calk_back=’printer’ ”>
<script>
var printer= function(data) {
     console.info(data)
}
</script>

b.com 域名下的getUserInfo接口返回文本:
printer("我是data")

上面一访问 a.com/index.html,结果控制台就会打印: 我是data

calk_back 参数名是前后端约定好的,后端根据这个参数的值printer,返回 printer(data),这样就把data传入到 printer函数中

// 所以
<script src =” b.com/getData?call_back=printer”>


// 等于下面
<script>
printer(‘哈哈哈’); // data 是哈哈哈
</script>

而Ajax的底层是用XmlHttprequest类来实现异步请求(不刷新页面就可以获得响应数据),所以不能跨域,其原理为:

var  request  = new XmlHttprequest()
request.open(‘GET’, url, false)  //fasle 说明这个是个异步请求 
//下面指定回调函数
request.onreadystatechange = function(success_cb, error_cb){  
// cb只是jquery指定进来的
 if ( request.readyState == 4 && request.status == 200 ) {
  success_cb( xhr.responseText );
 } else {
  error_cb( xhr.statusText );
 }
}

jQuery就是帮我们封装成 $.ajax的工具来使用,各大浏览器为了安全,限制js跨域,所以ajax是不可以跨域的。Ajax由于太好用,已经成为业界的标准,由H5出来后,w3c也为此对Xmlhttprequest 提出出标准化,对xmlhttprequest增加新特性

  • 可以设置HTTP请求的时限。
  • 可以使用FormData对象管理表单数据(H5 formdata)。
  • 可以上传文件。
  • 可以请求不同域名下的数据(跨域请求,需要浏览器同意)。
  • 可以获取服务器端的二进制数据。
  • 可以获得数据传输的进度信息。
    大家可以看一下阮一峰大神的介绍: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

现在,我们直接来封装一个工具myRequest,能够提供 jsonp与ajax两种请求方式的工具
大家直接看代码吧(图片比代码块直观哈):


image.png

提供get、post两个方法


image.png

起一个node 服务:

image.png

访问http://localhost:3000/, 返回index.html
image.png

当他去请求百度的东西,就跨域了
image.png

再来看看jsonp方法


image.png

我们拿QQ的接口来对看jsonp方法的执行结果:


image.png

结果:jsonp获取到数据
image.png

下一篇:《Ajax 文件上传下载》
备注:等写好把代码链接贴出来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,628评论 0 7
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,666评论 0 2
  • JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的...
    西瓜w阅读 5,747评论 0 1
  • 张爱玲遇到胡兰成后,说到:“见了他,她变得很低很低,低到尘埃里,但她心里是欢喜的,从尘埃里开出花来。” 能让张这样...
    楼兰楼兰阅读 1,280评论 0 0
  • ——给将要结婚的老公的信 猪嘿嘿: 中午睡太多,晚上也是习惯性的思想活跃。为什么我会是今天这样看着冷淡但...
    晨一一阅读 1,891评论 1 0