JavaScript combine AJAX_stream pour implémenter les compétences de streaming display_javascript

Lors de l'utilisation d'AJAX pour l'interaction d'informations, si les informations renvoyées par le serveur sont relativement volumineuses, l'affichage en streaming est plus convivial que l'affichage unifié une fois la transmission terminée.

Implémentation du streaming

Le principe est de régler un timer, de vérifier régulièrement l'état de l'objet AJAX et de mettre à jour le contenu si la transmission est terminée, d'annuler le timer.

Copier le code Le code est le suivant :

fonction ajax_stream (url, données, élément) {
var xmlHttp=null;
Si (window.XMLHttpRequest)
{// code pour IE7, Firefox, Opera, etc.
xmlHttp=nouveau XMLHttpRequest();
>
​ sinon si (window.ActiveXObject)
{//code pour IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
>
Si (xmlHttp==null)
          {
alert("Votre navigateur ne prend pas en charge XMLHTTP.");
         element.val('Votre navigateur ne prend pas en charge XMLHTTP. Cliquez sur le lien LOG pour suivre la procédure.');
Renvoie 0 ;
>
var xhr = xmlHttp;
xhr.open('POST', url, true);
// Si vous avez besoin de POSTer des données comme un formulaire HTML, veuillez utiliser setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send() :
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(données);
var minuterie;
Minuterie = window.setInterval(function() {
Si (xhr.readyState == XMLHttpRequest.DONE) {
               window.clearTimeout(timer);
>
          element.val(xhr.responseText);
}, 1000);
>

post-conversion des données

Étant donné que l'implémentation standard de l'envoi ne peut accepter que les types d'entrées suivants, les objets de données qui doivent être transférés doivent être convertis à l'avance au format chaîne ou FormData. Ce n'est pas aussi pratique que JQuery, mais comment fonctionne JQuery. l'implémenter au milieu de la transmission ? La réponse à l'événement n'est pas encore connue, vous ne pouvez donc pas l'utiliser, ni convertir tous les objets en JSON.

Copier le code Le code est le suivant :

annuler envoyer();
void send (données ArrayBuffer);
void send (données Blob);
void send(Données du document);
void send(DOMString? data);
void send (données FormData);

Ce qui suit est le code de conversion. Si le navigateur prend en charge FormData, il sera converti, sinon il sera converti en chaîne.

Copier le code Le code est le suivant :

fonction ajax_generate_data(jsobj) {
var je;
Si (window.FormData) {
      var data = new FormData();
           pour moi dans jsobj {
              data.append(i,jsobj[i]);
>
} autre {
      var data = '';
        var datas = [];
           pour moi dans jsobj {
// pour les valeurs afin que les & contenus dans les chaînes ne cassent pas le format
              var value = encodeURIComponent(jsobj[i]);
              datas.append(i '=' value);
>
          data = datas.join('&')
>
console.log(données);
Renvoyer les données ;
>