Beispiel einer einfachen Methode zur Implementierung von Ajax in nativem JS-js-Tutorial-php.cn

Beispiel einer einfachen Methode zur Implementierung von Ajax in nativem JS

高洛峰

Freigeben： 2016-12-03 15:55:32

Original

1140 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man Ajax einfach in nativem JS implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

HTML-Teil:

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

Nach dem Login kopieren

Hier gibt es eine Eingabeschaltfläche Wenn Sie darauf klicken, wird ein Klickereignis ausgelöst. Das Klickereignis ruft die Ajax()-Methode auf.

JS-Teil:

<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>

Nach dem Login kopieren

Ajax ist in etwa vier Schritte unterteilt und verwendet die open()-Methode Laufen Sie heimlich zum Server und verarbeiten Sie sie nach Erfolg entsprechend. Verwenden Sie einfach die GET-Methode, um die zu sendenden Parameter in den URL-Parameter der offenen Methode zu schreiben. Zu diesem Zeitpunkt ist der Parameter der Sendemethode null.

Zum Beispiel GET-Methode:

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

Nach dem Login kopieren

Zum Beispiel POST-Methode:

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

Nach dem Login kopieren

Wenn Sie beim Senden Parameter übergeben müssen, ist setRequestHeder erforderlich

Es ist zu beachten, dass je nach Übermittlungsmethode die beiden Übermittlungsmethoden die Hintergrundmethode doGet und doPost aufrufen Methode bzw.

PHP-Teil:

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

Nach dem Login kopieren

Nachdem Ajax die PHP-Daten erhalten hat, werden die Daten heimlich in die entsprechende Div-Schichtmitte eingefügt. Dieses Klickereignis führt nicht zu einer Aktualisierung der Seite, sondern ruft heimlich die serverseitigen Daten ab. Nach dem Abrufen der Daten kann Ajax auch einige Aktionsverarbeitungen durchführen.