[음악 재생]
>> DOUG 로이드 : 그래서 한 번 더 개념의 종류 그
종류의 우산에 해당 자바 스크립트가 AJAX라는 무언가이다.
이 시점까지 우리를 자바 스크립트와 상호 작용
밀어 제한되어있다 버튼을 일이 발생합니다.
구체적으로는, 일이 뭔가
우리의 웹 사이트의 모양과 변화를 느낄 수있다.
권리?
특히처럼,의 문서 객체 모델 비디오,
I는 배경색을 변경.
나는 것을했을 때, 나는하지 않았다 특별한 추가 요청을 할 수 있습니다.
나는 것을 요구하지 않았다 서버는 나에게 새로운 페이지를 보냅니다.
난 그냥 내가 이미 있던 무슨이 변경되었습니다.
나는 나의 페이지를 새로 고침 할 필요가 없었다 사물이 확실히 변경
그래서 좋아요.
그러나 분명히 거기에 몇 가지 수동 사용자 상호 작용이있었습니다.
AJAX는 할 수있는 멋진 기술이다 우리는 페이지의 내용을 업데이트하려면
뿐 아니라 모양과 다시로드하지 않고, 생각합니다.
>> 그리고 때 구체적으로 내가 페이지의 콘텐츠를 업데이트하는 말,
나는 우리가 다시 말하는 게 아니에요 자바 스크립트를 사용하여 페이지.
나는 우리가 실제로 요청 말인지 서버에서 더 많은 정보
우리의 페이지를 다시로드하지 않고.
>> 약간의 지금 그런 종류의 고급 기술
우리가 이야기하는 거라고 이 비디오에 대한.
우리는 어떤 상호 작용을 할 겁니다.
우리가 할 때, 나는 될거야 웹 서버에 요청을하고.
이 경우, 단지 무엇이다 내 아파치 웹 서버를 실행.
나는 추가로 만드는거야 요청이 나는, 웹 페이지를 방문하고있어 동안
하지만 내 페이지가 새로 고쳐지지 않습니다.
>> 그냥 것 비동기 내 페이지를 업데이트합니다.
그리고 그것은 사실이다 AJAX가 약자하는,
비동기 자바 스크립트와 XML입니다.
XML은 마크 업의 또 다른 종류의 언어, 그리고 당신의 정렬 할 수 있습니다
단지 HTML처럼 생각합니다.
그것은 아주 똑같은 아니지만 그것은 기본적으로 단지 마크 업 언어이다.
그래서 비동기입니다 자바 스크립트와 마크 업 언어.
>> 그래서 이것을 사용하기 위해서는 AJAX technique-- AJAX
별도의 프로그래밍 언어가 아닙니다.
그것은 단지 일종의 techniques-- 우리의 세트
특별한을 작성해야 자바 스크립트 객체, 어떤
XMLHttpRequest를 호출된다.
자,이 작업을 수행하는 것은 매우 쉽습니다.
우리는 말을 VAR, 어떤 우리는이 객체를 호출 할,
새로운 XMLHttpRequest를 동일합니다.
그리고 지금 우리는 지금 얻은 개체의 AJAX 정렬,
또는 XMLHttpRequest의 수 개체,
우리는 비동기 적으로 우리의 페이지를 업데이트합니다.
>> 우리는이 새를받은 후 목적이 XMLHttpRequest를,
우리가 뭔가를해야 그 을 onreadystatechange 행동.
을 onreadystatechange 문제는 정말입니다
당신은 요청을 할 때 웹 페이지, 페이지
다수의 단계를 통해 진행한다.
첫째, 요청이 전송되지 않았습니다.
이어서, 요청은왔다 보냈지 만 작용하지.
그런 요청이 작용하고있다.
그 요청은 당신에게 다시 전송된다.
>> 이어서, 요청은 완전히 페이지에로드.
사람들은 서로 다른 상태입니다.
그래서 우리는 우리를 설정해야합니다 새로운 XMLHttpRequest 객체
때 준비 상태 변경을 변경합니다.
그리고 일반적으로, 우리는이 작업을 수행 익명 함수를 정의하는
우리는에서 익숙 현재 자바 스크립트, 그
때 준비 상태 변화라고합니다.
그것은보다 정말로 더 많은입니다.
우리는 정의 될거야 익명의 기능, 종류의 무엇을 좋아
우리의 일을했다 자바 스크립트, 우리는 것
익명의 기능이 클릭에 응답,
또는 우리의지도를하던 때 배열의 다양한 객체.
>> 뭔가했을 때 뭔가를 클릭했다.
이 경우, 뭔가가있어 일어나는 때 우리의 페이지의 상태
변경.
두 개의 다른 특성이있다 종류의 동행입니다 그들은 아니에요되는
있는 유일한 특성 XMLHttpRequest의 고유,
하지만 그들은 꽤 중요한 사람이야.
readyState의라​​는 뭔가가있다, 이는 당신이 아마 추측 할 수로서,
을 onreadystatechange 관련이있다.
그것은 사실을 알려줍니다 readyState의는 무엇인지.
0, 1, 2, 3, 4는 거기 가능성,
그들은 종류의 약 에 해당하는 것을
난 그냥 두 번째 전에 대해 얘기했다.
>> 다음 상태, 어떤 잘하면 모든 것이 확인을 가면,
단, 이는 200 대한, 물론, 확인,
우리는 HTTP를에서 잘 알고있다.
그래서 우리는 바라고 우리의 준비 상태 네, 그리고 우리의 상태는 200입니다.
그리고 우리의 준비 상태 경우 넷, 응답이다
에 넣어 될 준비가 페이지 및 상태 (200),
우리가 할 수 있었다 모든 것을 성공적으로,
지금 우리는 비동기 수 우리의 페이지를 업데이트
다시로드 할 필요없이 그것의 전체 내용.
>> 우리는 무슨 일 정의한 후 을 onreadystatechange 행동에,
우리는 것을 확인했습니다 readyState의 4이며, 상태는 200
우리가해야 할 모든입니다 비동기을 열어
요청 만하고있다 HTTP는 일반적으로 요청을 GET.
그냥 프로그래밍을하고, 대신 웹 브라우저를 통해의.
그리고 우리는 그 요청을 보냅니다.
그래서 어쩌면이 작업을 수행 맥락에서처럼?
그래서 여기에 함수의 그 AJAX 요청을 다룬다.
그래?
그리고 임의로 말한 이 인수를 사용할 수 있습니다.
그리고이 일종의 여기에 일반적으로 골격입니다.
처음에, 우리는 얻을 자신의 새로운 XMLHttpRequest 객체.
다음, 나는를 설정해야 을 onreadystatechange 행동.
그래서 내가 말할거야 때 readyState가 변경,
나는 당신이이 함수를 호출 할 수 있습니다.
>> 물어 것입니다 어떤 질문 readyState의 경우
readyState의가 변경된 경우, 4 4, 그리고 상태 (200)이라고 할 수,
그래서 우리는 내가 성공적으로 요청을했다 페이지에 뭔가를 할 수 있습니다.
그리고 우리는 살펴 보겠습니다 의 예에서 무엇을
뭔가 두 번째에있을 수 있습니다.
그럼, 지금은 정의 내 익명 함수,
내 응답 기능 때마다 readyState가 변경됩니다.
>> 그럼 난 그냥를 열 필요 열기 방법을 사용하여 요청합니다.
그리고, 그 요청을 보냅니다.
그리고 이제 살펴 보자 좀 더 구체적인 예
무엇 AJAX는 웹 페이지에서 할 수 있습니다.
그래서 나는 여기에 아주 간단한이 페이지는 home.html을했다.
그리고이 정보가 간다있어 여기 드​​롭 다운 메뉴의 일종.
>> 그리고 우리는 1 초에이를 다시 방문 할 것이다.
하지만 우리가 지금을해야한다고 생각 실제 소스 코드를 살펴 보자.
그래서, 나는 home.html을 열어거야.
그리고 우리는 무슨 일이 일어나고 있는지 볼 수 있습니다.
여기에 매우 상단까지 그래서, 난이 무슨 일 일부 자바 스크립트 물건.
>> 그리고 여기, 내가 분명히해야 ID가 infodiv이다 사업부,
일부 정보 거기에 갈 것입니다.
그리고 나는이 양식을 가지고있다.
그리고이 내부 형태, 내가 뭔가를
선택,라고하는 그냥 드롭 다운 메뉴입니다
다른 옵션의 무리와 함께.
그리고 그 때 변경 분명히 할 때 선택된 옵션이있다
변경, 내가 전화하려고 해요 일부 기능 cs50Info,
그리고, 나는 갈거야 this.value 전달,
여기서이가 참조 어떤 옵션을 선택하고,
과 가치, 여기에 옵션이 중 하나입니다 값 = 동일 빈, "blumberg"
"보우 덴", "짱"및 "마란."
>> 그래서 실제로 수도 나는이 작업을 수행 할 때 여기에 일이?
음, 보자 blumberg.html 봐.
그것은 단지처럼 보이는 일부 HTML의 조각.
그리고 사실, 내가 무엇을 바라고 있어요 여기에 무슨 일이 일어날
나는 플러그 할 수있을거야됩니다 내 웹 페이지에 직접이 HTML
다시로드 할 필요없이 페이지, 이러한 때
나는 드롭 다운에서 한나를 선택 메뉴, 한나에 대한 정보,
특히,이 정보에서 여기 blumberg.html에,
페이지에 나타납니다 것입니다.
그리고 새로 고침 할 필요가 없습니다.
그리고, 다른 사람을 선택한 경우 자신의 정보가 표시됩니다.
이걸 어떻게해야합니까?
다시, 이것은 필요 우리는 몇 가지 AJAX를 사용합니다.
그래서, 우리는 ajax.js.을 열 수 있습니다
그리고 여기, cs50Info 그 기능입니다.
이름이 아무것도없는 경우, 나는 돌아갑니다.
나는 경우 아무것도하지 않을거야 빈 옵션이 선택되었다.
그렇지 않으면, 내가 갈거야 새로운 XMLHttpRequest 객체를 생성합니다.
그리고 나는, 때 말할거야 readyState의 변화는,이 함수를 호출합니다.
>> 그리고 readyState의 인 경우 (4) 상태 (200),
여기에 조금의 라인 (13)에 jQuery를의.
그러나 내가 말하는하고있어 모든, infodiv의 내용을 변경
내가으로 돌아 왔을 무엇이든 할 수 내 HttpRequest에의 응답.
>> 내 HttpRequest에 무엇입니까?
음, 맞아 여기에 라인 18, 19에.
라인 18, 나는 기본적으로 준비 해요 이름 + .HTML에 대한 요청을 GET.
그리고 다시, 이름은 여기 이었다 인수
cs50Info에 매개 변수로 전달.
>> 그러니까 기본적으로, 나는 누군가를 전달하고있다 옵션이 설정되어있는 이름
우리는에서 본 것을 드롭 다운 메뉴 형태로.
나는 그 이름을 얻고있다.
그리고 내가 당신을 좋아하는 것 말인지 나를 위해 그 file.html과 구하십시오,
다음 해당 요청을 보냅니다.
>> 그리고 그을 onreadystatechange는 것입니다 듣고 기다리고 기다리고 될
와 readyState가 될 때까지 대기 (4)이고, 상태 (200)이다.
그래서, 제공 될 준비 그리고 요청이 성공했습니다.
이 경우 그리고, 그것은 것 infodiv의 내용을 변경
내가 돌아 왔을 응답 텍스트합니다.
>> 그럼 방법이를 보자 실제로 작동 할 수 있습니다.
그래서 우리는 브라우저로 향할 것이다 창, 우리는 여기에서 볼 수 있습니다.
그럼 살펴 보자 무엇 AJAX 여기에 것입니다.
그래서 우리는 누군가를 선택합니다 드롭 다운 메뉴에서.
이 경우에 그래서,하자 바로 한나를 선택합니다.
그리고는 예고하는 한나의 정보가 변경되었습니다,
하지만 난 떠 봐 아무 것도 없었다 내 페이지는 완전히 다시로드하지 않았다.
물건 머물렀다.
물건의 대부분은 머물렀다.
AJAX 시험은 변경되지 않았다.
버튼 자체,이 드롭 다운 메뉴를 변경하지 않았다.
그러나 정보가 변화했다.
그리고 방법에 따라 빨리 내 컴퓨터로 이동,
당신은 실제로 콘텐츠를 볼 수 있습니다 사라하고 정말 다시 나타납니다
빨리.
즉되는 내용입니다 infodiv에서 삭제,
다음으로 대체 새로운 비동기 요청.
>> 내가 말할 수로 전환한다면, Rob-- 다시는 봐,
어쩌면 우리는 실제로 그것을 볼 수 있습니다 사라 빠르게 다시.
당신은 그 보여?
어떻게 그냥 멀리 튀어 다음은 리필?
즉, AJAX 요청의 일어나고의 종류.
그리고에 따라 사람 내가있어 선택
다른 비동기을 다른 파일에 대한 요청
내 서버에 있는지.
그리고 내용 제 infodiv는 업데이트,
내가 선택한이 어떤 기준으로합니다.
그래서 정말 모든 AJAX에 존재합니다.
그것은 우리가 이러한 비동기를 만들 수 있습니다 요청 페이지에 업데이트됩니다.
않고도 전체 페이지를 새로 고침,
우리는 새로운받을거야 함으로써 그것의 내용
서버에 새로운 신선한 요청.
그리고, 우리의 페이지가 될 수 있습니다 아주 조금 더 역동적.
>> 그리고 우리는 더 얻을로 더 고급, 당신을
같은 것들을 얻을 수 있습니다 말하자면, 이메일받은 편지함,
여기서 당신은 아무것도 할 필요가 없습니다.
당신은을 클릭 할 필요가 없습니다 메뉴 드롭 다운 또는 아무것도 클릭
그리고 갑자기, 당신의 새로운 이메일은 상단에 표시됩니다.
그것도 그냥 Ajax 요청입니다.
아약스 요청하여 서버, 이메일 서버,
모든 정보를 통해 보내 최신 전자 우편에 대한,
당신이에 표시되는 내용 변경 화면은 전자 우편의 당신의 새로운 설정해야합니다.
그리고 당신은 새로운 하나가있는 경우 그 DIV의가, 다음 내용
반영하기 위해 변경됩니다 업데이트 된 내용.
나는 더그 로이드입니다.
이 CS50입니다.