좋 은 프로그래머 웹 전단 학습 코스 공유 AJAX 가 뭔 지 알 아 보기

좋 은 프로그래머 웹 전단 학습 코스 공유 AJAX 가 뭔 지 알 아 보기 먼저 서버
서버 란 무엇 입 니까? 우리 의 페이지 는 서버 에서 기원 합 니 다.실례 (phpnwo 위 에 페이지 를 저장 합 니 다),
우리 가 페이지 를 인터넷 서버 에 놓 으 면 자신의 사이트 가 생 긴 다.
1. 비동기 동기 화
생활 속 의 동기 화:
생활 속 의 비동기:
자 바스 크 립 트 언어 에서 동기 화 와 비동기 의 개념 은 정반 대 이다.
이 자 바스 크 립 트 의 동기 화 는 바로 위의 코드 를 다 실행 하지 않 으 면 아래 코드 를 실행 하지 마 세 요.한 걸음 한 걸음 실행 하 는 것 이 바로 동기 화 이다.
비동기 화 는 실행 할 수 있 는 코드 이다.
프로 세 스 개념

  ≠  

                   

      ，           ，    

       ，         

AJAX 의 중요성
많은 기업 들 이 보기에 AJAX 의 사용 숙련 도 = = 당신 의 업무 경험.
2. AJAX 란 무엇 인가
ajax 는 앞 뒤 데이터 상호작용 의 중요 한 수단 입 니 다.
Ajax 는 모두 "Asynchronous JavaScript and XML" (비동기 JavaScript 와 XML) 이 라 고 부 릅 니 다. 이것 은 JavaScript 의 단일 기술 이 아니 라 일련의 대화 형 웹 응용 과 관련 된 기술 을 이용 하여 형 성 된 결합 체 입 니 다.Ajax 를 사용 하면 새로 고침 상태 없 이 페이지 를 업데이트 하고 비동기 제출 을 실현 하여 사용자 체험 을 향상 시 킬 수 있 습 니 다.
1. Ajax 개요
Ajax 라 는 개념 은 JesseJames Garrett 가 2005 년 에 발명 한 것 이다.그 자 체 는 단일 기술 이 아니 라 일련의 기술 의 집합 이다. 주로 다음 과 같다.
1. JavaScript, 사용자 또는 다른 브 라 우 저 관련 이벤트 로 상호작용 을 캡 처 합 니 다.
2. XMLHttpRequest 대상 은 이 대상 을 통 해 다른 브 라 우 저 작업 을 중단 하지 않 고 서버 에 요청 을 보 낼 수 있 습 니 다.
3. 서버 에 있 는 파일 은 XML, HTML 또는 JSON 형식 으로 텍스트 데 이 터 를 저장 합 니 다.
4. 다른 자바 스 크 립 트 는 서버 에서 온 데이터 (예 를 들 어 PHP 가 MySQL 에서 가 져 온 데이터) 를 설명 하고 페이지 에 보 여 줍 니 다.
Ajax 는 여러 가지 특성 을 포함 하기 때문에 장점 과 부족 도 매우 뚜렷 하 다.우 세 는 주로 다음 과 같은 몇 가지 가 있다.
1. 플러그 인 지원 이 필요 하지 않 습 니 다 (일반 브 라 우 저 및 기본 값 으로 자바 스 크 립 트 를 켜 면 됩 니 다).
2. 사용자 체험 이 매우 좋다 (페이지 를 새로 고치 지 않 으 면 업데이트 가능 한 데 이 터 를 얻 을 수 있다).
3. 웹 프로그램의 성능 향상 (데 이 터 를 전달 하 는 데 필요 에 따라 긴장 을 풀 고 전체적으로 제출 하지 않 아 도 된다).
4. 서버 와 대역 폭 의 부담 을 덜 어 줍 니 다 (서버 의 일부 조작 을 클 라 이언 트 로 옮 깁 니 다).
그리고 Ajax 의 부족 은 다음 과 같은 몇 가지 가 있 습 니 다.
1. 서로 다른 버 전의 브 라 우 저 XMLHttpRequest 대상 의 지원 도가 부족 합 니 다 (예 를 들 어 IE5 이전).
2. 전진, 후퇴 기능 이 파괴 되 었 습 니 다 (Ajax 는 현재 페이지 에 영원히 있 기 때문에 앞 뒤 페이지 를 확률 하지 않 습 니 다).
3. 검색엔진 의 지지 도가 부족 합 니 다 (검색엔진 파충 류 는 JS 가 변화 시 킨 데이터 의 내용 을 이해 하지 못 하기 때 문 입 니 다).
4. 개발 디 버 깅 도구 가 부족 합 니 다 (다른 언어의 도구 모음 에 비해 JS 나 Ajax 디 버 깅 개발 이 적은 불쌍 함).
3. AJAX 의 사용
전화의 연결 순서:
1. 먼저 전화 가 있어 야 한다.
2. 전화 걸 기;
3. 말 하기;
4. 전화 반대편 의 정 보 를 듣는다.
/ / 전화 가 있 습 니 다: 요청 대상 만 들 기;
1.var AJAX=new XMLHttpRequest( );
/ / 다이얼: 요청 매개 변 수 를 설정 합 니 다.
2.AJAX.open('get','data/test.json',true);
첫 번 째 인자: POST | GET
POST 와 GET 의 차이
POST 는 데 이 터 를 보 내 고 GET 는 데 이 터 를 받 습 니 다.
PSOT 는 데 이 터 를 보 내 는 안전성 이 좋 은 반면 GET 는 좋 지 않다.
POST 송신 데 이 터 는 크기 를 제한 하지 않 고 GET 크기 는 2 ~ 100 k 제한 된다.
GET 와 POST 를 언제 사용 합 니까? 데 이 터 를 가 져 올 때 GET 방식 을 사용 하고 데 이 터 를 조작 할 때 POST 방식 을 사용 해 야 합 니 다.
세 번 째 인자: 이 boolean 값 이 true 일 때 서버 요청 은 비동기 로 진 행 됩 니 다. 즉, 스 크 립 트 가 send () 방법 을 실행 한 후에 기다 리 지 않 습 니 다.
서버 의 실행 결과 가 아니 라 스 크 립 트 코드 를 계속 실행 합 니 다.
이 boolean 값 이 false 일 때 서버 요청 은 동기 화 됩 니 다. 즉, 스 크 립 트 가 send () 방법 을 실행 한 후에 기다 리 는 것 입 니 다.
서버 의 실행 결 과 를 되 돌려 줍 니 다. 대기 중 시간 이 초과 되면 기다 리 지 않 고 뒤의 스 크 립 트 코드 를 계속 실행 합 니 다!

ajax.onreadystatechange = function() {

if (ajax.readyState == 4 && ajax.status == 200)

{

    func_succ(ajax.responseText);

}

else

{

    //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);

}

};

4.ajax.send(null);
ajax.readyStatus
0 - (초기 화 되 지 않 음) send () 방법 이 호출 되 지 않 았 습 니 다.
1 - (불 러 오기) send () 방법 을 호출 하여 요청 을 보 내 고 있 습 니 다.
2 - (불 러 오기 완료) send () 방법 이 실행 되 었 고 모든 응답 내용 을 받 았 습 니 다.
3 - (대화) 응답 내용 분석 중
4 - (완료) 응답 내용 분석 이 완료 되 었 습 니 다. 클 라 이언 트 에서 호출 할 수 있 습 니 다.