Ajax desde Cero

이 비디오에서는 Ajax를 처음부터 사용하는 방법을 살펴 보겠습니다 먼저 Ajax라는 용어의 의미가 무엇인지 알아야합니다

약어 (스페인어) : Javascript asynchronous and XML 우리가 보아온 노 트로, 애플리케이션 관리 클라이언트와 서버를 기반으로합니다 아시다시피, 클라이언트 측에서는 사용자가 연결되는 브라우저가 있습니다 그리고 서버에서, 우리는 숙박 시설을 제공하는 서버 이런 식으로 양측의 기술이 있습니다

사용자가 페이지에 연결할 때 가장 먼저로드되는 것은 html입니다 함께 (논리적으로) 그들은 스타일을로드하고 있습니다 또한 존재할 수있는 일부 애니메이션 (CSS로 작성) 일부 이벤트는 자바 스크립트에서 수행됩니다 마찬가지로 우리는 데이터베이스와 통신 할 수있는 기술이 있습니다 그것이 우리 페이지의 정보가 저장되는 곳입니다

여기서 우리는 많은 기술을 발견합니다 이러한 기술 중에는 PHP가 있습니다 더 많은 서버 측 기술이 있지만 지금은 여기서 설명 할 것입니다 Ajax 작동 방식을 설명하는 데 초점을 맞추자 일반적으로 아약스없이, 내가 원한다면 사용자 등록 페이지를 만들면 호출 할 수있는 페이지가 있습니다

registryhtml 어디서 등록 할 것인가? 그 registryhtml 안에는 버튼으로 등록 할 양식이 있습니다 그리고 그 안에 정확히 양식 PHP 스크립트와 관련있다 예를 들어 save

php라고 부를 수 있습니다 여기에 PHP 스크립트가 있습니다 즉, 기억할 것처럼 <form> 태그 html에는 action이라는 속성이 있습니다 어떤 페이지가 작동하도록 정의되어 있는지를 나타냅니다 어느쪽에 데이터를 보낼지

HTML 양식은 데이터를 PHP 페이지로 보냅니다 예를 들어, POST 또는 GET (http 요청)에 의한 매개 변수 전송을 사용합니다 savephp에 도착하면이 방법으로 이 PHP 페이지에는 다음과 같은 HTML 코드가 포함될 수 있습니다 등록이 정확했거나 레지스트리에 문제가 있음을 알리는 메시지

등록 양식으로 돌아 가려는 경우 그러면이 링크를 다시 입력해야합니다 보시다시피 두 페이지가 분리되어 있습니다 그것은 페이지의 새로 고침을 의미합니다 메시지를 보내고 싶다면, 이 메시지는 PHP에서 완전히 격리 된 HTML 페이지입니다 그렇다면 HTML 페이지가 있어야합니다

예를 들어 register-correcthtml 이 방법으로 우리는 스크립트와 PHP 스크립트에서 작동하는 양식을가집니다 우리는이 메시지쪽으로 우리를 방향 전환시키는 지시를 할 것입니다 이 방법은 우리가 HTML과 PHP를 혼합하지 않습니다, 하지만 우리는 3 페이지를 가지고 있습니다 그리고 여기에서 왔지만 그것은 리디렉션 즉시, 추가 요금이 부과됩니다

이는 Ajax를 사용하여 피할 수있는 것입니다 Ajax를 사용하면 버튼을 클릭하여 전화를 걸 수있는 등록 양식을 포함시킬 수 있습니다 이 페이지 이 페이지는 응답 할 것이고, 그러나 우리는 그것에 가서 실행될 내용을 보여줄 필요가 없습니다 하지만 백그라운드에서 실행됩니다 그렇게하면 우리는 그 대답을 얻습니다 이것은 우리를 돌려주고, 그것은 만족스러운 대답이다

다음 동일한 registryhtml 내에서 양식을 숨기고 성공 메시지를 표시 할 수 있습니다 오류가 발생한 경우 Google은 양식을 숨기지 않으며 단순히 오류 메시지 만 표시합니다 그리고이 PHP 스크립트는 호출되지만 직접은 아니지만 비동기 적으로 호출됩니다 그래서 비동기 자바 스크립트와 XML을 사용합니다

XML 왜냐하면 보통, 우리가 물건을 실행할 때 서버 측에서 여러 번 답변을 우리에게 돌려 준다 xml과 같은 형식의 데이터 JSON 형식과 다른 형식도 있고 다른 형식도 있습니다 이것들이 가장 잘 알려져있다 그런 다음 첫 페이지를 만들어서 시작하겠습니다 나는 그것을 함께 저장할거야

ajaxhtml의 이름 Sublime Text를 사용하고 Emmett 플러그인도 설치되어 있습니다 나는 html, 2 점 5 점을 쓰고 탭을 눌러 기본 윤곽선을 만들 수있다 스타일 시트와 자바 스크립트 파일을 포함 할 수 있습니다 우리 홈 페이지에 별도의 파일에 있습니다

하지만이 경우 간단한 예제이기 때문에 헤더의 자바 스크립트; 즉, 자바 스크립트 온라인입니다 우리가 알아야 할 것 이 첫 번째 예제는 Ajax를 사용할 수있는 클래스의 이름이고, 이 클래스는 XMLHttpRequest이며 PHP 페이지에 요청할 수 있습니다 GET 메서드를 사용하고 POST 메서드를 사용하지만 이 클래스는 최신 브라우저와 호환되지만 오래된 브라우저가 포함됩니다 그들은 아마 다른 것을 계속 사용한다 ActiveXObject라는 오래된 클래스입니다

인스턴스화하는 방법은 다음과 같습니다 그래서 우리는이 객체들을 사용할 것입니다 http 요청을 처리하는 두 개의 클래스 예를 들어, 우리는 어떻게 알 수 있습니까? 그 다음 어느 것을 사용할 것인가? 이를 위해 우리는 창문쪽으로 그 질문을해야만한다 브라우저의 어떻게해야합니까? 우리는 window

XmlHttpRequest 이 경우, 이것은 이 클래스를 사용하는 것이 유효하기 때문에 우리의 변수는 http 요청이이 객체를 수신합니다 그렇지 않으면 다른 개체를 받게됩니다 순서를 유지하기 위해 우리는이 라인들을 다음과 같은 함수로 묶을 것이다 XML Http 요청 초기화 이 방법으로,이 모든 것은 그 기능을 수행 할 것입니다 그러면 HTTP 요청 변수에 적절한 객체를 할당합니다

따라서 우리는 해당 변수 인 http 요청을 이 경우 전역 변수 앞에서 말했듯이이 객체를 초기화합니다 하지만 아직 사용하지 않았습니다 이를 위해 우리는 하나의 함수를 더 만들 것입니다 전화 요청

객체가 실제로 사용될 위치 우리가 이전에 만든 요청을 수행하는이 함수는 실제로 세 개가 필요합니다 매개 변수 우리가로드 할 페이지의 URL을 나타내야합니다 정보가 GET 또는 POST 인 경우에 사용될 메소드 정보 마지막으로 응답 함수 즉, 일단 우리가이 URL로부터 우리가 행동해야만하는 특정한 방법으로 데이터는 예를 들어 우리가 페이지를 열고 다른 콘텐츠를 표시하면 또한 기능하다 그 세 가지 데이터를 가지고 있다면 우리는 그 데이터를 사용하고 http 요청 개체를 사용하여 http 요청을 작성합니다 그리고 이것은 여러분이 할 때 무엇이 ​​부름을 받게 될지 알려줍니다 국가에 변화가있을 때 준비 상태로 바뀌었을 때

이 방법으로해야 할 기능 준비 상태로 전환 할 때 실행되는 함수는 우리가 매개 변수로받는 함수와 우리는 또한 이 객체는 open을 호출하여 요청을 할 수있게합니다 요청을 열기 및 보내기 모두 사용하려면 그래서 여기에 나는 코멘트 할 것이다 그리고 여기 : 함수 정의하기 행동하는 법 그런 다음 열려면 우리는 어떤 방법이 사용될 것인가? 어떤 페이지에 관하여 우리의 경우에 비동기 요청이되어야한다면 메소드가 호출된다 방법으로 우리는 인수로 그것을받습니다 당신이 달릴 페이지 요청은 우리가 매개 변수로받는 URL입니다

및 제 3 파라미터 부울 값은 TRUE 또는 FALSE 일 수 있습니다 우리의 경우와 대다수의 경우 아약스 케이스 중 비동기 요청을하는 데 사용됩니다 동기 요청 인 경우 true, 그렇지 않으면 우리 페이지 서버 응답이 대기하는 동안 작동을 멈 춥니 다 다른 페이지의 내용을 알면서도 그것은 피하기 위해 말한 것입니다 즉 요청을 만드는 데 관심이 있기 때문에 비동기식으로 처리합니다

배경 마지막으로 send를 사용하고 null 매개 변수로 전달합니다 이것에 대해서는 나중에 POST와 GET 메서드에 대해 자세히 설명합니다 정보가로드 될 페이지에 매개 변수를 전달하십시오 차이점은 우리가 통과 한 값을 보도록하겠습니다 URL에서 POST가 허용하지 않았지만이 경우에는 그대로 ajax에서 hello world를 수행하는 첫 번째 예제는 값을 전달하지 않고 GET 매개 변수를 사용하지만 간단히 대답을 얻습니다

어떤 파일이라도 우리는 평범한 텍스트 파일을 가지게 될 것입니다 우리가하려고하는 메시지를 저장할 filetxt로 저장합니다 해당 파일에 액세스하여 귀하의 콘텐츠를 가져오고 우리의 예제 인 ajaxhtml을 호출해야합니다

요청을하지만, 여기서부터 관찰 할 때 선언되었지만 아무 것도 호출되지 않았다면, 우리는 첫 번째 호출을 할 것이다 이를 위해 우리는 perform 함수를 호출해야한다 요청하고 url filetxt에 전달하면 우리가 사용할 메서드는 GET입니다 그리고 그 기능 은요? 함수라고 불리는 함수를 만들어 봅시다

한번 액티브하게 될 기능이 될 액추에이터 서버의 응답을로드했지만이 모든 것을 주문했습니다 ready에 호출 된 window 객체의 메소드를 사용 해보자 브라우저 창이로드 될 때 활성화되는 이벤트입니다 완전히 그렇다면 페이지가로드 될 때 완전히 말할 것입니다 파일을 다운로드하자

그런 다음 파일 다운로드 기능을 정의해야합니다 무엇이 파일을 다운로드하고 있었습니까? 그것은 단순히 수행 할 호출 이었기 때문에 요청을 따르고 우리가 관찰 한대로 모든 것을 지키기위한 함수를 만들었습니다 이 명령했다; 의 이름을 쓰는 것 사이에 중요한 차이가 있습니다 괄호가없는 함수와 괄호로 함수의 이름을 쓴다 괄호없이 함수를 작성할 때 우리는 모든 마치 어떤 이벤트 (가장 일반적인 이벤트)를 향한 1 객체 인 것처럼 기능합니다

예를 들어, 창이 준비되면 파일을 다운로드하도록 호출됩니다 우리는 다운로드 파일을 호출하는 말, 우리는 말하지 않습니다 이 순간에 호출되지만 윈도우가 준비되면 위와 같은 방식으로 우리는리스트가 준비되었을 때 우리가 말한 http 요청이 데이터가 캡처 된 것으로 확인되면 이 경우에 표시된 함수가 액추에이터 함수에 호출되도록 여기에서는 연기 함수를 호출하지 않지만이 문제가 발생할 때 호출되어야하는 것을 정의하고 있습니다 우리는 마침내 그것을 정의 할 것입니다 연기 기능; 무슨 일이 일어나야하니? 일단 데이터가로드되면 이 이벤트의 이름을주의 깊게 읽으면 onReadyStateChange가 표시됩니다 이는 readyState에서 변경이 발생했을 때 즉, 실제로 준비 상태가 바뀌는 이유는 HTTP 요청에 객체로 readyState라는 속성이 있습니다

이 기능은 변경이있을 때 활성화됩니다 액추에이터 기능이 호출된다는 사실은 이미 데이터를 올바르게 수신 했음에도 불구하고 이것이 활성화 될 것입니다 거푸집이 적재되지 않더라도 불리한 상태에 변화가 있습니다 이것은 이것이 존재하지 않는다는 사실 때문에 이것이 허가를주지 않는다는 사실 때문에 충분하게 그가 아직도 연결하고있는 것처럼 다른 이유는 우리가 여기에서 우리는 이러한 속성이 4와 200의 가치가 있는지 확인해야합니다 각각 http 요청 객체 내에 있습니다

즉 if 이 값은 4와 같습니다이 값이 200이면, 그냥 그럴 경우 뭔가해라 즉, 액추에이터 기능이 호출된다 데이터가 올바르게로드되었다는 것을 의미하지는 않습니다 데이터가 올바르게 가져 왔지만이 때 활성화됩니다

readyState readyState 속성을 여기 관찰 된대로 변경하면 속성 값은 1에서 2에서 3으로 변경 될 수 있습니다 다른 어떤 가치든지에 우리는 모두가다는 것을 확실하다 값이 4로 바뀌면 상태가 200 일 때도 바르게됩니다 다음 비디오는 그 의미를보다 자세히 설명합니다 이 속성들은 이제 우리가 값 4와 200이 올바른 설정입니다 우리는 또한 여기에 변화가있을 때 이것을 호출 할 것임을 알아야합니다

그 속성 (반드시 유리한 변화는 아님), 일단 도착하면 그 두 조건을 충족시키기 위해, 이제 우리는 여기서 무엇인가 할 수 있습니다 예를 들면 우리는 무엇을 할 수 있습니까? 문서에 무언가를 쓰도록 명령하십시오 (documentwrite) 그리고 문서는 무엇을 쓸 것인가? 여기에서 <body>에 나오는 것은 무엇입니까? 글쎄, 서버의 응답, 그리고 그게 무엇입니까? 우리는 다시 사용자가되어야합니다 요청 객체와 대답을 전달하는 것은 기본적으로 responseText라는 속성이 있으며이 페이지를 실행하려고합니다

결과는 콘텐츠가 여기에 몸에 표시되고 있어야합니다 Filetxt 하지만 실행하기 전에 모든 것을 대략 살펴 보겠습니다 먼저 시작 함수가있는 http 요청 변수가 있습니다 우리가 필요로하는 클래스의 이름 인 Xml Http Request의 XHR 초기화 여기서 우리는 어떤 수업을 사용해야하는지 결정할 수있는 질문을합니다

가장 현대적인 브라우저 또는 오래된 브라우저에서 지원하는 브라우저 이것이 필요한 경우이 초기화가 허용됩니다 우리는 URL을받는 일반 함수를 가지고 있습니다 요청이 이루어질 것입니다 사용할 방법과 사용할 함수입니다 변경 사항이 표시되면 실행합니다

응답을 관찰하기 시작합니다 서버에 의해 우리는 그 함수를 다음과 같이 정의한다 함수는 open 및 send 메소드를 사용하여이 이벤트에 의해 호출되어야합니다 이 매개 변수를 결정하면이 모든 것이 캡슐화 된 것을 볼 수 있습니다 우리가 그것을 쉽게 사용할 수있게 해주는 또 다른 기능, 우리는 다운로드 파일을 가지고있다

윈도우가로드 될 때 호출 될 것이고 그것은 무엇을 할 것인가이다 filetxt에 GET 메서드를 사용하여 요청할 때 및 응답 할 때 이 파일에서 데이터가 거기에서로드되면 우리는 데이터를로드하는 상태가 올바른지 확인하고 문서에 기록합니다 응답,이 파일에서로드 된 응답 텍스트 하지만이 초기화 함수는 호출되지 않습니다 왜? 당신이 다운로드 파일을 호출하기 때문에; 파일 다운로드 다운로드 요청을 한 다음 요청을 한 다음 요청을하십시오

작동하는 액추에이터의 호출을 정의하지만 HTTP 요청을 향한 가치가 부여 된 시간이 없었습니다 이것은 함수입니다 있다 함수는 선언되었지만 호출되지 않았습니다 그러므로 우리는 이것을 복사하면 주문을 다운로드 할 때 여기에 쓸 것입니다 먼저 객체를 초기화하고 나서 우리는 객체를 초기화 할 것입니다

마지막으로 두 가지 오류를 요청합니다 예를 들어, 구문의 오류는 onReady로 작성되었습니다 창을로드 할 때 실제로 올바른 용어는 onLoad입니다 나는 준비가되어 있었고 내가 한 두 번째 실수는 여기에 HTTP 요청의 onReadyStateChange 속성이 존재할 때 모든 것은 소문자로 작성해야합니다 그렇지 않으면 작동하지 않습니다

이제 우리는 텍스트와 함께 txt 파일을 갖게되었습니다 해당 파일은 ajaxhtml에서로드됩니다 이 경우에는 그것이 작동하고 있다는 메시지가 표시됩니다

내가 여기서 만든 마지막 변화 액추에이터 기능이 한 번만 호출되지 않는다는 것을 보여줍니다 상태가 올바른 경우에는 각 상태 변경에서 호출됩니다 일단 올바른 것이면 그 사건은 문서에 쓰여질 것입니다 우리가받은 답변은 비디오에서 더 자세하게 볼 수 있습니다 다음과 같이, 더 실제적인 연습을 보게 될 것입니다

아약스 사용의 진정한 유용성을 보여줍니다 제 경우에는 로컬 서버가 없으면이 기능이 작동하지 않습니다 wampserver