ajax与jsonp比较:

作者: LiLi原上草 | 来源:发表于2017-05-01 23:15 被阅读55次

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变着一点!

———————————————————————————————————————————

看了很多网上的资料,拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别。

【1】ajax和jsonp本质上是不同的东西。Ajax是异步的js他的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

【2】ajax和jsonp这两种技术很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery类库把jsonp作为ajax的一种形式进行了封装(其实并不是一种东西)怪jq唠?用着爽就好;

【3】出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。

先介绍jsonp的使用方法:

好人做到底源码给你唠

$(function(){

$.ajax({

type: "get",

url: "http://apis.juhe.cn/cook/query.php?menu=鱼香肉丝&key=dfed9d599318b17aa073a9337d057e5f",

dataType: "jsonp"

}).done(function (data) {

console.log(data)

})

});

服务器运行的结果完美跨域获取到数据

再介绍PHP配合ajax跨域:

先建立叫search.php的文件!

内容为:

$data =$_POST['data'];

//服务器来接收客户端发送的数据

//服务器允许 该请求头进行跨域

header("Access-Control-Allow-Origin:http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f");

// 服务器获取数据的方式

header('Access-Control-Allow-Methods:GET');

// 动态获取数据地址

$ulr ="http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f";

// 服务器讲获取的数据转换成JSON格式 返回给客户端

$html=file_get_contents($ulr);

// 返回客户端 echo 返回一个字符串

echo $html;//服务器来返回一个 string的 数据

?>

Index.html的内容为:

运行结果:

最后再说一下json和jsonp的区别json是一种数据格式而jsonp是一种跨域的方式根本不是一回事只是名字差不多!

相关文章

  • ajax与jsonp比较:

    1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数...

  • ajax跨域请求

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

  • ajax与jsonp、jsonp

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

  • 2018-12-10

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

  • 2018-07-30

    一 ajax 二 jsonp 三 jquery-jsonp 四 jsonp公开接口

  • ajax

    1、ajax 2、jsonp 3、jQuery-jsonp 4、jsonp公开接口

  • 正则与json

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

  • ajax与jsonp

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

  • 前端(ajax、jsonp、jsonp公开接口)

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

  • ajax与jsonp

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

网友评论

    本文标题:ajax与jsonp比较:

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