Maison  >  Article  >  interface Web  >  Comment implémenter ajax en javascript

Comment implémenter ajax en javascript

coldplay.xixi
coldplay.xixioriginal
2021-04-30 11:08:474739parcourir

Comment implémenter ajax en JavaScript : utilisez d'abord l'objet XMLHttpRequest pour échanger des données avec le serveur en arrière-plan ; puis obtenez les données du serveur et enfin ajoutez l'en-tête http et le type d'encodage du contenu lors de l'envoi d'informations à ; le serveur.

Comment implémenter ajax en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Méthode Javascript pour implémenter ajax :

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

la méthode open(method, url, async) nécessite trois paramètres :

méthode : où envoyer le request Méthode à utiliser (GET ou POST) ;

Comparé à POST, GET est plus simple et plus rapide et fonctionnera dans la plupart des cas. Cependant, veuillez utiliser les requêtes POST dans les situations suivantes :

Impossible d'utiliser les fichiers de cache (mise à jour de fichiers ou de bases de données sur le serveur)

Envoi de grandes quantités de données au serveur (POST n'a pas de limite de taille de données)

Lors de l'envoi d'une entrée utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET

URL : Spécifie l'URL du script côté serveur (le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script serveur, tel que .asp et .php (peut effectuer des tâches sur le serveur avant de renvoyer la réponse) ;

async : spécifie que la requête doit être traitée de manière asynchrone (true) ou de manière synchrone (false true) ; tâches en attendant la réponse du serveur Script, traite la réponse lorsque la réponse est prête ; false signifie attendre la réponse du serveur avant de l'exécuter.

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn