Heim  >  Artikel  >  Web-Frontend  >  Ajax+js realisiert asynchrone Interaktion

Ajax+js realisiert asynchrone Interaktion

巴扎黑
巴扎黑Original
2017-07-03 10:36:561014Durchsuche

Was dieser Artikel mit Ihnen teilt, ist die Methode und der Code der asynchronen Interaktion, die durch natives Javascript kombiniert werden. Es ist sehr einfach und praktisch. Freunde in Not können sich darauf beziehen.

Wenn es um asynchrone Interaktion geht, wird jeder Ajax sagen, als ob die Ajax-Technologie zum Synonym für asynchrone Interaktion geworden wäre. Dann werden wir den Kern von Ajax Objekt untersuchen!

Es gibt nur 4 Schritte, um mit Ajax eine asynchrone Interaktion zu erreichen:

  1. Ajax-Kernobjekt erstellen

  2. Eine Verbindung mit dem Server herstellen

  3. Anfrage an den Server senden

  4. Server-Antwortdaten empfangen

Das scheinbar mysteriöse Asynchrone Nachdem wir diese 4 Schritte geklärt haben, hat vielleicht jeder bereits eine vorläufige Idee im Kopf.

Zuerst erstellen wir das Kernobjekt von Ajax. Aufgrund von Browserkompatibilitätsproblemen dürfen wir dessen Kompatibilitätsprobleme beim Erstellen des Kerns nicht berücksichtigen Ajax-Objekt, denn um die Asynchronität zu erreichen, basieren die nachfolgenden Schritte der Interaktion darauf, ob das Ajax-Kernobjekt im ersten Schritt erfolgreich erstellt wurde Nachdem wir das Ajax-Kernobjekt mithilfe des obigen Codes erfolgreich erstellt haben, werden die als nächstes erwähnten Ajax-Kernobjekte durch xhr ersetzt. Der zweite Schritt besteht darin, eine Verbindung mit dem Server herzustellen und anzurufen die Methode open(method, url, async) durch das Ajax-Kernobjekt

Erklärung der formalen Parameter der open-Methode:

Methode repräsentiert die Anforderungsmethode (get oder post)
 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();

URL stellt die Adresse des angeforderten PHP dar (beachten Sie, dass bei

Anfragetyp abgerufen wird, auf die angeforderten Daten ein Fragezeichen nach der URL-Adresse folgt und der Nullwert übergeben wird in der Sendemethode unten)

async ist ein boolescher Wert, der angibt, ob er asynchron ist, und der Standardwert ist true In der neuesten Version muss dieses Element in der Spezifikation nicht mehr ausgefüllt werden, da es offiziell ist glaubt, dass die Verwendung von Ajax dazu dient, asynchron zu sein. Im dritten Schritt senden wir eine Anfrage an den Server, indem wir Ajax verwenden. Das Kernobjekt ruft die Sendemethode

Wenn es sich um die Post-Methode handelt, werden die angeforderten Daten in der Form name=value in die send-Methode eingefügt und an den Server gesendet. Die get-Methode übergibt den Nullwert direkt

Der vierte Schritt besteht darin, die von der Serverantwort zurückgegebenen Daten zu empfangen und das onreadystatechange-Ereignis zu verwenden, um den Kommunikationsstatus des Servers über den readyState zu überwachen Das Attribut „Status“ ruft den

-Statuscode

ab. Das Attribut „responseText“ empfängt die vom Server zurückgegebenen Daten (hier bezieht sich der Texttyp auf die Daten im Format „

string“

). und die berühmten JSON-Formatdaten werden geschrieben

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

Das obige ist der detaillierte Inhalt vonAjax+js realisiert asynchrone Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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