Heim > Artikel > Web-Frontend > Was sind die grundlegenden Prozesse von Ajax? Detaillierte Analyse des Grundprozesses von Ajax (mit Beispielen)
Was sind die grundlegenden Prozesse von Ajax? Detaillierte Analyse des Grundprozesses von Ajax (mit Beispielen)
- 寻∝梦Original
- 2018-09-10 16:17:171209Durchsuche
In diesem Artikel geht es hauptsächlich um den Verwendungsprozess von Ajax sowie die Speichermethode von Ajax. Lesen wir nun gemeinsam diesen Artikel
AJAX-Verwendungsprozess und Speichermethode
Diese Gedächtnismethode ist möglicherweise nicht gut für Sie. Wenn Sie das Gefühl haben, dass sie nicht für Sie geeignet ist, können Sie sich eine andere ausdenken.
new XMLHttpRequest();--- Eine neue Expresslieferung erhalten
open('Methor',url,true);--- Sie können es kaum erwarten, zu öffnen
send();--- Ich habe festgestellt, dass mit Ihrem Artikel etwas nicht stimmt, und habe ihn zurückgeschickt
function onload(){}--- Der Verkäufer hat Ihre Expresslieferung abgewickelt
responseText--- Nach der Verarbeitung wird der Express an Sie zurückgesandt
Um einen AJAX-Asynchronaufruf und eine teilweise Aktualisierung vollständig zu implementieren, sind normalerweise die folgenden Schritte erforderlich:
(1) Erstellen Sie ein XMLHttpRequest-Objekt, also ein asynchrones Aufrufobjekt
(2) Erstellen Sie eine neue HTTP-Anfrage und geben Sie die Methode, URL und Überprüfungsinformationen der HTTP-Anfrage an
(3) Legen Sie eine Funktion fest, um auf Statusänderungen der HTTP-Anfrage zu reagieren.
(4) Senden Sie eine HTTP-Anfrage.
(5) Rufen Sie die vom asynchronen Aufruf zurückgegebenen Daten ab .
(6) Verwenden Sie JavaScript und DOM, um eine teilweise Aktualisierung zu implementieren
1. Erstellen Sie ein XMLHttpRequest-Objekt
Verschiedene Browser verwenden unterschiedliche asynchrone Aufrufobjekte In IE verwenden asynchrone Aufrufe in Browsern das XMLHttpRequest-Objekt in der XMLHTTP-Komponente, während in Netscape- und Firefox-Browsern die XMLHttpRequest-Komponente direkt verwendet wird. Daher ist die Art und Weise, XMLHttpRequest-Objekte in verschiedenen Browsern zu erstellen, unterschiedlich.
Die Art und Weise, XMLHttpRequest-Objekte im IE-Browser zu erstellen, ist wie folgt:
var xmlHttpRequest = new ActiveXObject(" Microsoft.XMLHTTP" );
So erstellen Sie ein XMLHttpRequest-Objekt im Netscape-Browser:
var xmlHttpRequest = new XMLHttpRequest();
Da es unmöglich ist, zu bestimmen, welchen Browser der Benutzer verwendet, fügen Sie am besten beide oben genannten Methoden hinzu, wenn Sie ein XMLHttpRequest-Objekt erstellen:
<html>
<head>
<title>创建XMLHttpRequest对象</title>
<script language = "javascript" type = "text/javascript">
<!--
var xmlHttpRequest; //定义一个变量,用于存放XMLHttpRequest对象
function createXMLHttpRequest() //创建XMLHttpRequest对象的方法
{
if(window.ActiveXObject) //判断是否是IE浏览器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //创建IE浏览器中的XMLHttpRequest对象
}
else if(window.XMLHttpRequest) //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
{
xmlHttpRequest = new XMLHttpRequest(); //创建其他浏览器上的XMLHttpRequest对象
}
}
-->
</script>
createXMLHttpRequst(); //调用创建对象的方法
</head>
<body>
</body>
</html>
"if(window . ActiveXObject)“ wird verwendet, um zu bestimmen, ob der IE-Browser verwendet werden soll. ActiveXOject ist keine Standardeigenschaft von Windows-Objekten, sondern eine exklusive Eigenschaft des IE-Browsers, die verwendet werden kann, um zu bestimmen, ob der Browser ActiveX-Steuerelemente unterstützt. Normalerweise nur IE-Browser oder Nur Browser mit IE als Kern können aktive Steuerelemente unterstützen.
„else if(window.XMLHttpRequest)“ ist eine Entscheidung, die verhindern soll, dass einige Browser weder ActiveX-Steuerelemente noch XMLHttpRequest-Komponenten unterstützen Attribut des Fensterobjekts, kann aber verwendet werden, um zu bestimmen, ob der Browser die XMLHttpRequest-Komponente unterstützt.
Wenn der Browser weder ActiveX-Steuerelemente noch XMLHttpRequest-Komponenten unterstützt, unterstützt er die Zuweisung von xmlHttpRequest-Variablen nicht.
2. HTTP-Anfrage erstellen
Nach dem Erstellen des XMLHttpRequest-Objekts müssen Sie eine HTTP-Anfrage für das XMLHttpRequest-Objekt erstellen, um das XMLHttpRequest-Objekt zu veranschaulichen Holen Sie sich die Daten von? Es können normalerweise Daten auf der Website oder Daten in anderen lokalen Dateien sein.
Um eine HTTP-Anfrage zu erstellen, können Sie die open()-Methode des XMLHttpRequest-Objekts verwenden folgt Anzeige:
XMLHttpRequest.open(method,URL,flag,name,password)
Die Parametererklärung im Code lautet wie folgt:
Methode: Dieser Parameter wird verwendet, um die HTTP-Anforderungsmethode anzugeben. Es gibt fünf Methoden: get, post, head, put und delete, häufig verwendete Methoden sind get und post.
URL: Mit diesem Parameter wird die URL-Adresse der HTTP-Anfrage angegeben, die eine absolute URL oder eine relative URL sein kann.
Flag: Dieser Parameter ist optional und der Parameterwert ist boolesch. Mit diesem Parameter wird angegeben, ob der asynchrone Modus verwendet werden soll. true gibt den asynchronen Modus an, false gibt den synchronen Modus an und der Standardwert ist true.
Name: Dieser Parameter ist optional und dient zur Eingabe des Benutzernamens. Dieser Parameter muss verwendet werden, wenn der Server eine Authentifizierung erfordert.
Passwort: Dieser Parameter ist optional und dient der Eingabe des Passwortes. Dieser Parameter muss verwendet werden, wenn der Server eine Authentifizierung erfordert. Normalerweise können Sie den folgenden Code verwenden, um auf den Inhalt einer Website-Datei zuzugreifen.
xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);
Oder verwenden Sie den folgenden Code, um darauf zuzugreifen ein Lokaler Dateiinhalt:
xmlHttpRequest.open("get","ajax.htm",true);
Hinweis: Wenn die HTML-Datei auf einem Webserver abgelegt wird, lässt der JavaScript-Sicherheitsmechanismus im Netscape-Browser keine Kommunikation mit anderen Hosts als diesem Computer zu. Mit anderen Worten: Mit der Methode open() können nur Dateien geöffnet werden, die sich auf demselben Server wie die HTML-Datei befinden. Im IE-Browser gibt es keine solche Einschränkung (obwohl Dateien auf anderen Servern geöffnet werden können, wird auch eine Warnung angezeigt).
3. Legen Sie die Funktion fest, um auf die Änderung des HTTP-Anfragestatus zu reagieren
Nach dem Erstellen des HTTP Anfrage, Sie sollten dann die HTTP-Anfrage an den Webserver senden. Der Zweck des Sendens einer HTTP-Anfrage besteht jedoch darin, vom Server zurückgegebene Daten zu empfangen. Von der Erstellung des XMLHttpRequest-Objekts bis zum Senden und Empfangen von Daten durchläuft das XMLHttpRequest-Objekt die folgenden 5 Zustände.
⑴Nicht initialisierter Zustand. Nach dem Erstellen des XMLHttpRequest-Objekts befindet sich das Objekt zu diesem Zeitpunkt in einem nicht initialisierten Zustand Der Attributwert 🎜>readyState des Objekts ist 0. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte „PHP Chinesisch“-Website AJAX-Entwicklungshandbuch , um mehr zu erfahren) ⑵
Initialisierungsstatus. Nachdem Sie das Objekt XMLHttpRequest erstellt haben, verwenden Sie die Methode open(), um das Objekt HTTP Bei Anforderung befindet sich das Objekt in einem initialisierten Zustand. Zu diesem Zeitpunkt beträgt der Wert des Attributs readyState des Objekts XMLHttpRequest 1. ⑶
Datenstatus wird gesendet.Nach der Initialisierung des XMLHttpRequest-Objekts ist das Objekt bei Verwendung der send()-Methode zum Senden von Daten Im Status des Sendens von Daten ist der Attributwert readyState des Objekts XMLHttpRequest 2. ⑷
Datenstatus wird empfangen.WebNachdem der Server die Daten empfangen und verarbeitet hat, sendet er das zurückgegebene Ergebnis an den Client. Zu diesem Zeitpunkt befindet sich das XMLHttpRequest-Objekt im Zustand des Datenempfangs und der readyState des XMLHttpRequest-Objekts Der Attributwert ist 3. ⑸
Vollständiger Status. Nachdem dasXMLHttpRequest-Objekt den Empfang von Daten abgeschlossen hat, wechselt es in den Abschlussstatus. Zu diesem Zeitpunkt ist das -Objekt >readyState Der -Attributwert ist 4. Zu diesem Zeitpunkt werden die empfangenen Daten im Speicher des Client-Computers gespeichert und können mit dem Attribut responseText oder dem Attribut responseXml Attributdaten.
只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态。
XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象状态改变时（也就是readyState属性值改变时）激发。因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData(){
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState == 4) {
//设置获取数据的语句
}
}
4、设置获取服务器返回数据的语句
如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功，因此，要获取服务器返回数据的语句，还必须要先判断XMLHttpRequest对象的status属性值是否等于200，如以下代码所示：
if(xmlHttpRequst.status == 200){
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//document.write(xmlHttpRequest.responseXML);
}
注意：如果HTML文件不是在Web服务器上运行，而是在本地运行，则xmlHttpRequest.status的返回值为0。因此，如果该文件在本地运行，则应该加上xmlHttpRequest.status == 0的判断。
通常将以上代码放在响应HTTP请求状态变化的函数体内，如以下代码所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState==4)
{
//设置获取数据的语句
if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
{
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//docunment.write(xmlHttpRequest.responseXML);
}
}
}
5、发送HTTP请求
在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：
XMLHttpRequest.send(data)
其中data是个可选参数，如果请求的数据不需要参数，即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：
name=myName&value=myValue
只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数。（想看更多就到PHP中文网AJAX开发手册栏目中学习）
6、局部更新
在通过Ajax的异步调用获得服务器端数据之后，可以使用JavaScript或DOM来将网页中的数据进行局部更新。常用的局部更新的方式有以下3种：
⑴表单对象的数据更新
表单对象的数据更新，通常只要更改表单对象的value属性值，其语法代码如下所示：
FormObject.value = "新数值"
有关表单对象的数据更新的示例如以下代码所示：
//设置当XMLHttpRequest对象状态改变时调用的函数，注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData()
{
//判断XMLHttpRequest对象的readyState属性值是否为4，如果为4表示异步调用完成
if(xmlHttpRequest.readyState==4)
{
//设置获取数据的语句
if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0)
{
//使用以下语句将返回结果以字符串形式输出
document.write(xmlHttpRequest.responseText);
//或者使用以下语句将返回结果以XML形式输出
//docunment.write(xmlHttpRequest.responseXML);
}
}
}
⑵IE浏览器中标签间文本的更新
在HTML代码中，除了表单元素之外，还有很多其他的元素，这些元素的开始标签与结束标签之间往往也会有一点文字（如以下代码所示），对这些文字的更新，也是局部更新的一部分。
<p>文字</p> <span>文字</span> <p>文字</p> <label>文字</label> <b>文字</b> <i>文字</i>
在IE浏览器中，innerText或innerHTML属性可以用来更改标签间文本的内容。其中innerText属性用于更改开始标签与结束标签之间的纯文本内容，而innerHTML属性用于更改HTML内容。如以下代码所示：
<html>
<head>
<title>局部更新</title>
<script language="javascript" type="text/javascript"> function changeData(){ myp.innerText = "更新后的数据"; }
</script>
</head>
<body> <p id="mype">原数据</p> <input type="button" value="更新数据" onclick="changeData()">
</body>
</html>
⑶DOM技术的局部刷新
innerText和innerHTML两个属性都是IE浏览器中的属性，在Netscape浏览器中并不支持该属性。但无论是IE浏览器还是Netscape浏览器，都支持DOM。在DOM中，可以修改标签间的文本内容。
在DOM中，将HTML文档中的每一对开始标签和结束标签都看成是一个节点。例如HTML文档中有一个标签如下所示，那么该标签在DOM中称之为一个“节点”。
原数据
在DOM中使用getElementById()方法可以通过id属性值来查找该标签（或者说是节点），如以下语句所示：
var node = document.getElementById("myp");
注意：在一个HTML文档中，每个标签中的id属性值是不能重复的。因此，使用getElementById()方法获得的节点是唯一的。
在DOM中，认为开始标签与结束标签之间的文本是该节点的子节点，而firstChild属性可以获得一个节点下的第1个子节点。如以下代码可以获得
节点下的第1个子节点，也就是
标签与
标签之间的文字节点。node.firstChild
注意，以上代码获得的是文字节点，而不是文字内容。如果要获得节点的文字内容，则要使用节点的nodeValue属性。通过设置nodeValue属性值，可以改变文字节点的文本内容。完整的代码如下所示。
<html>
<head>
<title>局部更新</title>
<script language="javascript" type="text/javascript">
<!--
function changeData()
{
//查找标签（节点）
var node = document.getElementById("myp");
//在DOM中标签中的文字被认为是标签中的子节点
//节点的firstChild属性为该节点下的第1个子节点
//nodeValue属性为节点的值，也就是标签中的文本值
node.firstChild.nodeValue = "更新后的数据";
}
-->
</script>
</head>
</html>
注意：目前主流的浏览器都支持DOM技术的局部刷新。
7、完整的AJAX实例
<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">
<!--
var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
//定义一个用于创建XMLHttpRequest对象的函数
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
//IE浏览器的创建方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(windew.XMLHttpRequest)
{
//Netscape浏览器中的创建方式
xmlHttpRequest = new XMLHttpRequest();
}
}
//响应HTTP请求状态变化的函数
function httpStateChange()
{
//判断异步调用是否完成
if(xmlHttpRequest.readyState == 4)
{
//判断异步调用是否成功,如果成功开始局部更新数据
if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
{
//查找节点
var node = document.getElementById("myp");
//更新数据
node.firstChild.nodeValue = xmlHttpRequest .responseText;
}
else
{
//如果异步调用未成功,弹出警告框,并显示出错信息
alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);
}
}
}
//异步调用服务器段数据
function getData(name,value)
{
//创建XMLHttpRequest对象
createXMLHttpRequest();
if(xmlHttpRequest!=null)
{
//创建HTTP请求
xmlHttpRequest.open("get","ajax.text",true)
//设置HTTP请求状态变化的函数
xmlHttpRequest.onreadystatechange = httpStateChange;
//发送请求
xmlHttpRequest.send(null);
}
}
-->
</script>
</head>
<body>
<p id="myp">原数据</p>
<input type = "button" value = "更新数据" onclick = "getData()">
</body>
</html>
本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonWas sind die grundlegenden Prozesse von Ajax? Detaillierte Analyse des Grundprozesses von Ajax (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse