> 웹 프론트엔드 > JS 튜토리얼 > 기본 JavaScript_javascript 기술로 Ajax를 구현하는 방법

기본 JavaScript_javascript 기술로 Ajax를 구현하는 방법

WBOY
풀어 주다: 2016-05-16 15:06:16
원래의
1523명이 탐색했습니다.

먼저 참고하실 수 있도록 네이티브 JavaScript Ajax 코드를 공유합니다

var getXmlHttpRequest = function() {
  if (window.XMLHttpRequest) {
    //主流浏览器提供了XMLHttpRequest对象
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    //低版本的IE浏览器没有提供XMLHttpRequest对象
    //所以必须使用IE浏览器的特定实现ActiveXObject
    return new ActiveXObject("Microsoft.XMLHttpRequest");
  }

};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
  console.log(xhr.readyState);
  if (xhr.readyState === 3 && xhr.status === 200) {
    //获取成功后执行操作
    //数据在xhr.responseText
    console.log(xhr.responseText);
  }
};
xhr.open("get", "data.php", true);
xhr.send("");

로그인 후 복사

자바스크립트를 사용하여 네이티브 Ajax를 구현하는 여러 가지 방법을 알려드리겠습니다.
Ajax를 구현하기 전에 XMLHttpRequest 객체를 생성해야 합니다. 객체를 생성한 브라우저가 이를 지원하지 않는 경우에는 다음과 같이 ActiveXObject를 생성해야 합니다.

var xmlHttp; 
function createxmlHttpRequest() { 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest(); 
} 
로그인 후 복사

(1) 위에서 생성한 xmlHttp를 사용하여 가장 간단한 ajax get 요청을 구현합니다.

function doGet(url){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("GET",url); 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
} 
로그인 후 복사

(2) 위에서 생성한 xmlHttp를 사용하여 가장 간단한 Ajax 게시 요청을 구현합니다.

function doPost(url,data){ 
// 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
createxmlHttpRequest(); 
xmlHttp.open("POST",url); 
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send(data); 
xmlHttp.onreadystatechange = function() { 
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
alert('success'); 
} else { 
alert('fail'); 
} 
} 
} 
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿