CIS165 L8 Ajax & JSON

CIS 165 JavaScript에 다시 오신 것을 환영합니다 프로그램 작성

나는 빅터 캄포스 다 그래서 우리 교과서의 8 번째 교재가 전부입니다 JSON과 Ajax 그래서 이것이 가장 동적 웹 사이트를 만드는 현대적인 방법 특히 JSON이있는 웹 사이트 그건 매우 일반적인 형식 유용하고 실용적인 요즘

그래서 이 장에서 내가 할 일은 내가 최종 결과를 보여줄 것입니다 그러면 그것을 생성해야합니다 나는 Firefox에서 실행하기 잠시 후 "캐릭터 가져 오기"를 클릭합니다 그래서 우리는 거기에 작은 애니메이션을 얻습니다 그게 다시 jQuery 덕분에

우리는 익숙한 문자 이전 과제 그녀 아래의 일부 텍스트 그림 오른쪽의 일부 텍스트 그림 다른 캐릭터가 나올거야 그래서 조금 다른 임의의 성격 애니메이션과 그들의 약간의 정보가 표시됩니다 그래서 이것은 가고있다

이전에 다소 기초를 두다 우리가 해보았지만 JSON의 최신 개념을 설명하십시오 이것은 JavaScript Object Notation입니다 이 캐릭터가 여기있는 모든 것 JavaScript 객체에 저장됩니다 사진에 a의 이름이있다 캐릭터의 원점이있다

성격에는 두 개의 초능력이있다 그들은 무작위로 우리는 작은 애니메이션이있는 캐릭터 설정은 JSON을 갖게 될 것입니다 읽은 후 JSON 파일에 파일을 추가하십시오 그 장은 그것이 단순히 텍스트는 특별한 의미가 없다 이 텍스트는 처리되지만 JavaScript 또는 jQuery 그래서 우리는 당신의 기억을 새롭게하기 위해서 중괄호 다음 우리는 몇 가지 열쇠가있다

콜론 일부 값 쉼표 다른 키 다른 값으로 구분됩니다 이 방법 키 값 쌍까지 매우 마지막 항목 사이에 쉼표가 없습니다 다른 모든 항목에는 쉼표가 있으며 싱글을 사용하는 경우 큰 따옴표를 사용해야합니다 유효한 JSON 형식이 아닌 따옴표 이 객체의 마지막 요소 쉼표가없고 우리는 그 책에서 그것을 보았습니다 그것은 우리에게 매우 복잡해질 수 있다고 말한다

우리가 사용자의 열쇠를 가지고 있다면 콜론은 배열의 값이고 배열에서 여러 객체를 가질 수 있습니다 거기서 나는 첫 번째 대상을 가질 수있다 당신은 존 쉼표 법안을 알고 있지만 정말로 JSON에서 배열을 사용하는 방법 더 복잡한 데이터 구조를위한 것입니다 우리는 다른 JSON 객체와 그때 나는 콜론 존이라고 말할 수있다 배열의 두 번째 JSON 객체 Bill의 다음 JSON 객체를 Bill이라는 이름으로 JSON 객체 이름의 배열 여기의 입력란은 그들은 다른 요소들을 참조하고있다

물론 나는 자본화 할 수있다 우리가 문자열을 사용할 수있는 모든 것 객체의 숫자와 객체를 사용할 수 있습니다 그래서 우리의 데이터를 저장하는 방법이지만 우리는 더 복잡해 질 수 있습니다 우리는 단지 이름을 저장하고있다 하지만 우리는 다른 요소들을 저장하고 있습니다

그렇다면 우리는 실제로 그것을 분리해야만합니다 이것을 여러개로 나눈다 이보다 더 선을 긋습니다 다른 데이터에있는 동일한 데이터 프레 젠 테이션 오 사실은 내가 이동합니다 이 녀석은 그렇게 똑같아 데이터이지만 다른 프리젠 테이션 왜냐하면 내가 할 수있는 일은 내가 이 물건에서 존의 이름을 얻었 어

쉼표 주소를 사용할 수 있으며 123 개의 가짜 주소입니다 Bill comma의 주소는 999입니다 오타이 레이크로드 및 낸시 5 피트 주소 어디서나 5 번 높은 곳에 있으므로 책에서 본 것의 요약 당신이 필요로하는 특정 과제 네가 가진 것과 똑같은 일을하는거야 char JSON 파일 또는 자동차 JSON 파일 JSON 문자가 처음부터 시작됩니다 중괄호가있는 첫 번째 줄과 그것으로 끝까지갑니다

닫는 중괄호 나는 백 개있어 여기 줄을 서서 모든 차를 가져 왔어 우리의 모든 캐릭터가 우리의 핵심입니다 값 콜론은 배열이고 그 온라인으로 시작하고 모든 방법을 간다 99로 정확하게 재현됩니다

내가이 작은 꼬마에 들어가기 위해 잠깐 한거야 내가 쓴 연습의 비트 JSON 객체 이름 spider-man 쉼표 이름 감히 쉼표로 쉼표로 이름을 붙입니다 나는 그 분야에 대해 이야기하고있다 해당 값은 그래픽 및 동일한 그래픽에 대한 링크가 포함되어 있습니다 이전 과제에 사용했던 해당 링크를 숙제 쉼표에 대한 설명 다른 키 값 쌍의 쉼표 그래픽 키의 가치를 과시하다 쉼표 원점 키와 그 값 쉼표 같은 스키마를 반복적으로 같은 구조를 반복해서 반복합니다

조금 더 복잡하고 잘 말하다 우리는 우리의 힘을 가지고있다 그것은 힘 1과 힘의 배열이다 너무 복잡해지기 때문에 평범한 구식으로 설정된 데이터 구조 JSON은 일반 텍스트이므로 전에 그것에 대해 들어 봤어 복잡한 신비주의처럼 보였다

JSON은 단순한 텍스트 일뿐입니다 JSON JSON을 만듭니다 특정 형식이어야한다 구문과 스타일 이외에 특별한 소프트웨어가 필요하다 우리는 물론 자바 스크립트를 사용하고 있습니다

처리 할 내용을 처리합니다 문자가있는 특정 이름 기원과 힘을 가진 그래픽 그 힘은 결장 한 힘이다 콜론에 쉼표로 표시된 쉼표 벽을 크롤링하면 마지막 항목이됩니다 array 객체의 마지막 항목입니다 그 열쇠의 그 배열에 특정 개체 쉼표로 동일한 작업 데어 데블과 보이지 않는 여자 킹핀 마그노 박사

파멸의 검은 고양이 모두 똑같은 계획이야 그 하나의 객체는 모든 문자에 대해 설정 한 배열 모든 차와 그것과 더불어 이름 키를 가지고있다 가치있는 그래픽과 원산지 힘 마지막 항목이 없으므로 마지막 쉼표가 없습니다 내 캐릭터 JSON 데이터 정의 이것은 어느 정도 데이터베이스이다 전통적으로 데이터베이스는 어떤 형태의 서버이지만 JSON을 사용합니다

서버가 필요없고 저장할 수 있습니다 데이터를 검색하면 HTML 파일에있는 HTML 파일 평소 HTML 헤드 메타 타이틀 설정 스타일을 가지고 있습니다 시체의 순간 머리글 버튼으로 무언가를 할 것이다 그 전에 우리가했던 ID div가 있는데 두 개의 열이 표시됩니다 너는 왼쪽 열의 앞에 그것을했다

오른쪽 열 그래서 스타일의 조금 전체 열 요소를 간단하게 너비의 100 퍼센트를 차지한다 왼쪽 열이 떠있는 화면의 왼쪽 그 너비의 50 퍼센트를 텍스트를 가운데 정렬 오른쪽 칸도 단순히 왼쪽으로 떠있다 우리가 그렇게해야하기 때문에 줄을 서서 그 너비가 50 % 그래서 결과는 우리가 열 설정 우리는 대본 있어요 jQuery 라이브러리에 대한 선언 311 이전과 같은 것을 사용한다 minified 버전 다음 우리는 메인있어 스크립트 우리는 새로운 iffy가 작동하도록했습니다 와 함께 단순히 달러 기호 그리고 그것들은 괄호를 포함한다

최종 실행 괄호 없음 우리는 최종적인 것이 필요 없다는 것을 기억하십시오 우리가 처리 할 때 괄호를 실행 jquery 우리는 마지막 운동에서 그것을 보았습니다 엄격한 사용법은 항상 여기에 있습니다 ~을 만들 변수를 채우십시오 eczema xml httprequest 너무 xhr 새로운 포커스가있는 xmlhttprequest 객체 최근 장에서 크게 기본적으로 연결하도록 허용 외부 콘텐츠에 도달하려고합니다

JSON 파일에 저장하고 데이터를 우리가 jquery를 사용하고 있기 때문에이 HTML 파일 jquery 요소를 만들어 전체를 저장할 버튼을 저장하십시오 열 요소 왼쪽 열 요소 달러가있는 오른쪽 열 요소 기호를 처음부터 그리다 우리가 가지고있는 jquery 기반이라고 자동차 기능을 얻으겠습니다 잠시 후 그리고 마지막에 요소에 대한 이벤트 리스너가 있습니다 버튼 클릭으로 차를 타십시오

자동차 기능으로 버튼이 활성화되어 있습니다 차를 타면 어떻게 될까요? xhr 객체와의 연결을 열려면 파일에서 데이터를 가져올 것입니다 파일에 자동차 JSON 파일을 우리는 이것이 사실이라고 말하고 있습니다 우리가 연결하는 비동기 호출 우리가 비동기 적으로 의미하는 파일 우리가 그 파일에 연결하려고 시도했다 또한 다른 일을하는 것이 아니라 자유롭게 할 수있다

파일에 대한 연결을 기다린다 비동기로 실제로 연결을 시도합니다 이 파일은 우리에게 준비시키는 것입니다 실제로 연결할 파일에 연결하십시오 우리가 할 파일에 xhr은 그것을 보낸다

실제로 우리를 파일에 연결합니다 우리는 무엇을 보내고 우리는 보내고 있습니다 파일에 연결을 요청하면 추가 매개 변수를 말하지 않기 때문에 아니오라고 말하면 우리에게 파일을 연결하십시오 우리가 관리한다면 load xhr download 데이터를 올바르게로드하거나 자동차 JSON 파일은 다음 작업을 수행합니다 이것은 익명의 함수였다

명명 된 함수이지만 끝낼 수 있습니다 단순히 익명의 기능으로 함수 열기 닫기 괄호 열기 포괄적 인 중괄호 그 모든 것 때문에 로딩 할 때 무슨 일이 일어나는가? 데이터는 우리가 데이터를 변환해야하는 데이터 우리가 HTML로 작업 할 수있는 것 우리가 얻은이 모든 데이터는 JSON 파일은 단순한 오래된 텍스트이지만 우리가 사용할 수있는 방식으로 설정되어 있습니다 자바 스크립트에서 객체로 JSON JavaScript 객체 표기법 그것을 분석 할 필요가있다 내 라인 48이하고있는 데이터 여기서 car 객체라는 변수를 만듭니다 모든 문자를 포함하는 객체 도트 응답 xhr에서 오는 데이터 xhr 개체가 가득 찬 텍스트 속성 중 하나가 응답 텍스트 그래서 우리는 기본적으로 이 모든 데이터를 xhr의 텍스트로 그 전체 요점이었던 대상 열리고 우리가 필요로하는 잘 보낸다

jsonparse notice JSON이 있어야합니다 모든 자본 jsonparse 우리는 그것을 적용한다 방법에 그 데이터를 다음에 도착 car 객체 변수에 모두 저장 됨 이 데이터가 모두 저장되었습니다

평면 데이터가 우리가 할 수있는 JavaScript 객체 우리의 jQuery 또는 JavaScript 모두 적용 우리가 무작위로가는 것에 대한 지식 우리의 데이터에서 문자를 가져 와서 좋은 오래 된 자동차 변수 mathrandom은 x 차 객체가 될 것입니다 모든 차 길이 그러나 그것이 의미하는 것은이다 모든 JSON 데이터 내부 우리가 모든 차를 가지고있어 거기의 json 데이터 문자로 이루어지며 내가 말했듯이 배열은 위치가 0이므로 배열의 첫 번째는 스파이더 맨입니다 배열의 위치가 무모한 두 번째 위치는이 등등 그래서이 그 길이의 배열입니다

그 객체로부터 길이를 배열합니다 우리 범위는 0에서부터 무작위로 0 수학 도트를 보장하는 길이 바닥이 새 것이 아니기 때문에 우리가 만든다 저장하기 위해 비어있는 두 개의 문자열 캐릭터의 기본 데이터와 문자의 통계는 그 문자열 이름이 붙들려있다 소스가있는 이미지 태그를 단락 짓지 만 우리가 동적으로 선택된 문자들 image 캐릭터 오브젝트를 저장할 필요가있다 모든 문자 배열에서 특히 난수는 그래픽을 너무 찢어서 줘

다시 모든 차량 데이터에서 배열의 무작위 위치를 그렇게 배열하십시오 임의의 문자라고 생각해 봅시다 데어 데블입니다 우리가 Daredevils를 표시하도록 이름이 있습니다 우리가 그래픽을 원한다면 거기에 이름을 써라

링크 주소 인 그래픽 내가 너에게 그 소스를 제공 할거야 그 주소가 뭐든간에 우리가 닫는 곳으로 설정합니다 태그는 다음 단락을 닫습니다 우리가 더 많이 추가하는 비슷한 줄 새 단락을 만드는 문자열 이번에는 캐릭터의 이름 모든 데이터의 개체 특정 위치에서 배열은 다시 한번 나를 말할 것이다 이름과 잘 화면에 표시 우리 문자열을 구축하고 있습니다

실제로 우리가 가지고있는 스크린에 그것을 디스플레이해라 우리는 왼쪽 열 요소를 div로 만들고 우리는 우리는 HTML을 쓸 것입니다 우리가 만든 문자열을 써주세요 좋은 애니메이션을하기 위해서 우리는 jquery 메서드를 숨긴 다음 사라집니다 스탯 2 초 만에 우리가 가진 것과 매우 흡사 한 것 우리가 추가 할 통계 문자열 우리가 필요한 원점을 말할 수있는 단락 데이터에서 원점을 얻으려면 우리 모두로부터의 우리의 인물 문자 배열 우리 데이터의 배열 원점 필드 에서 모든 자동차 배열 특정 위치는 나에게 원점을 준다

필드 바로 거기에 표시됩니다 그럼 나는 총알 점수를 표시 할거야 목록 그래서 새로운 문자열에 더 추가 단락이 UL과 같이 정렬되지 않은 목록을 시작합니다 우리가 본 순서없는 목록 목록 항목 목록 항목 시작 목록 항목 끝 목록 항목 시작 목록 항목 및 목록 항목 연결을 통해 통보 배열의 Google 데이터에서 배열의 특정 위치 시간은 나에게 힘 배열 위치 0 p 1을 준다 그건 좀 더 복잡하지만하자

Google 데이터를 다시보고 그 이유를 확인하십시오 우리는 모든 자동차 배열을 가지고있어 박람회 후 우리는 힘을 가졌어 well powers는 배열에있는 배열입니다 인접 오브젝트 파워는 JSON 데이터를 배열의 JSON 데이터 인 배열 JSON 데이터가 너무 많아서 머리가 아플 때도 있지만, 그렇게 할 때 그것은 완벽 함으로 힘을 얻는다 키 콜론의 값은에서 배열입니다

배열의 위치는 0입니다 두 위치 등 우리는 하나의 JSON 있어요 이 powers 배열의 객체 위치 0 다른 위치는 없습니다 배열에서 속지 마라 위치가 지정되지 않은 p1과 p2가 있습니다 0 이 둘의 위치 1은 키입니다

위치 0의 1 개의 객체의 값 당신이 보여줄 수있는 힘의 배열 배열 쉼표 2의 위치 2를 원했습니다 부모 JSON 개체를 부모 개체라고합시다 실제로 부모가 아니지만 이모는 벤 삼촌에게 쉼표로 부모님과 이제 우리는 힘 배열 위치 1을가집니다 힘 배열 위치 0은 위치 1 인 반면 p1 p2 데이터에 전원을 공급합니다 또는 배열의 항목 2가 부모 데이터는 바로 그걸 그게 바로 우리가 위치 p1로 제로의 힘을 얻는다

모든 캐릭터는 배열의 값으로 키를 키 그들은 모두 제로를가집니다 포지션과 그들은 모두 p1과 ap2 그리고 다른 값으로 목록 항목 1 목록 항목 2 목록 끝내기 우리가 표시해야 할 단락을 끝내야합니다 그 문자열 통계는 화면에 나타나므로 우리가 쓰고있는 문자열을 HTML로 출력해라 우리가 할 수 있도록 먼저 숨길 필요가 있습니다 페이드 인하 고 난 다음에 시간의 조금의 지연 나는 원하는 왼쪽 열에서 첫 번째로 페이드가 시작됩니다

두 번째 열은 오른쪽 칼럼의 1 / 4 나중에 두 번째로 1 초 및 3/4 초 페이드 인하여 모든 것이 사라 지도록 2 초 만에 오른쪽 열 4 분의 1 초 안에 사라지기 시작합니다 왼쪽 열 다음에 우리가 끝난다 그 결과를 다시 얻으세요 우리가 성격을 얻는 것을 새롭게해라 우리 데이터에서 우리는이 캐릭터를 얻었습니다

그 캐릭터는이 캐릭터 등등 사진이로드 중입니다 왼쪽 열과 텍스트 이름 우리는 오른쪽에 기원 필드가 있습니다 열과 힘 p1과 p2가 적재되고있다 오른쪽 열에 우리는 독이있다

당신이 보는 것 같은 종류의 페이딩의 다른 속도 그렇게 원점을 표시하고 그림과 이것이 많은 일을하는 이름입니다 우리가 이미 본 개념 중 그 (것)들에 그러나 큰 생각은 지금이다 우리 데이터가 JSON 파일에서 온다 에 저장된 외부 JSON 파일 프로젝트와 동일한 폴더에 데이터가 저장됩니다 우리가 가진 프로젝트 폴더에 저장되어있다 index

html 파일과 자동차 JSON이 있습니다 그게 바로 그거야 처리되지 않은 일반 오래된 데이터 HTML 및 그 때문에 작동합니다 43 행에 우리가 자동차 JSON 파일에서 우리가 다른 폴더를 가지고있는 다른 폴더 경로가 다른 서버에 있다면 그건 또 다른 토론이야 또 다른 시간 동안 이것은 다른 서버가 아니라 우리 지식에서 우리 셋업의이 시점은 우리가 가지 않을거야

내가 가진 것에 대해서도 꽤 대처하고있다 당신이 이것을 시험해 본 것은 내가 지금까지 해왔 던 것입니다 우리가 사용해온 파이어 폭스에서 테스트 해보세요 크롬 전체가 나를로드하자 이 파일은 Chrome에서와 동일합니다 차를 타기 전에는 아무 일도 일어나지 않습니다

우리 콘솔 출력에서 ​​우리는 큰 오래된 것을 얻습니다 무서운 오류 xmlhttprequest를로드 할 수 없습니다 cara JSON 교차 출처 요청은 프로토콜 스키마에만 지원됨 에서 크롬은 매우 엄격하고 그렇지 않습니다 JSON 데이터를로드하는 것이 크롬이 우리를 안전하게 지키고 있기 때문에 좋다 이론 상으로는 우리는 아마도 JSON 파일에 바이러스가 가득 차 있거나 다른 나쁜 데이터는 크롬에 매우 있습니다 외부를 열지 않는 것에 대한 엄격한 견해 서로 다른 도메인에있는 경우 파일 기술적으로 우리는 자동차를 열려고합니다 콜론 파일 JSON from JSON Chrome 그것이 오면 우리에게 열어 줘

HTTP 콜론 슬래시 슬래시 자동차 JSON 우리는 지식을 가지고 있지 않습니다 이 시점에서 그렇게하면 이것의 수업 8 테스트 중입니다 과제는에서 테스트해야합니다 파이어 폭스 나는 사파리가 잘 작동한다고 생각한다 Internet Explorer가 잘 작동하고 아마 오페라 크롬이 아니라고 생각해

불행히도 일하게 될 더 많은 조치를 취하여 크롬을 테스트 해 보겠습니다 파이어 폭스에서 일하는 것은 파이어 폭스에서 그것을 얻으 러 가라 com 또는 주소가 무엇이든지간에 테스트를한다면 잘 작동 할 것입니다 당신의 콘솔을 보면 당신은 볼 수 있습니다 잘 형성되지 않은 메시지는 그것을 무시합니다

그건 파이어 폭스 뿐이야 우리를 방금 보호 해주는 것입니다 파이어 폭스 말로는 기술적으로 데이터 기대했던 것이 아니기를 기대했다 네가 이걸 가지고 있다고 걱정하지 마라 매회 정형 오류가 없으므로 내 데이터를로드하고 문자 나는 그 메시지를 얻을거야

그게 내가 할 일이있을거야 또 다른 한명은 닥터가 될거야 파멸시키다 파이어 폭스 일 뿐이다 우리가 생각하는 그런 종류의 데이터가 아닙니다 먹이를 주어야한다고 생각한다

그것은 아마 XML 데이터로보고있다 비록 jase와 데이터이고 그것을 변환하는 것에 대해 걱정하고 잘하지 못한다 형성되었다 이 작품 실제 환경에서 테스트에 우리를 위해 우리는 그 작은 특질을 얻지 만 걱정하지 마십시오

그것에 대해 그러나 불행히도 큰 변덕 Chrome에서 작동하지 않는다는 것입니다 그것은 갔다 Internet Explorer에서 제대로로드하려면 여긴 에지 야 어떻게 작동하는지 확인하기 만하면됩니다

여기 숯을 얻으십시오; 예 에지가 그것을로드하지 않습니다 어느 쪽이든 괜찮아 그것이 아니기 때문에 우리는 그것이 모두에게 효과가 있음을 알고있다 다른 브라우저는 문제지만 에서 데이터를로드하는 중입니다 JSON을 자주 사용하는 실제 서버 의 데이터 그래서 거기에 간다

돌아가서 이 코드를 확인해 보니별로 좋지 않습니다 코드는 그렇게 복잡하지 않습니다 그만큼 이 데이터를 작성하면 복잡해집니다 구조와이 ​​데이터 구조는 매우 용서하지 않아 그래서 당신이 읽었는지 확인하십시오

이 장에서는 JSON 완전하게 작동합니다 여기 예제를 확인하십시오 그리고 이것은 당신의 다음이 될 것입니다 숙제 내가 무엇을 만들지? 너 자신의 벌거 벗은 채 여기에 너를 보여주고있어

소유 그래서 이것은 Victor Campos가 다음에 보자