아주 간단 한 Ajax 요청 인 스 턴 스 원본 코드

5780 단어 ajax청구 하 다.
Ajax 는 새로운 프로 그래 밍 언어 가 아니 라 더 빠 르 고 상호작용 이 강 한 웹 프로그램 을 만 드 는 기술 입 니 다.Ajax 를 통 해 자바 스 크 립 트 의 XML HttpRequest 대상 을 사용 하여 서버 와 직접 통신 할 수 있 습 니 다.페이지 를 다시 불 러 오지 않 은 상태 에서 웹 서버 와 데 이 터 를 교환 할 수 있 습 니 다.본 논문 의 예 에서 우 리 는 사용자 가 표준 HTML 폼 에 데 이 터 를 입력 할 때 웹 페이지 가 웹 서버 와 어떻게 통신 하 는 지 보 여 줄 것 이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>   Ajax  </title>
 <script type="text/javascript">
  var xmlHttp;
  //   XMLHttpRequest  
  function createXMLHttpRequest() {
   if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
   }
  }
  //   url  
  function createQueryString() {
   var name = document.getElementById("txtName").value;
   var sex = document.getElementById("txtSex").value;
   var birthday = document.getElementById("txtBirthday").value;
   var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday);
   return queryString;
  }
  //   Get      
  function doRequestUsingGET() {
   createXMLHttpRequest();
   var queryString = "AjaxServer.ashx?";
   queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.open("GET", queryString, true);
   xmlHttp.send(null);
  }
  //  POST      
  function doRequestUsingPOST() {
   createXMLHttpRequest();
   var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime();
   var queryString = createQueryString();
   xmlHttp.open("POST", url, true);
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
   xmlHttp.send(queryString);
  }
  //     
  function handleStateChange() {
   if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
     parseResults();
    }
   }
  }
  //          
  function parseResults() {
   var responseDiv = document.getElementById("serverResponse");
   if (responseDiv.hasChildNodes()) {
    responseDiv.removeChild(responseDiv.childNodes[0]);
   }
   var responseText = document.createTextNode(xmlHttp.responseText);
   responseDiv.appendChild(responseText);
  }
 </script>
</head>
<body>
 <form action="#">
 <h2>      ,  ,  ：</h2>
 <table>
  <tr><td>  ：</td><td><input type="text" id="txtName" /></td></tr>
  <tr><td>  ：</td><td><input type="text" id="txtSex" /></td></tr>
  <tr><td>  ：</td><td><input type="text" id="txtBirthday" /></td>
  </tr>
 </table>
 <input type="button" value=" Get     " onclick="doRequestUsingGET();"/>
 <br /><br />
 <input type="button" value=" POST     " onclick="doRequestUsingPOST();"/>
 </form>
 <br />
 <h3>       ：</h3>
 <div id="serverResponse"></div>
</body>
</html>
다음은 각 JS 함수 의 기능 을 상세 하 게 설명 한다.
createXMLHttpRequest()는 XMLHttpRequest 대상 을 만 드 는 데 사 용 됩 니 다.
IE 는 XML HttpRequest 를 ActiveX 대상 으로 구현 하고,다른 브 라 우 저(FF/safari/Opera)는 이 를 로 컬 자 바스 크 립 트 대상 으로 구현 하기 때문이다.이러한 차이 가 존재 하기 때문에 자 바스 크 립 트 코드 에는 관련 논리 가 포함 되 어야 합 니 다.
createQueryString()은 매개 변 수 를 정리 하 는 데 사용 되 며,Ajax 가 요청 한 매개 변 수 를 일정한 형식 으로 정리 합 니 다.
중국어 나 비 ASCII 문 자 를 전달 하려 면 URL 인 코딩 을 해 야 합 니 다.이 예 는 JS 의 encodeURIComponent()함수 로 매개 변수 URL 인 코딩 을 합 니 다.
doRequestUsingGET()는 HTTP GET 방식 으로 서버 에 요청 을 보 내 고 인 자 를 전달 합 니 다.
XML HttpRequest 대상 의 open()방법 은 보 낼 요청 을 지정 합 니 다.open()방법 은 세 개의 인 자 를 가 져 옵 니 다.하 나 는 사용 하 는 방법(보통 GET 나 POST)을 표시 하 는 문자열 입 니 다.하 나 는 대상 자원 URL 을 나타 내 는 문자열 입 니 다.하 나 는 Boolean 값 입 니 다.비동기 인지 아 닌 지 를 요청 할 뿐 입 니 다.
GET 요청 시 전 달 된 인 자 를 open 방법의 url 인자 에 기록 합 니 다.이때 send 방법의 인 자 는 null 입 니 다.
어떤 경우,일부 브 라 우 저 는 여러 개의 XML HttpRequest 가 요청 한 결 과 를 같은 URL 에 캐 시 합 니 다.요청 마다 응답 이 다 르 면 좋 지 않 은 결 과 를 가 져 올 수 있 습 니 다.현재 시간 스탬프 를 URL 의 마지막 에 추가 하면 URL 의 유일 성 을 확보 하여 브 라 우 저 캐 시 결 과 를 피 할 수 있 습 니 다.
이 서버 엔 드 코드 는 asp.net(c\#)을 사용 합 니 다.
doRequestUsingPOST()는 HTTP POST 방식 으로 서버 에 요청 을 보 내 고 인 자 를 전달 합 니 다.
open()에서 지정 한 방법 이 POST 인지 확인 하려 면 Content-Type 헤더 정 보 를 설정 하고 HTTP POST 방법 을 모 의 하여 폼 을 보 내야 서버 가 업로드 한 내용 을 어떻게 처리 하 는 지 알 수 있 습 니 다.헤드 정 보 를 설정 하기 전에 오픈 방법 을 사용 해 야 합 니 다.
send 방법 으로 파 라 메 터 를 전달 해 야 합 니 다.인자 의 제출 형식 은 GET 방법 에서 url 의 쓰기 와 같 습 니 다.
handleStateChange()  Ajax 리 턴 함수.
XML HttpRequest 대상 에 대해 onreadystatechange 속성 은 리 셋 함수 의 지침 을 저장 합 니 다.XML HttpRequest 대상 의 내부 상태 가 변 하면 이 리 셋 함 수 를 호출 합 니 다.
parseResults()처리 응답 결과.
이상 은 아주 간단 한 Ajax 요청 인 스 턴 스 입 니 다.여러분 의 학습 을 환영 합 니 다.다운로드Ajax 요청 인 스 턴 스
경 량 ajax 구성 요소 01-webform 플랫폼 의 다양한 구현 방식 과 비교
위 챗 애플 릿 은 틱 톡 영상의 전체 화면 상하 전환 기능 의 실현 코드 를 모방 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage