suchen

Heim >Web-Frontend >js-Tutorial >Beispiel einer einfachen Methode zur Implementierung von Ajax in nativem JS

Beispiel einer einfachen Methode zur Implementierung von Ajax in nativem JS

高洛峰
高洛峰Original
2016-12-03 15:55:321154Durchsuche

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>

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>

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

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

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!";
?>

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.


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Diskussion über die verschiedenen Definitionsmethoden und Unterschiede von js-FunktionenNächster Artikel：Eine kurze Diskussion über die verschiedenen Definitionsmethoden und Unterschiede von js-Funktionen

In Verbindung stehende Artikel

Mehr sehen