슬 래 그 슬 래 그 json 과 jsonp 와 ajax 의 실질 과 차이

json 과 jsonp 와 ajax 의 실질 과 ajax 를 구별 하 는 두 가지 문제 1. ajax 는 어떤 형식 으로 데 이 터 를 교환 합 니까?정보 형식 jsonp 는 비공 식 크로스 필드 데이터 인 터 랙 션 프로 토 콜 '커 넥 터 방식' 정보 전달 쌍방 이 약정 한 방법 입 니 다.
json 은 텍스트 를 바탕 으로 하 는 데이터 교환 방식 이나 데이터 설명 형식 json 의 장점 1. 일반 텍스트 를 바탕 으로 크로스 플랫폼 전달 이 매우 간단 하 다.2. javascript 네 이 티 브 지원, 배경 언어 는 거의 모두 지원 3. 경량급 데이터 형식, 점용 문자 의 수량 이 매우 적 습 니 다. 특히 인터넷 전달 에 적합 합 니 다. 4. 가 독성 이 비교적 강하 기 때문에 xml 처럼 한눈 에 알 수 없 지만 합 리 적 으로 순서대로 들 어간 후에 도 쉽게 식별 할 수 있 습 니 다. 5. 쉽게 작성 하고 해석 할 수 있 습 니 다.물론 전 제 는 데이터 구조 json 의 형식 이나 규칙 을 알 고 있 습 니 다.서로 다른 유형의 무질서 한 키 를 설명 하 는 것 입 니 다. 집합 키 마다 OOP 로 이해 되 는 속성 설명 입 니 다.   [] 같은 유형의 질서 있 는 데 이 터 를 설명 하 는 집합 입 니 다. OPP 에 대응 하 는 배열 3. {} 서로 다른 유형의 무질서 한 키 값 쌍 과 [] 같은 유형의 질서 있 는 집합 에 여러 개의 키 항목 이 있 습 니 다. 영어 쉼표 를 통 해 4. 키 값 은 영어 콜론 으로 구 분 됩 니 다. 구분 하고 키 이름 에 영문 더 블 따옴표 를 추가 하 는 것 을 권장 합 니 다. "서로 다른 언어 로 해석 할 수 있 도록 5. json 내부 에서 자주 사용 하 는 데이터 형식 은 문자열 입 니 다.
 1             var person = { //      
 2                 "name":"Bob",
 3                 "Age":32,
 4                 "Company":"IBM",
 5                 "Engineer":true
 6             }  
 7             var personAge = person.Age;
 8             var conference = {        //      
 9                 "Conference": "Future Marketing",
10                 "Date": "2012-6-1",
11                 "Address": "Beijing",
12                 "Members":
13                     [
14                         {
15                             "Name": "Bob",
16                             "Age": 32,
17                             "Company": "IBM",
18                             "Engineer": true
19                         },
20                         {
21                             "Name": "John",
22                             "Age": 20,
23                             "Company": "Oracle",
24                             "Engineer": false
25                         },
26                         {
27                             "Name": "Henry",
28                             "Age": 45,
29                             "Company": "Microsoft",
30                             "Engineer": false
31                         }
32                     ]
33                 }
34                 var henryIsAnEngineer = conference.Members[2].Engineer;//      Henry

jsonp 의 발생 원인 1. Ajax 는 일반 파일 에 크로스 도 메 인 접근 권한 이 없 는 문제 (정적 페이지, 동적 페이지, 웹 서비스, wcf 는 크로스 도 메 인 요청 이 라면 일률적으로 허용 되 지 않 음) 2. web 페이지 에서 js 파일 을 호출 하 는 것 은 크로스 도 메 인 영향 을 받 지 않 습 니 다 (src 속성 을 가 진 탭 은 크로스 도 메 인 능력 script img iframe)3. 현재 순수 웹 엔 드 (ActiveX 컨트롤, 서버 에이전트, H5 의 Websocket 등 방식 으로 계산 하지 않 음) 를 통 해 도 메 인 을 넘 어 데 이 터 를 방문 하려 면 한 가지 가능성 만 있다 고 판단 할 수 있 습 니 다. 원 격 서버 에서 데 이 터 를 js 형식의 파일 에 넣 어 클 라 이언 트 호출 과 진일보 한 처 리 를 제공 하 는 것 입 니 다.4. json 의 순수 문자 수 형식 은 복잡 한 데 이 터 를 간결 하 게 설명 할 수 있 고 js 원생 지원 5. 웹 클 라 이언 트 는 호출 스 크 립 트 와 같은 방식 으로 크로스 도 메 인 서버 에서 동적 으로 생 성 된 js 형식 파일 (접미사. json) 을 호출 합 니 다.서버 가 json 파일 을 동적 으로 생 성 하려 는 이 유 는 클 라 이언 트 가 필요 로 하 는 데 이 터 를 불 러 오 는 것 입 니 다. 6. 클 라 이언 트 가 json 파일 호출 에 성공 한 후에 자신 이 필요 로 하 는 데 이 터 를 얻 고 나머지 는 자신의 수요 에 따라 처리 하고 보 여 줍 니 다.이러한 원 격 데 이 터 를 가 져 오 는 방식 은 ajax 와 같 습 니 다. 7. 클 라 이언 트 가 데 이 터 를 사용 하 는 것 을 편리 하 게 하기 위해 비공 식 전송 프로 토 콜 jsonp 이 프로 토 콜 의 요점 은 사용자 가 콜백 파 라 메 터 를 서버 에 전달 할 수 있 도록 하 는 것 입 니 다.그 다음 에 서버 에서 데 이 터 를 되 돌려 줄 때 이 callback 인 자 를 함수 이름 으로 json 데 이 터 를 감 싸 면 클 라 이언 트 가 자신의 함 수 를 임의로 맞 춰 서 데 이 터 를 자동 으로 처리 할 수 있 습 니 다.
 1     DOCTYPE html>
 2         <html>
 3             <head>
 4              <title>title>
 5             head>
 6             <body>
 7                 <script>
 8                 var flightHandler = function (data) {
 9                     alert('      ：  ' + data.price + ' ，  ' + data.tickets + ' 。');
10                 };
11                 var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler";
12                 var script = document.createElement('script');
13                     script.setAttribute('scr',url);
14                 document.getElementsByTagName('head')[0].appendChild(script);
15 
16                 script>
17             body>
18         html>

　　jsonp.html 
1             flightHandler({
2                 "code":"1991",
3                 "price":1991,
4                 "tickets":5
5             });

jQuery 는 어떻게 jsonp 호출 을 실현 합 니까?
 1     DOCTYPE html>
 2     <html>
 3     <head>
 4         <title>123title>
 5         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
 6         <script>
 7             $(document).ready(function () {
 8                 $.ajax({
 9                     type: "get",
10                     async: false,
11                     url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler",
12                     dataType: "jsonp",
13                     jsonp: "callback",//             ，    jsonp         (     :callback)
14                     jsonpCallback: "flightHandler",//    jsonp      ，   jQuery          ，    "?"，jQuery         
15                     success: function(json) {
16                         alert('        ：  ： ' + json.price + '  ，  ： ' + json.tickets + '  。');
17                     },
18                     error: function() {
19                         alert("123456");
20                     }
21 
22                 });
23             });
24         script>
25     head>
26     <body>
27     body>
28     html>

ajax 와 jsonp 의 실질 적 인 핵심, 구별 관계 1. ajax 와 jsonp 의 호출 방식 은 매우 비슷 하 다. 목적 처럼 url 을 요청 한 다음 에 서버 가 돌아 온 데 이 터 를 처리 하기 때문에 jquery 와 ext 등 프레임 워 크 는 jsonp 를 ajax 의 한 형식 으로 패키지 했다.2. 실질 적 으로 다른 ajax 의 핵심 은 xmlHttpRequest 를 통 해 이 페이지 내용 이 아 닌 jsonp 를 가 져 오 는 것 입 니 다. 핵심 은 script 태그 호출 서버 가 제공 하 는 js 스 크 립 트 를 동적 으로 추가 하 는 것 입 니 다.. jsonp 는 일종 의 방식 이거 나 비 강제 적 인 프로 토 콜 ajax 도 반드시 json 형식 으로 데 이 터 를 전달 해 야 하 는 것 은 아 닙 니 다.
다음으로 전송:https://www.cnblogs.com/xiaoxie2016/p/6293781.html
페이지 분석 javascript 순서
bacula 소프트웨어 백업 기능 실전 프레젠테이션

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage