원본 XMLHttpRequest 메서드 세부정보 review_jquery

일반적인 로그인 인증 예시를 보여드리겠습니다

일반적으로 로그인 확인을 위해 XMLHttpRequest 객체를 사용하려면 다음 단계가 필요합니다

1. DOM을 사용하여 입력 상자에 값 가져오기                                                                                             🎜>

var userName = document.getElementById("userName").value;2. XMLHttpRequest 객체를 생성합니다. 이 단계는 브라우저 호환성 문제를 고려하기 때문에 더 복잡합니다.  

코드 복사

코드는 다음과 같습니다.

if (window.XMLHttpRequest) { //FireFox, Mozillar, Opera, Safari, IE7, IE8 overrideMimeType) {                                                                                /2개 XMLHTTPREQUEST 객체를 생성하고 JS 배열에 저장하는 데 사용할 수 있는 컨트롤 이름 🎜> // 이전 버전이 최신 버전입니다. VAR Activexname = ["msxml2.xmlhtttt", "Microsoft.xmlhttp" ]; for (var i = 0; i < activexName.length; i ) { try{

//생성할 컨트롤 이름을 꺼내고 생성에 성공하면 루프를 종료합니다.

// 생성에 실패하면 예외가 발생하며 계속해서 루프를 돌 수 있습니다.
xmlhttp = new ActiveXObject(activexName[i]);
break;
🎜>       }
   }


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","AJAXServer",true);
//POST 메서드에서는 http 요청 헤더를 직접 설정해야 합니다
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST를 통해 데이터 보내기
xmlhttp.send("name=" userName);

콜백 함수:

코드 복사 코드는 다음과 같습니다.

//콜백 함수
function callback() {
//alert(xmlhttp.readyState);
//5. 응답 데이터 수신
// 객체의 상태가 상호 작용 완료인지 확인
if (xmlhttp.readyState == 4) {
// http 상호 작용 성공 여부 확인
if (xmlhttp.status = = 200 ) {
//서버 측에서 반환된 데이터 가져오기
//서버 세그먼트에서 출력된 일반 텍스트 데이터 가져오기
var responseText = xmlhttp.responseText;
//데이터 표시 on the page
// DOM 메소드를 통해 DIV 태그에 해당하는 요소 노드를 찾습니다.
var dignode = document.GetelementByid ("result")
// 요소 노드에 html 콘텐츠를 설정합니다. 🎜> divNode.innerhtml = responsetextExtExtExtExt ;
       } else {
                                                  ~