Verständnis von XHR-Objekten in Ajax-Serien

Vorherige Wörter

1999 veröffentlichte Microsoft IE5, der erstmals eine neue Funktion einführte: Javascript-Skripte können HTTP-Anfragen an den Server initiieren. Diese Funktion erregte damals keine große Aufmerksamkeit. Erst mit der Veröffentlichung von Gmail im Jahr 2004 und Google Map im Jahr 2005 erregte sie große Aufmerksamkeit. Im Februar 2005 wurde der Begriff Ajax erstmals offiziell vorgeschlagen und bezog sich auf eine Reihe von Entwicklungspraktiken rund um diese Funktion. Seitdem ist Ajax zum Synonym für skriptinitiierte HTTP-Kommunikation geworden, und W3C veröffentlichte 2006 auch seinen internationalen Standard. Dieser Artikel ist der erste Artikel in der Ajax-Reihe – Übersicht über XHR-Objekte

Ajax ist die Abkürzung für asynchrones Javascript und XML. Die chinesische Übersetzung ist asynchrones Javascript und XML Die zusätzlichen Daten des Servers, ohne dass die Seite entladen werden muss, führen zu einer besseren Benutzererfahrung. Obwohl der Name XML enthält, hat die Ajax-Kommunikation nichts mit dem Datenformat zu tun.

Ajax umfasst die folgenden Schritte: 1. Erstellen Sie ein AJAX-Objekt. 2. Senden Sie eine HTTP-Anfrage. 3. Empfangen Sie die vom Server zurückgegebenen Daten ; 4. Aktualisieren Sie die Webseitendaten

Zusammenfassend lässt sich sagen, dass Ajax eine HTTP-Anfrage über das native XMLHttpRequest-Objekt sendet und nach Erhalt der vom Server zurückgegebenen Daten

verarbeitet

Erstellen

Der Kern der Ajax-Technologie ist das XMLHttpRequest-Objekt (kurz XHR), eine Funktion, die erstmals von Microsoft eingeführt wurde. Andere Browseranbieter stellten später die gleiche Implementierung bereit. XHR bietet eine flüssige Schnittstelle zum Senden von Anforderungen an den Server und zum Parsen der Serverantwort. Es kann mehr Informationen vom Server asynchron abrufen, was bedeutet, dass der Benutzer nach dem Klicken neue Daten abrufen kann, ohne die Seite zu aktualisieren

IE5 Es war der erste Browser, der XHR-Objekte einführte. In IE5 wird das XHR-Objekt über ein ActiveX-Objekt in der MSXML-Bibliothek implementiert, während IE7+ und andere Standardbrowser native XHR-Objekte unterstützen

Das Erstellen eines XHR-Objekts wird auch als Instanziieren eines XHR-Objekts bezeichnet, da XMLHTTPRequest() dies ist ein Konstrukteur. Im Folgenden finden Sie die kompatible Methode zum Erstellen eines XHR-Objekts

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

[Hinweis] Wenn Sie N verschiedene Anfragen erstellen möchten, müssen Sie N verschiedene XHR-Objekte verwenden. Es ist natürlich möglich, ein vorhandenes XHR-Objekt wiederzuverwenden, aber dadurch werden alle zuvor ausstehenden Anfragen über dieses Objekt beendet

Anfrage senden

open()

Bei Verwendung eines XHR-Objekts ist die erste aufzurufende Methode open(), wie unten gezeigt. Diese Methode akzeptiert 3 Parameter

xhr.open("get","example.php", false);

1 . Der erste Parameter der open()-Methode wird verwendet, um die Methode zum Senden der Anfrage anzugeben. Bei dieser Zeichenfolge wird die Groß- und Kleinschreibung nicht beachtet, es werden jedoch normalerweise Großbuchstaben verwendet. „GET“ und „POST“ werden weithin unterstützt

„GET“ wird für reguläre Anfragen verwendet. Es ist geeignet, wenn die URL die angeforderte Ressource vollständig angibt, wenn die Anfrage keine Nebenwirkungen auf den Server hat und wann Die Antwort des Servers ist verfügbar.

Die Methode „POST“ wird häufig in HTML-Formularen verwendet. Der Anfragetext enthält zusätzliche Daten, die häufig in einer Datenbank auf dem Server gespeichert werden. Wiederholte POST-Anfragen für dieselbe URL erhalten möglicherweise unterschiedliche Antworten vom Server, und Anfragen, die diese Methode verwenden, sollten nicht zwischengespeichert werden

Zusätzlich zu „GET“ und „POST“ können die Parameter auch „HEAD“ und sein „OPTIONEN“ „PUT“. Aufgrund von Sicherheitsrisiken ist die Verwendung von „CONNECT“, „TRACE“ und „TRACK“ verboten

[Hinweis] Die ausführliche Einführung in die 8 gängigen Methoden des HTTP-Protokolls wandert hierher

2 Der zweite Parameter der open()-Methode ist die URL, die relativ zur aktuellen Seite ist, auf der der Code ausgeführt wird, und kann nur Anfragen an URLs in derselben Domäne senden, die denselben Port und dasselbe Protokoll verwenden. Wenn zwischen der URL und der Seite, die die Anfrage initiiert, ein Unterschied besteht, tritt ein Sicherheitsfehler auf

3. Der dritte Parameter der open()-Methode ist ein boolescher Wert, der angibt, ob die Anfrage asynchron gesendet werden soll. Wenn nicht ausgefüllt, ist der Standardwert wahr. Zeigt asynchrones Senden an

4. Wenn Sie eine passwortgeschützte URL anfordern, übergeben Sie den Benutzernamen und das Passwort, die für die Authentifizierung verwendet werden, als 4. und 5. Parameter an die open()-Methode

send()

Die send()-Methode empfängt einen Parameter, bei dem es sich um die Daten handelt, die als Anforderungstext gesendet werden sollen. Nach dem Aufruf der send()-Methode wird die Anfrage an den Server gesendet

Wenn es sich um die GET-Methode handelt, hat die send()-Methode keine Parameter, oder der Parameter ist null, wenn es sich um die POST-Methode handelt. Die Parameter der send()-Methode sind diejenigen, die gesendet werden sollen. Daten

xhr.open("get", "example.txt", false);
xhr.send(null);

Antwort empfangen

Eine vollständige HTTP-Antwort besteht bestehend aus Statuscode, Antwort-Header-Sammlung und Antworttext. Nach Erhalt der Antwort können diese über die Eigenschaften und Methoden des XHR-Objekts verwendet werden. Es gibt hauptsächlich die folgenden 4 Eigenschaften

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

　　在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

　　无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null

if((xhr.status >=200 && xhr.status 

 

同步

　　如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可

　　同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结

<button>获取信息</button>
<div></div>
<script>
btn.onclick = function(){
    //创建xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
    }
    //发送请求
    xhr.open(&#39;get&#39;,&#39;/uploads/rs/26/ddzmgynp/message.xml&#39;,false);
    xhr.send();
    //同步接受响应
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            //实际操作
            result.innerHTML += xhr.responseText;
        }
    }
}
</script>

//message.xml
<p>hello world</p>

 

 

异步

　　如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

　　理论上，只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

<button>获取信息</button>
<div></div>
<script>
btn.onclick = function(){
    //创建xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操作
                result.innerHTML += xhr.responseText;
            }
        }
    }
    //发送请求
    xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
    xhr.send();
}
</script>

//message.xml
<p>hello world</p>

 

超时

　　XHR对象的timeout属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。该属性默认等于0，表示没有时间限制

　　如果请求超时，将触发ontimeout事件

　　[注意]IE8-浏览器不支持该属性

xhr.open('post','test.php',true);
xhr.ontimeout = function(){
    console.log('The request timed out.');
}
xhr.timeout = 1000;
xhr.send();

 

优化

　　使用AJAX接收数据时，由于网络和数据大小的原因，并不是立刻就可以在页面中显示出来。所以，更好的做法是，在接受数据的过程中，显示一个类似loading的小图片，并且禁用按钮；当数据完全接收后，再隐藏该图片，并启用按钮

<button>获取信息</button>
<img  src="/static/imghw/default1.png" data-src="data:image/gif;base64,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" class="lazy" alt="Verständnis von XHR-Objekten in Ajax-Serien" >
<div></div>
<script>
var add = (function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
})();
btn.onclick = function(){
    img.style.display = &#39;inline-block&#39;;
    btn.setAttribute(&#39;disabled&#39;,&#39;&#39;);
    //创建xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
              img.style.display = &#39;none&#39;;
              btn.removeAttribute(&#39;disabled&#39;);
              var data = JSON.parse(xhr.responseText);
              var sum = add() - 1;
              if(sum < data.length){
                result.innerHTML += data[sum];    
              }
            }
        }
    }
    //发送请求
    xhr.open(&#39;get&#39;,&#39;data.php&#39;,true);
    xhr.send();
}
</script>

<?php echo json_encode([1,2,3,4,5]);
?>

Endlich

Durch die Demonstration von Beispielen haben wir festgestellt, dass der Inhalt des Ajax-Frontends selbst nicht schwierig ist. Da Ajax jedoch einige Back-End- und Netzwerkkenntnisse erfordert, ist es nicht einfach zu erlernen. Zukünftige Blog-Beiträge werden nach und nach die wichtigsten Inhalte von Ajax ausführlich vorstellen

Das obige ist der detaillierte Inhalt vonVerständnis von XHR-Objekten in Ajax-Serien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!