자바스크립트에서 Ajax를 구현하는 방법

javascript에서 ajax를 구현하는 방법: 먼저 XMLHttpRequest 개체를 사용하여 백그라운드에서 서버와 데이터를 교환한 다음 서버에 정보를 보낼 때 마지막으로 http 헤더와 콘텐츠 인코딩 유형을 추가합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

ajax 구현을 위한 javascript 메소드:

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

open(method, url, async) 메소드에는 세 가지 매개변수가 필요합니다:

메소드: 요청을 보내는 데 사용되는 메소드(GET 또는 POST)

POST와 비교, GET 더 간단하고 빠르며 대부분의 경우 작동합니다. 그러나 다음과 같은 경우에는 POST 요청을 사용하십시오.

캐시 파일을 사용할 수 없습니다(서버의 파일 또는 데이터베이스 업데이트)

서버에 많은 수의 데이터 전송(POST에는 데이터 볼륨이 없습니다) 제한)

알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST가 GET보다 안정적이고 신뢰할 수 있습니다

　url: 서버측 스크립트의 URL을 지정합니다(파일은 .txt 등 모든 유형의 파일일 수 있습니다. ; true는 서버 응답을 기다리는 동안 다른 스크립트를 실행하고, 응답이 준비되면 응답을 처리하는 것을 의미하며, false는 실행 전에 서버 응답을 기다리는 것을 의미합니다.

관련 무료 학습 권장사항:

javascript 비디오 튜토리얼

위 내용은 자바스크립트에서 Ajax를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!