Ajax 기초 상세 설명 튜 토리 얼(1)

Ajax 가 뭐 예요?
ajax 를 연구 하기 전에 먼저 웹 2.0 이 무엇 인지 토론 합 시다.웹 2.0 이라는 단 어 를 들 었 을 때 는 먼저'웹 1.0 이 뭐 예요?'웹 1.0 에 대한 언급 은 드 물 지만 실제로는 전혀 다른 요청 과 응답 모델 을 가 진 전통 웹 을 말한다.예 를 들 어 hdu.edu.cn 사이트 에서 단 추 를 누 르 십시오.서버 에 요청 을 보 내 고 응답 을 해서 브 라 우 저 로 돌아 갑 니 다.이 요청 은 새로운 내용 과 항목 목록 이 아니 라 다른 완전한 HTML 페이지 입 니 다.따라서 웹 브 라 우 저가 새로운 HTML 페이지 로 다시 그 릴 때 반 짝 이거 나 떨 리 는 것 을 볼 수 있 습 니 다.사실 보 이 는 모든 새 페이지 를 통 해 요청 과 응답 을 뚜렷하게 볼 수 있다.
Ajax 도 전단 에 필수 적 인 기능 입 니 다.모든 언어 를 배 우려 면 이론 을 바탕 으로 하 는 대량의 실천 이 있어 야 진정 으로 배 울 수 있 습 니 다.그 전에 Ajax 를 여러 번 배 웠 습 니 다.많은 실천 이 부족 하기 때문에 항상 잊 습 니 다.그래서 실천 하지 않 는 것 은 실패 의 어머니...물론 이론 적 기초 도 중요 하 다.오늘 은 내 가 Ajax 에 대한 기본 적 인 인식 을 이야기 하 자.
정의:전 칭:Asynchronous JavaScript and XML(비동기 적 인 형식의 JavaScript 로 XML 을 조작)전송 하여 데이터 상호작용 을 하 는 것 은 데이터 로 데 이 터 를 보 내 는 것 입 니 다.
응용 프로그램:우리 가 작성 한 HTML 코드 를 생각해 보 자.우리 가 내용 을 바 꾸 고 효 과 를 보고 싶 을 때 먼저 저장 한 다음 에 브 라 우 저 에 가서 페이지 를 새로 고침 하 는 것 이 아니 냐.Ajax 는 페이지 내용 이 바 뀌 었 을 때 페이지 를 새로 고침 하지 않 으 면 변 화 를 알려 줄 수 있다.예 를 들 어 우리 가 등록 할 때 정보 작성 이 잘못 되 었 습 니 다.페이지 를 새로 고치 지 않 으 면 바로 정보 알림 을 볼 수 있 습 니 다.예 를 들 어 우리 가 QQ 를 할 때 어떤 소식 이 있 으 면 페이지 를 새로 고치 지 않 고 다른 일 을 하 는 데 영향 을 주지 않 습 니 다.이것 이 바로 Ajax 가 하 는 일 입 니 다.
다음은 구체 적 인 원 리 를 해석 하지 않 고 대체적인 실현 과정 을 살 펴 보 자.
물론 우선 코드 를 서버 아래 에 두 고 실행 하 는 것 을 알 아야 합 니 다.열 때 로 컬 주 소 를 사용 할 수 없고 localhost/를 사용 해 야 합 니 다.이런 형식 이 야 말로 서비스 하에 서 방문 한 것 이다.만약 이것 이 이해 되 지 않 는 다 면,먼저 스스로 바 이 두 를 내 려 가도 된다.
밤 수요:텍스트 1.txt 를 새로 만 듭 니 다.아무 내용 이나 입력 하 십시오.HTML 페이지 를 새로 만 듭 니 다.페이지 의 단 추 를 누 르 면 1.txt 의 내용 을 가 져 옵 니 다.

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = new XMLHttpRequest(); //  Ajax  
xhr.open('get','1.txt',true); //       
xhr.send();//    
//         
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
alert( xhr.responseText ); //    
} 
} 
}

단 추 를 누 르 면 1.txt 의 내용 이 나 오 는 것 을 발견 할 수 있 습 니 다.
이 절 차 를 구체 적 으로 해석 해 보도 록 하 겠 습 니 다.

var xhr = new XMLHttpRequest(); //  Ajax  

우 리 는 Ajax 로 데 이 터 를 얻 으 려 고 합 니 다.우선,Ajax 대상 을 만 들 려 면 시스템 시간 을 얻 으 려 면 시간 대상 을 만 드 는 것 과 같 습 니 다.대상 의 이름 은 XML HttpRequest()입 니 다.만 들 면 대상 아래 의 방법 속성 으로 데이터 상호작용 을 할 수 있 습 니 다.
설명 이 필요 한 것 은 이 대상 은 실제 호 환 문제 가 존재 합 니 다.IE6 이하 에는 이 대상 이 없 기 때문에 데 이 터 를 얻 을 수 없습니다.IE6 이하 에 서 는 실제 플러그 인 방식 을 사용 합 니 다.

ActiveXObject(‘Microsoft.XMLHTTP') 
//ActiveXObject: IE6      ，      
//Microsoft.XMLHTTP：         

그래서 우 리 는 위 에서 호환성 있 는 처 리 를 해 야 한다.

var xhr = null;
if(window.XMLHttpRequest){ // window         IE          ，  window，             ，        （              window   ，          ）
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}

이어서 보다
xhr.open('get','1.txt',true); //설정 요청 정보
오픈 방법
세 매개 변수의 의미
1.제출 방식 Form-method(get/post)
2,제출 주소 양식-action
3.비동기 여 부 는(true)
먼저 제출 방식:get/post 라 는 두 가지 차이 점 을 말 합 니 다.
여기 서 우 리 는 ajax 방식 을 사용 하지 않 고 먼저 전통 적 인 양식 을 통 해 데 이 터 를 제출 하여 분석 합 니 다.
전통 적 인 폼 제출 은 폼 에 제출 한 매개 변 수 를 설정 하고 사용자 의 정 보 를 입력 하여 제출 하면 지정 한 배경 페이지 로 이동 합 니 다.
폼 의 인자:
action:어디 에 제출 할 지 기본 값 은 현재 페이지 입 니 다.
method:제출 방식 은 기본적으로 Get 입 니 다.
enctype:제출 한 데이터 형식 입 니 다.기본 값 은 application/x-ww-form-urlencoded 입 니 다.
get 방식 으로 요청 한 밤 을 구체 적 으로 살 펴 보고 앞 뒤 가 어떻게 상호작용 하 는 지 알 아 보 자.
밤 수요:HTML 페이지,PHP 페이지 를 만 들 고 데 이 터 를 입력 하고 제출 을 클릭 한 다음 에 우리 가 입력 한 내용 을 출력 합 니 다.
HTML 페이지:

<form action="1.get.php">
<input type="text" name="username">
<input type="text" name="age">
<input type="submit" value="  " />
</form>

1.get.php(PHP 언어 를 모 르 면 아래 주석 을 보고 간단하게 무엇 을 하 는 지 알 면 됩 니 다)

<?php
header('content-type:text/html;charset="utf-8"'); //      ，      
error_reporting(0);
$username = $_GET['username'];//  get       
$age = $_GET['age'];
echo "    ：{$username}，  ：{$age}"; //    

실험 결 과 를 관찰 하고 단 추 를 누 르 면 페이지 는 1.get.phop 페이지 로 넘 어가 내용 을 출력 합 니 다.그리고 위의 주소 표시 줄 을 살 펴 보면 우리 가 입력 한 정보 가 주소 표시 줄 에 놓 여 있 는 것 을 발견 할 수 있 습 니 다.
사실 전체 GET 요청 과정 은 이 렇 습 니 다.
1.사용자 정 보 를 입력 하고 제출 을 클릭 하여 지정 한 배경 페이지 로 이동 합 니 다.
2 GET 방식 은 사용자 가 입력 한 데이터 이름과 대응 하 는 값 을 이러한 형식(username=value&age=value)으로 연결 하여 지정 한 배경 페이지 의 주소 표시 줄 에 물음표(?)뒤.
3 배경 코드 는 PHP 언어 에서$GET 방법,주소 표시 줄 에 있 는 사용자 정 보 를 가 져 옵 니 다.$GET['username']; $_GET['age'];그리고 변 수 를 부여 하고 정 보 를 출력 합 니 다.
이로부터 우 리 는 GET 방식 을 알 수 있다.
1.데이터 이름과 대응 하 는 값 을 연결(username=value&age=value)한 다음 에 데 이 터 를 지정 한 페이지 의 url 주소 에 넣 습 니까?뒤.
2.저 희 는 배경 페이지 의 주소 표시 줄 에서 사용자 정 보 를 수 동 으로 변경 할 수 있 고 해당 하 는 출력 도 달라 집 니 다.배경 코드 는 주소 표시 줄 에서 얻 은 정보 이기 때문이다.
그래서 이런 전송 방식 은 안전 하지 않 기 때문이다.
GET 방식 은 또 다른 특징 이 있다.
3 url 에 길이 제한 이 있 기 때문에 Get 요청 방식 은 데이터 양 제한 이 있 고 브 라 우 저 마다 다 르 기 때문에 이런 방식 으로 너무 긴 데 이 터 를 전달 하지 마 십시오.그렇지 않 으 면 차단 되 어 전달 데이터 가 완전 하지 않 을 것 이다.
4 문자열 형식 만 전달
POST 방식 을 살 펴 보 자.똑 같은 수요 다.
HTML 페이지:

<form action="1.get.php" method="post">
<input type="text" name="username">
<input type="text" name="age">
<input type="submit" value="  " />
</form>

1.get.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];//           ，$_POST        POST        $age = $_POST['age']; echo "    ：{$username}，  ：{$age}";

1.페이지 를 입력 하면 앞 과 같이 캡 처 되 지 않 고 출력 정보 페이지 를 볼 수 있 습 니 다.주소 표시 줄 에 사용자 정보 가 없 지만 페이지 는 사용자 정 보 를 출력 합 니 다.그럼 전달 과정 은 어디서 볼 수 있 나 요?
사실 데 이 터 를 전달 하 는 과정 에서 브 라 우 저 는 서버(백 엔 드)에 요청 헤더 에 요청 한 정보(GET 요청 에 도 머리 정보 가 있 음)를 보 냅 니 다.우 리 는 개발 자 도 구 를 열 고 네트워크 를 찾 으 면 우리 의 요청 을 볼 수 있 습 니 다.클릭 하면 구체 적 인 내용 입 니 다.위의 두 번 째 그림 을 보면 요청 정보,요청 한 인 코딩 형식 을 볼 수 있 습 니 다.요청 주소 등 도 있어 구체 적 으로 는 개인 적 으로 알 수 있다.
세 번 째 그림 을 보면 요청 한 데 이 터 를 볼 수 있 습 니 다.위 에 있 는 것 은 브 라 우 저가 특정한 형식 으로 입력 한 정보 입 니 다.아래 의 소스 코드 야 말로 실제 전달 한 정보 입 니 다.연 결 된 형식 과 GET 요청 이 같은 것 을 볼 수 있 지만 사용자 이름 을 암호 화하 여 더욱 안전 합 니 다.
이로부터 우 리 는 알 수 있다.
포스트 요청
1 데이터 의 직렬 형식 은 Get 요청 과 같 습 니 다.
2 요청 헤더 정 보 를 브 라 우 저 내부 로 전송:
또 다른 차이 점 은
3 전송 데이터 양 Post 이론 적 으로 무한
4 다양한 데이터 형식(텍스트 형식,바 이 너 리)을 전달 할 수 있 습 니 다.
그리고 백 엔 드 에서 데이터 형식 을 가 져 오 는 것 이 분명 합 니 다.$만 있 는 것 이 아 닙 니 다.GET, $_POST 하나 더 있어 요.3$REQUEST 는 모든 제출 방식 의 데 이 터 를 가 져 올 수 있 습 니 다.
우리 가 주의해 야 할 것 은 데이터 전송 방식 과 데이터 획득 방식 이 일치 해 야 성공 적 으로 얻 을 수 있다 는 것 이다.
Open 방법 에 대한 첫 번 째 매개 변수 제출 방식 은 여기까지 입 니 다.두 번 째 주 소 는 먼저 간단하게 알 고 세 번 째 매개 변 수 는 비동기 와 동기 화 에 관 한 것 입 니 다.
동기 화:코드 var a=1 과 같은 차단 모드 입 니 다.alert(a);이것 은 동기 화 입 니 다.첫 번 째 var a=1 을 실행 해 야 a 의 값 을 팝 업 할 수 있 습 니 다.
단점:보통 뒤의 코드 가 앞의 것 을 사용 해 야 할 때 동기 화 에 적합 하지만 사용 하 는 것 이 적 습 니 다.뒤의 코드 가 앞 을 기 다 려 야 하기 때문에 체험 하 는 것 이 좋 지 않 습 니 다.
비동기:바로 비 차단 모드 입 니 다.가장 뚜렷 한 예 는 바로 타이머 입 니 다.우리 가 30s 를 쓴 후에 실행 하 는 타 이 머 를 썼 을 때 30S 에서 사실은 뒤의 코드 는 30s 가 지나 야 실행 할 수 있 습 니 다.이것 은 비동기 입 니 다.
단점:뒤의 코드 가 앞 에 있 는 물건 을 사용 해 야 할 때 비동기 로 사용 하면 뒤의 코드 가 앞에서 불 러 오지 않 고 나 와 문제 가 있 을 수 있 습 니 다.다행히도 우 리 는 해결 할 수 있다.
해결:뒤의 코드 가 앞의 것 을 사용 해 야 할 때 조건 판단 으로 이 코드 의 집행 을 결정 할 수 있 습 니 다.조건 이 달성 되면 실행 할 수 있 습 니 다.
위 에 것 도 들 고 밤 도 들 고.

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //       
xhr.send();//    
//                  ，            ，       
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { //            ，     
alert( xhr.responseText ); //     
} 
}
}

위의 코드 에서 xhr.send()가 요청 을 제출 하 는 데 시간 이 필요 하기 때문에 일정 시간 제출 이 성공 한 후에 야 우리 뒤의 코드 가 내용 을 정확하게 얻 을 수 있 습 니 다.그래서 이것 이 바로 뒤의 코드 가 정확하게 실행 되 고 앞 에 의존 하 는 것 입 니 다.그러나 동기 화 를 사용 하면 우리 뒤의 코드 도 이 앞 코드 에 의존 하지 않 고 실행 할 수 없습니다.체험 하면 좋 지 않 습 니 다.그래서 우 리 는 비동기 로 선택 하고 앞의 코드 에 의존 하여 실 행 된 코드 에 대해 판단 합 니 다.
if(xhr.ready State==4)는 데이터 가 응답 하면 받 고 내용 을 팝 업 하 는 것 을 판단 하 는 것 입 니 다.(만약 에 우리 가 판단 하지 않 으 면 비동기 의 원리 에 따라 바로 튀 어 나 올 것 이다.데 이 터 를 얻 는 데 시간 이 필요 하 다.실제 데 이 터 를 얻 지 못 했 기 때문에 비어 나 올 것 이다.오해 할 까 봐 여기 서 다시 강조 하 겠 다).
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Ajax 기초 상세 한 튜 토리 얼(1)에 관 한 지식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!