Ajax 기술

Ajax 기술 특징
1. Ajax 의 장점 (1) 은 서버 가 부담 하 는 작업 에서 클 라 이언 트 로 이전 하고 클 라 이언 트 의 유 휴 자원 을 이용 하여 처리 하 며 서버 와 대역 폭 의 부담 을 줄 이 고 시간 비용 을 절약 합 니 다.(2) 페이지 새로 고침 없 이 (3) XML 등 외부 데 이 터 를 호출 하여 페이지 디 스 플레이 와 데이터 의 분 리 를 더욱 촉진 할 수 있 습 니 다 (4) 표준화 되 고 광범 위 하 게 지원 되 는 기술 을 바탕 으로 플러그 인 이나 애플 릿 을 다운로드 하지 않 아 도 데스크 톱 프로그램의 결 과 를 쉽게 실현 할 수 있 습 니 다.(5) 아 약 스 는 플랫폼 제한 이 없다.Ajax 는 서버 의 역할 을 원래 전송 내용 에서 전송 데이터 로 바 꾸 고 데이터 형식 은 일반 텍스트 형식 과 XML 형식 으로 바 꿀 수 있 으 며 이 두 가지 형식 은 플랫폼 제한 이 없습니다.2. Ajax 의 단점 (1) 대량의 JavaScript 로 유지 하기 어렵 습 니 다 (2) 시각 화 디자인 에 어려움 이 있 습 니 다 (3) '페이지' 의 개념 을 깨 뜨리 는 것 (4) 은 검색엔진 에 어려움 을 가 져 옵 니 다.
Ajax 가 사용 하 는 기술
(1) XML HttpRequest 대상 (가장 핵심 기술) 은 응용 프로그램 인터페이스 가 있 는 자바 스 크 립 트 대상 으로 하이퍼텍스트 전송 프로 토 콜 (HTTP) 을 사용 하여 서버 에 연결 할 수 있 습 니 다.(2) XML 은 XML 문 에서 원소 의 텍스트 에 표기 부호 가 포함 되 어 있 으 면 CDATA 단 을 사용 하여 원소 의 텍스트 를 묶 을 수 있 으 며, CDATA 단 을 사용 하여 묶 은 내용 은 XML 해석 기 에 의 해 일반 텍스트 로 간주 되 기 때문에 어떠한 기호 도 표기 부호 로 간주 되 지 않 는 다.CDATA 의 문법 형식 은 다음 과 같 습 니 다.

CDATA 섹 션 은 CDATA 섹 션 에 CDATA 섹 션 을 더 이상 포함 할 수 없습니다.또한 문자열 '] >' 사이 에 빈 칸 이나 줄 바 꿈 이 있어 서 는 안 됩 니 다.XML 문서 에 루트 요소 가 있어 야 합 니 다. 모든 다른 요 소 는 루트 요소 에 삽입 해 야 합 니 다.XML 요소 형식의 이름 구분 대소 문자
（3）JavaScript （4）CSS （5）DOM
Ajax 가 주의해 야 할 몇 가지 문제
안전 문제

(1) JavaScript 자체 의 보안 해결 방법: 브 라 우 저 업 체 가 Sandbox (샌 드 박스) 에서 JavaScript 코드 를 실행 합 니 다. 샌 드 박스 는 컴퓨터 자원 이 적은 밀폐 환경 에 만 접근 할 수 있 기 때문에 Ajax 응용 프로그램 이 로 컬 파일 시스템 을 읽 거나 기록 할 수 없습니다.프로그램 개발 에 어려움 을 가 져 올 수 있 지만 클 라 이언 트 자 바스 크 립 트 의 안전성 을 향상 시 켰 다.

(2) 데이터 가 네트워크 에서 전송 되 는 안전 문제 해결 방법: HTTP 전송 데이터 의 안전 을 확보 하기 위해 전 송 된 데 이 터 를 암호 화 할 수 있어 보 여도 위험 이 크 지 않다.전 송 된 데 이 터 를 암호 화하 면 서버 의 성능 이 떨 어 질 수 있 지만 민감 한 데이터 에 대해 서 는 성능 으로 더 높 은 안전 을 바 꾸 는 것 이 바람 직 하 다.

(3) 클 라 이언 트 가 원 격 서 비 스 를 호출 하 는 안전 문제 해결 방법 은 Ajax 응용 에서 모든 Ajax 요청 을 컨트롤 러 에 보 내야 합 니 다. 호출 자가 자원 에 접근 할 수 있 는 권한 이 있 는 지 확인 하 는 컨트롤 러 가 있 습 니 다.

2. 성능 문 제 는 Ajax 가 실행 속 도 를 최적화 하 는 방법 입 니 다.(1) 전역 변 수 를 사용 하지 않 고 국부 변 수 를 사용 합 니 다.(2) 최적화 for 순환 (3) 가능 한 한 eval 을 적 게 사용 하고 eval 을 사용 할 때마다 많은 시간 을 소모 해 야 한다.(4) DOM 노드 를 문서 에 추가 (5) 점 "." 호 연산 자의 사용 을 최소 화 합 니 다.
중국어 난 장 판 문제 해결
ajax 는 여러 문자 집합 을 지원 하지 않 습 니 다. 기본 문자 집합 은 UTF - 8 입 니 다.(1) PHP 는 중국어, Ajax 수신 을 보 냅 니 다. PHP 상단 에 다음 문 구 를 추가 하면 됩 니 다: header ('Content - type: text / html, charset = GB 2312'); /데 이 터 를 보 낼 인 코딩 형식 XML Http 를 지정 하면 중국어 가 올 바 르 게 해 석 됩 니 다.(2) Ajax 에서 중국어, PHP 를 보 내 는 것 은 복잡 합 니 다. Ajax 에 서 는 먼저 encodeURIComponent 로 제출 할 중국 어 를 인 코딩 합 니 다.PHP 페이지 에 다음 코드 를 추가 합 니 다: $GB 2312 string = iconv ('UTF - 8', 'gb 2312 / / IGNORE', $RequestAjaxString);PHP 에서 MySQL 데이터 베 이 스 를 선택 할 때 다음 문 구 를 사용 하여 데이터 베 이 스 를 설정 하 는 인 코딩 형식 my sqlquery("set names gb2312");
XML HttpRequest 대상 초기 화

if(window.XMLHttpRequest){      // ie   
  http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){     //ie   
  try{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e){
     try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch(e){ }
  }
}

XML HttpRequest 대상 의 일반적인 방법
1. 새로운 요청 방법 을 만 드 는 open () 방법 은 비동기 요청 대상 의 URL, 요청 방법 및 기타 매개 변수 정 보 를 설정 하 는 데 사 용 됩 니 다.구체 적 인 문법 은 다음 과 같다.

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

매개 변수 설명 method: 요청 유형 을 지정 하 는 데 사 용 됩 니 다. 보통 GET 또는 POST URL 입 니 다. 요청 주 소 를 지정 하 는 데 사 용 됩 니 다. 절대 주소 나 상대 주 소 를 사용 할 수 있 고 검색 문자열 asyncFlag 을 전달 할 수 있 습 니 다. 선택 가능 한 매개 변 수 를 위해 요청 방식 을 지정 합 니 다. 비동기 요청 은 true 이 고 동기 화 요청 은 false 입 니 다. 기본 적 인 상황 에서 true userName: 선택 가능 한 매개 변수 입 니 다.요청 사용자 이름 을 지정 하 는 데 사 용 됩 니 다. 없 을 때 password 를 생략 할 수 있 습 니 다. 선택 가능 한 매개 변 수 를 위해 요청 암 호 를 지정 하 는 데 사 용 됩 니 다. 없 을 때 생략 할 수 있 습 니 다.
예 를 들 어 비동기 요청 목 표를 deal. jsp 로 설정 하고 요청 방법 은 GET 이 며 요청 방식 은 비동기 코드 는 httprequest. open ("GET", "deal. jsp", true) 2. 서버 에 요청 을 보 내 는 방법 send () 방법 은 서버 에 요청 을 보 내 는 데 사 용 됩 니 다.비동기 로 요청 하면 이 방법 은 즉시 되 돌아 갑 니 다. 그렇지 않 으 면 응답 을 받 을 때 까지 기다 릴 것 입 니 다.send () 방법의 문법 형식 은 다음 과 같다.

send(content)

매개 변수 설명: content: 보 낸 데 이 터 를 지정 하 는 데 사용 합 니 다. DOM 대상 의 인 스 턴 스, 입력 흐름 또는 문자열 일 수 있 습 니 다.전달 할 인자 가 없 으 면 null 로 설정 할 수 있 습 니 다.
예 를 들 어 서버 에 인자 가 포함 되 지 않 은 요청 을 보 내 면 다음 코드 를 사용 할 수 있 습 니 다: httprequest.send(null); 3. 요청 한 HTTP 헤드 를 설정 하 는 방법 setRequestHeader () 방법 은 요청 한 HTTP 헤드 설정 값 에 사 용 됩 니 다.구체 적 인 문법 형식 은 다음 과 같다.

setRequestHeader("header","value")

인자 설명: header: HTTP 헤드 를 지정 하 는 데 사 용 됩 니 다.value: 지정 한 HTTP 헤드 값 을 설정 하 는 데 사 용 됩 니 다.메모: setRequestHeader () 방법 은 open () 방법 을 호출 한 후에 야 호출 할 수 있 습 니 다.
예 를 들 어 POST 요청 을 보 낼 때 Content - type 요청 헤더 의 값 을 'application / x - www - form - urlencoded' 로 설정 해 야 하 며, 이 때 는 setRequestHeader () 방법 으로 설정 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다: httprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 4. 현재 비동기 요청 을 정지 하거나 포기 하 는 방법 abort () 방법 은 현재 비동기 요청 을 정지 하거나 포기 하 는 데 사 용 됩 니 다.그 문법 형식 은 다음 과 같다.

abort()

예 를 들 어 현재 이 보 를 멈 추 려 면 다음 문 구 를 사용 할 수 있 습 니 다: httprequest. abort () 5. HTTP 헤더 정 보 를 되 돌려 주 는 방법

getResponseHeader () 방법 은 지정 한 HTTP 헤더 정 보 를 문자 로 되 돌려 주 는 데 사 용 됩 니 다.그 문법 형식 은 다음 과 같다.

getResponseHeader("headerLabel")

매개 변수 설명: header Label: 서버, Content - Type, Date 등 HTTP 헤드 를 지정 하 는 데 사 용 됩 니 다.
예 를 들 어 HTTP 헤드 Content - Type 의 값 을 가 져 오 려 면 다음 코드 를 사용 할 수 있 습 니 다: httprequest. getResponseHeader ("Content - Type") 위의 코드 는 다음 과 같은 내용 을 가 져 옵 니 다: text / html;charset=GBk

getAllResponseHeaders () 방법 은 서버, Date, Content - Type, Content - Length 를 포함 한 완전한 HTTP 헤더 정 보 를 문자열 로 되 돌려 주 는 데 사 용 됩 니 다.이 방법의 문법 형식 은 다음 과 같다.

getAllResponseHeaders()

예 를 들 어 아래 코드 를 사용 하여 getAll Response Headers () 방법 을 호출 하면 전체 HTTP 헤드 정 보 를 표시 합 니 다.alert(http_request.getAllResponseHeaders());
XML HttpRequest 대상 의 상용 속성
(1) 상태 가 바 뀌 었 을 때 발생 하 는 이벤트 프로세서 의 속성 을 지정 합 니 다.XML HttpRequest 대상 은 상태 가 바 뀌 었 을 때 실행 할 이벤트 프로세서 의 속성 onreadystatechange 를 지정 합 니 다.Ajax 에 서 는 상태 가 바 뀔 때마다 이 이벤트 프로 세 서 를 실행 합 니 다. 보통 자바 스 크 립 트 함 수 를 호출 합 니 다.예 를 들 어 아래 코드 를 통 해 지정 한 상태 가 바 뀌 었 을 때 실행 할 자바 스 크 립 트 함 수 를 실현 할 수 있 습 니 다. 여 기 는 getResult () 입 니 다.http_request.onreadystatechange = getResult;
메모: 트리거 된 이벤트 프로 세 서 를 지정 할 때 호출 된 자바 스 크 립 트 함 수 는 작은 괄호 와 지정 한 매개 변수 이름 을 추가 할 수 없습니다.하지만 여 기 는 익명 함 수 를 사용 할 수 있 습 니 다.예 를 들 어 인자 가 있 는 함수 getResult () 를 호출 하려 면 아래 코드 를 사용 할 수 있 습 니 다.

http_resquest.onreadystatechange = function(){
  getResult('"     ")；    //        
}                              //               

2. 요청 상태의 속성 가 져 오기 XML HttpRequest 대상 은 요청 상 태 를 가 져 오 는 속성 ready State 를 제공 합 니 다. 이 속성 은 총 5 개의 속성 값 을 포함 합 니 다.
0 초기 화 되 지 않 음 1 로 딩 중 2 로 딩 되 었 습 니 다 3 인 터 랙 션 중 4 가 실제 응용 에서 완료 되 었 습 니 다. 이 속성 은 요청 상 태 를 판단 하 는 데 자주 사 용 됩 니 다. 요청 상태 가 4, 즉 완료 되 었 을 때 요청 이 성 공 했 는 지 판단 합 니 다. 성공 하면 처 리 를 시작 합 니 다.
3. 서버 의 문자열 응답 을 가 져 오 는 속성 XML HttpRequest 대상 은 서버 응답 을 가 져 오 는 속성 responseText 를 문자열 로 표시 합 니 다.예 를 들 어 서버 에서 돌아 오 는 문자열 응답 을 가 져 오고 변수 h 에 값 을 부여 하면 다음 코드 를 사용 할 수 있 습 니 다: var h = httprequest.reponseText; 4. 서버 의 XML 응답 을 가 져 오 는 속성 XML HttpRequest 대상 은 서버 응답 을 가 져 오 는 속성 reponseXML 을 XML 로 표시 합 니 다.이 대상 은 DOM 대상 으로 해석 할 수 있다.예 를 들 어 서버 가 되 돌아 오 는 XML 응답 을 가 져 오고 변수 xmldoc 에 값 을 부여 하면 다음 코드 를 사용 할 수 있 습 니 다: var xmldoc = httprequest.reponseXML; 5. 서버 로 돌아 가 는 HTTP 상태 코드 의 속성 XML HttpRequest 대상 은 서버 로 돌아 가 는 HTTP 상태 코드 의 속성 status 를 제공 합 니 다.이 속성의 문법 형식 은 다음 과 같 습 니 다.

http_request.status

파라미터 설명: httprequest: XML HttpRequest 대상 반환 값: 서버 의 HTTP 상태 코드 를 나타 내 는 긴 정형 의 수치 입 니 다.자주 사용 하 는 상태 코드 는 다음 과 같 습 니 다. 100 계속 보 내기 요청 200 요청 은 202 요청 에 성 공 했 지만 400 오류 요청 404 파일 을 찾 지 못 했 습 니 다. 408 요청 시간 초과 500 내부 서버 오류 501 서버 는 현재 요청 에 필요 한 기능 을 지원 하지 않 습 니 다. status 속성 은 send () 방법 으로 돌아 갈 때 만 유효 합 니 다.
이 속성 은 요청 상태 가 완료 되 었 을 때 현재 서버 상태 가 성 공 했 는 지 판단 하 는 데 사 용 됩 니 다.예 를 들 어 요청 이 완료 되 었 을 때 요청 의 성공 여 부 를 판단 하 는 코드 는 다음 과 같 습 니 다.

if( http_request.readyState == 4 ){      //        
   if( http_request.status == 200 ){     //    ，        
       alert("    ！");
   }else{                                //     
       alert("    ！");
   }
}