ajax를 통해 json 데이터를 얻은 후 json과 jsonp의 차이점과 형식 변환에 대한 간략한 분석

간단히 말하면 json은 데이터 문자열을 반환하고, jsonp는 스크립트 코드(함수 호출 포함)를 반환합니다. 다음으로 이 글에서는 ajax를 통해 json 데이터를 얻은 후 json과 jsonp의 차이점과 형식 변환을 소개합니다. 필요하신 분들은 참고하세요

json과 jsonp(json은 목적, jsonp는 수단일 뿐입니다)의 차이점은 다음과 같이 소개됩니다.

간단히 말하면 json은 데이터 문자열을 반환하고 jsonp는 스크립트 코드를 반환합니다.

JSON은 실제로 JavaScript의 객체로, 질적으로는 var obj={}와 동일하지만 양적으로 무한히 확장될 수 있습니다. 간단히 말해서, json은 실제로 JavaScript의 객체(Object)이자 배열(Array, 실제로는 객체)입니다. 이 두 명의 좋은 친구가 있습니다. 당신은 저를 포함하고 저는 당신을 n개의 레이어에 포함시켜서 많은 복잡한 것을 시뮬레이션합니다. 것들.

json은 사람이 읽고 쓰기 쉬우며 기계가 구문 분석하고 생성하기도 쉽습니다. 기능적인 웹 사이트는 종종 프런트엔드와 백엔드에서 많은 양의 데이터를 자주 교환해야 합니다. 강력한 표현력과 멋진 외관으로 인해 json은 점차 이상적인 프런트엔드 및 백엔드 데이터 교환 언어가 되었습니다. 시니어 xml에 관해서는 마이크로소프트의 XP처럼 은퇴해야 한다고 생각합니다.

동일한 출처에서 프런트엔드와 백엔드 데이터 교환 형식(동일한 출처 전략을 이해하지 못하는 경우 Baidu로 이동)은 확실히 json을 사용했습니다. 따라서 질문은 내가 원하는 경우입니다. 다른 사람의 웹사이트에 제공된 데이터를 어떻게 해야 하나요? 즉, 도메인 전체에서 데이터를 읽는 문제입니다(너무 멀리 나아가 다른 웹사이트에서 데이터를 읽을 필요가 없다고 말하지 마세요. 조만간 필요할 것입니다). json이 괜찮나요? 대답은 '안돼'입니다. 왜냐하면 json은 쉽게 얻을 수 있는 일반적인 텍스트 형식이기 때문입니다. 이 경우 인터넷 세계는 혼란에 빠질 것입니다. 이 문제에 대한 지정자는 최종 결과는 src 속성을 지정할 수 있는 img, script, iframe과 같은 태그만이 도메인 전반에 걸쳐 다른 사람의 웹사이트에 있는 데이터를 얻을 수 있는 능력을 갖게 된다는 것입니다(사진, 스크립트, 소스 파일은 실제로 데이터입니다). 예:

<!--京东商品图片-->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<!--百度CDN-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

json을 직접 얻는 것은 불가능한 것 같습니다. 데이터를 얻는 다른 방법이 있나요? 그렇다면 jsonp는 똑똑한 개발자들에 의해 발견된 것입니다. ajax의 발견과 마찬가지로 새로운 기술이 포함되지 않기 때문에 왜 발명이라기보다 발견이라고 할까요?

jsonp의 원칙은 다음과 같습니다. 웹사이트 A는 웹사이트 B의 데이터를 얻어야 합니다. 웹사이트 B에서는 [1. 태그는 먼저 필요한 데이터가 포함된 open.js 파일(웹사이트 B의 책임)을 가져옵니다. 2. 데이터를 획득한 후(데이터를 처리해야 함) 처리하는 방법의 이름은 foo(데이터 요청자의 책임과 의무)]로 지정되어야 합니다. 이는 웹 사이트 B 간의 계약을 체결하는 것과 같습니다. 요청자는 규칙에 따라 행동해야 하며, 요청자가 위의 두 가지 사항을 동시에 준수할 수 없으면 예상대로 데이터를 얻을 수 없습니다. 음... 이건 암묵적인 규칙

open.js 콘텐츠

foo({"name":"B","age":23});　　//为什么不直接写成json数据{"name":"B","age":23}呢，原因很简单，在js文件总得合乎js语法吧
//这也是为什么协议中明确规定处理数据的方法名必须命名为foo，因为B网站是在假定请求者的脚本中已经定义了数据处理方法foo的情况下返回数据；
//不然就会报foo is not defined错误

웹사이트 스크립트에는

function foo(data){
console.log(data);
//ToDo.. 
}

이 있어야 한다는 것과 같습니다! 차례차례 데이터를 얻었지만 A사이트와 B사이트는 매우 만족스러웠고, C사이트도 B사이트의 데이터를 얻어야 한다고 하여 B사이트에서 동의서를 전달했고, 언뜻 보기에 foo라는 이름은 자체 스크립트 파일의 6868번째 줄에 사용되었으며 스크립트의 모든 부분에서 사용되었습니다. 대량 교체로 인해 웹사이트 B는 foo를 변경하기로 결정했습니다. 바보에게 웹사이트 A는 즉시 뛰어올랐습니다. 자체 웹사이트가 foo를 사용하여 여러 곳에서 데이터를 참조했기 때문입니다.

위의 상황을 피하기 위해 멋진 개발자들은 js 파일을 동적으로 생성하는 방법을 사용했습니다. PHP 버전은 다음과 같습니다.

open.php

<?php
header(&#39;Content-type: application/javascript&#39;);
$jsonCallback = htmlspecialchars($_REQUEST [&#39;callback&#39;]); //获取请求者自定义的回调函数名
$jsonData =&#39;{"name":"B","age":23}&#39;; //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")"; //输出jsonp格式的数据，即一行函数调用语句
?>

글쎄요... PHP가 반환할 수 있는 이유는 다음과 같습니다. js 형식 파일, 자체 감독 Baidu.

그래서 웹사이트 A는 를 사용하여 변수를 수정하지 않고 데이터를 요청하고 이를 A에 반환합니다. 스크립트 파일의 내용은 다음과 같습니다.

foo({"name":"B","age":23}); //所谓的jsonp，就是一句函数调用，数据都被包裹传递到参数中了，千万别穿个马甲就不认识了 
网站C就用<script src="http://www.B.com/open.php?callback=blah"></script>来请求数据，返回给C的脚本文件内容是：
blah({"name":"B","age":23}); 
网站N就用<script src="http://www.B.com/open.php?callback=what"></script>来请求数据，返回给N的脚本文件内容是：
what({"name":"B","age":23});

문제가 해결되었습니다. 모두가 예상한 데이터를 얻었고 이름 충돌을 피했습니다.

jsonp의 전체 이름은 json with padding인데 매우 생생합니다. 다른 웹사이트에서 요청할 수 있도록 js 구문에 맞는 형식으로 json 객체를 래핑합니다. 즉, json 데이터가 js로 캡슐화됩니다.

json은 이상적인 데이터 교환 형식이지만 도메인 간에 직접 얻을 수 있는 방법이 없으므로 json은 합법적인 js 문으로 래핑(패딩)되어 js 파일로 전달됩니다. 이것이 json과 jsonp의 차이점입니다. json이 원하는 것이며 이러한 목적을 달성하기 위해 일반적으로 사용되는 방법은 json입니다. 물론 최종적으로 얻어지고 처리되는 것은 json입니다. 따라서 json은 목적이고 jsonp는 수단일 뿐입니다. json은 항상 사용되지만 jsonp는 도메인 전체에서 데이터를 얻을 때만 사용됩니다.

json과 jsonp의 차이점을 이해하고 나면 실제로 ajax의 도메인 간 데이터 수집은 이해하고 구현하기 쉽습니다. 동일한 소스의 경우 특별한 것이 없으며 교차의 경우 직접 가져옵니다. -도메인, 목표를 달성하려면 우회로를 만들어야 합니다.

첨부된 내용은 jquery에서 ajax 요청 json 데이터의 예입니다.

（同源）：

$.ajax({
url:"persons.json",
success:function(data){
　　　　console.log(data);
　　 　 //ToDo..
　 }
});

（跨域）：

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
});

jquery已把jsonp封装进ajax，很合理，因为毕竟绝大多数的jsonp请求都是ajax，关于jquery的ajax具体用法请自行百度，另外要注意的一点就是不同的网站提供的数据接口的$_REQUEST ['callback']中不一定绝对是callback也可能是cb,cbk等，具体使用时务必阅读服务端提供的有关接口使用的详细文档。

下面给大家介绍下由“夜未央0906”写的通过ajax获得json数据后格式的转换

在有些情况下获取到的json数据可能是string类型的，需要把其格式化为json对象才方便解析。

a）原生js通过ajax获取到的json

　　此时返回的数据默认是string型的，所以需要用eval()函数将其转化为json对象。需要注意函数内字符串的格式：eval(“(” + data+“)”)，因为返回的string是在{}里面的，eval会将大括号识别为js代码块开始和结束的标志，所以必须加上（），将其强制转化为对象来处理。

b）jquery获取

　　1：通过ajax()异步请求并把type设置为json，返回的就是json对象。

　　2：通过用与ajax()等价的$.getJSON(url,data1,function(data2,status,xhr){//......})方法获取的也是json对象。其中data1为连同请求发送的数据，data2为服务器返回的数据即json对象。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax请求和Filter配合案例解析

Ajax解决缓存的5种方法总结

ajax快速解决参数过长无法提交成功的问题

위 내용은 ajax를 통해 json 데이터를 얻은 후 json과 jsonp의 차이점과 형식 변환에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!