네이티브 JS에서 Ajax를 구현하는 간단한 방법의 예-JS 튜토리얼-php.cn

네이티브 JS에서 Ajax를 구현하는 간단한 방법의 예

高洛峰

풀어 주다： 2016-12-03 15:55:32

원래의

1134명이 탐색했습니다.

이 기사의 예에서는 기본 JS에서 Ajax를 간단하게 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

HTML 부분:

<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText" ></div>
</body>

로그인 후 복사

여기에 입력 버튼이 있습니다. 을 클릭하면 클릭 이벤트가 트리거되고 클릭 이벤트는 Ajax() 메서드를 호출합니다.

JS 부분:

<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
  var xmlHttpReq = null;  //声明一个空对象用来装入XMLHttpRequest
  if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
    xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
  }
  if(xmlHttpReq != null){  //如果对象实例化成功
    xmlHttpReq.open("GET","test.php",true);  //调用open()方法并采用异步方式
    xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
    xmlHttpReq.send(null);  //因为使用get方式提交，所以可以使用null参调用
  }
  function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
    if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
          //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
          document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
        }
    }
  }
}
</script>

로그인 후 복사

Ajax는 약 4단계로 나누어 Ajax 객체를 생성하고 open() 메소드를 사용합니다. 비밀리에 서버로 실행하여 데이터를 가져와서 그에 따라 처리합니다. GET 메소드를 사용하여 open 메소드의 url 매개변수에 제출할 매개변수를 작성하면 됩니다. 이때 send 메소드의 매개변수는 null입니다.

예를 들어 GET 메서드:

var url = "login.php?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);

로그인 후 복사

예를 들어 POST 메서드:

xmlHttpRequest.open("POST","login.php",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);

로그인 후 복사

send에서 매개변수를 전달해야 하는 경우 setRequestHeder가 필요합니다.

제출 방법에 따라 두 가지 제출 방법은 백그라운드 doGet 메서드와 doPost를 호출한다는 점에 유의하세요. 방법은 각각.

PHP 부분:

<?php
  echo "Hello Ajax!";
?>

로그인 후 복사

Ajax는 PHP 데이터를 얻은 후 비밀리에 해당 div 레이어 중간에 데이터를 넣습니다. 이 클릭 이벤트로 인해 페이지가 새로 고쳐지지는 않지만 서버측 데이터를 비밀리에 데이터베이스에서 읽을 수도 있습니다. 데이터를 얻은 후 Ajax는 일부 작업 처리를 수행할 수도 있습니다.