细说JSONP与Ajax的区别

作者: 下一站深圳 | 来源:发表于2018-01-20 16:03 被阅读0次

细说JSONP与Ajax的区别
ajax跨域请求
跨域请求解决办法
ajax与jsonp、jsonp
2018-12-10
ajax和jsonp区别
Ajax的跨域请求
ajax与jsonp的区别及用法
正则与json
ajax与jsonp

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 );
　}
}

jＱuery就是帮我们封装成 $.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两种请求方式的工具
大家直接看代码吧（图片比代码块直观哈）：