일반적인 로그인 확인 예시를 보여드리겠습니다.
일반적으로 로그인 확인을 위해 XMLHttpRequest 객체를 사용하려면 다음 단계가 필요합니다.
1. DOM 메소드를 사용하여 입력 상자의 값을 얻습니다.
다음과 같이 코드 코드를 복사합니다.
var userName = document.getElementById("userName").value;
2. XMLHttpRequest 객체를 생성합니다. 이 단계는 브라우저 호환성 문제를 고려하기 때문에 더 복잡합니다.
다음과 같이 코드 코드를 복사합니다.
if (window.XMLHttpRequest) {
//FireFox, Mozillar, Opera, Safari, IE7, IE8의 경우
xmlhttp = 새로운 XMLHttpRequest();
//일부 특정 Mozillar 브라우저 버전의 버그 수정
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6, IE5.5, IE5의 경우
//js 배열에 저장된 XMLHTTPRequest 객체를 생성하는 데 사용할 수 있는 두 개의 컨트롤 이름
//첫 번째 버전이 최신 버전입니다.
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
노력하다{
//컨트롤 이름을 꺼내서 생성하면 루프를 종료합니다.
//생성이 실패하면 예외가 발생하고 루프는 계속해서 생성을 시도할 수 있습니다.
xmlhttp = new ActiveXObject(activexName[i]);
부서지다;
} 잡기(e){
}
}
}
3. XMLHttpRequest 객체의 콜백 함수를 등록합니다. 콜백 함수를 등록할 때 함수 이름이 필요하며 괄호는 추가하지 않습니다.
다음과 같이 코드 코드를 복사합니다.
//콜백함수 등록시 함수명을 필수로 입력해야 하며, 괄호는 추가하지 마세요.
//함수 이름을 등록해야 합니다. 괄호를 추가하면 함수의 반환 값이 등록됩니다.
xmlhttp.onreadystatechange = 콜백;
4. 연결정보 설정(GET)
다음과 같이 코드 코드를 복사합니다.
//첫 번째 매개변수는 http 요청 방식을 나타내며 모든 http 요청 방식을 지원하며 주로 get과 post를 사용합니다.
//두 번째 매개변수는 요청의 URL 주소를 나타내며, get 메소드에서 요청한 매개변수도 URL에 있습니다.
//세 번째 매개변수는 비동기식 또는 동기식 상호 작용을 사용할지 여부를 나타내며, true는 비동기식을 나타냅니다.
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5.요청 보내기
다음과 같이 코드 코드를 복사합니다.
xmlhttp.send(null);
6. (POST) 메소드의 경우 http 요청 헤더를 직접 설정해야 하며, 인코딩해야 하기 때문에 XHR.open의 두 번째 매개변수에 데이터를 직접 보낼 수는 없으며 대신 send() 메소드를 사용해야 합니다. 데이터를 전송합니다.
다음과 같이 코드 코드를 복사합니다.
//POST 요청 코드
//xmlhttp.open("POST","AJAX서버",true);
//POST 메소드에서는 http 요청 헤더를 직접 설정해야 합니다.
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST 모드로 데이터 보내기
xmlhttp.send("name=" + 사용자이름);
콜백 함수:
다음과 같이 코드 코드를 복사합니다.
//콜백 함수
함수 콜백() {
//alert(xmlhttp.readyState);
//5. 응답 데이터 수신
//객체의 상태가 대화형 완료인지 확인
if (xmlhttp.readyState == 4) {
//http 상호작용이 성공했는지 확인합니다.
if (xmlhttp.status == 200) {
//래커웨어 서버에서 반환된 데이터를 가져옵니다.
//서버 세그먼트에서 출력된 일반 텍스트 데이터를 가져옵니다.
var responseText = xmlhttp.responseText;
//페이지에 데이터 표시
//dom을 통해 div 태그에 해당하는 요소 노드를 찾습니다.
var divNode = document.getElementById("result");
//요소 노드에 html 콘텐츠를 설정합니다.
divNode.innerHTML = responseText;
} 또 다른 {
Alert("오류가 발생했습니다!!!");
}
}
}