JavaScript --- Balises Les balises d'image envoient des données

Introduction

Cette technique est très similaire à l'injection de script dynamique. Utilisez JavaScript pour créer un nouvel objet Image et définissez l'attribut src sur l'URL du script sur le serveur. L'URL contient les données de la paire clé-valeur que nous souhaitons renvoyer via GET. Veuillez noter que l'élément img n'est pas créé ou inséré dans le DOM

var url = '/status_tracker.php';var params = [        
'step=2',        
'time=1248027314'
    ]
    (new Image()).src = url + '?' + params.join('&');

Le serveur recevra les données et les enregistrera. , il n'a pas besoin de l'envoyer au client. Le client envoie des messages de retour, donc aucune image ne sera réellement affichée. C'est le moyen le plus efficace de renvoyer des informations au serveur. Sa consommation de performances est très faible et celle du serveur. les erreurs secondaires n'affecteront pas du tout le client.

Les balises d'image sont simples, mais cela signifie également qu'elles sont limitées dans ce qu'elles peuvent faire. Vous ne pouvez pas envoyer de données POST et les URL ont une longueur maximale. la longueur des données que vous pouvez envoyer est donc un peu limitée. Vous pouvez recevoir les données renvoyées par le serveur, mais elles sont limitées à très peu de manières. Une façon consiste à écouter l'événement Image de l'objet load, qui vous dira si le serveur a bien reçu les données. Vous pouvez également vérifier l'image renvoyée par la largeur et la hauteur du serveur (s'il s'agit d'une image) et utiliser ces chiffres pour vous informer de l'état du serveur. Par exemple, une largeur. de 1 signifie "succès", et une largeur de 2 signifie "réessayer".

Si vous n'avez pas besoin de renvoyer des données dans la réponse, vous devez envoyer un code d'état 204 No Content sans le corps du message, ce qui évitera au client de continuer à attendre le corps du message qui n'arrive jamais

Exemple

var url = '/status_tracker.php';var params = [        
'step=2',        
'time=1248027314'
    ]
    
var beacon =  new Image();
beacon.src = url + '?' + params.join('&');

beacon.onload = function( ) {
    if (this.width == 1) {        //成功
    } else if (this.width == 2) {        //失败
    }
}

beacon.onerror = function() {
    //出错
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!