Quels sont les avantages et les inconvénients d'Ajax ? Comment utiliser correctement ajax

Cet article parle principalement de l'introduction de l'encapsulation ajax, ainsi que de la requête asynchrone d'ajax, regardons maintenant cet article ensemble

Ajax

En parlant de. ajax Qu'est-ce qu'Ajax exactement ? Ajax est une technologie permettant de créer des applications Web interactives.

Les scénarios d'application d'ajax incluent : (carte) mise à jour en temps réel, validation de formulaire, etc....

Avantages et inconvénients d'ajax :

Avantages : 1. Réaliser des mises à jour partielles (sans rafraîchissement), 2. Réduire la pression sur le serveur

Inconvénients : 1. Détruire le mécanisme d'avance et de retour du navigateur (à cause du mécanisme de mise à jour automatique ajax)

2. S'il y a trop de requêtes Ajax, la page se chargera également lentement.

3. La prise en charge des moteurs de recherche est relativement faible.

4. Le problème de sécurité d'ajax n'est pas très bon (il peut être résolu avec le cryptage des données).

Tout d'abord, si vous souhaitez utiliser ajax, vous devez avoir le support de l'environnement back-end (côté serveur).

Requête HTTP

Il existe deux manières de demander une requête HTTP

GET : utilisé pour obtenir des données, GET consiste à transmettre des données sur l'URL (les choses après le URL), la capacité de stockage est petite et le facteur de sécurité est relativement faible.

POST : utilisé pour télécharger des données, la sécurité POST est généralement meilleure que (GET), et la capacité est presque illimitée (principalement utilisée pour les formulaires).

Utilisation d'Ajax

Il y a 4 étapes pour utiliser ajax : 1. Créer ajax, 2. Se connecter au serveur, 3. Envoyer une requête, 4. Accepter la valeur de retour .

Création d'Ajax

Lors de la création d'ajax, la compatibilité doit être prise en compte IE6 et supérieur : new XMLHttpRequest(), IE6 : new ActiveXObject("Microsoft.XMLHTTP")

<.>

Traitement compatible

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}

Connexion au serveur

L'objet ajax xhr créé ci-dessus , utilisez xhr open("Méthode de requête (GET/POST)", chemin d'URL, "Asynchrone/Synchronous").

Le troisième paramètre : true===》asynchrone, false===》synchrone. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois

Colonne du Manuel de développement AJAX pour en savoir)

Lorsque la méthode de requête est POST, le code est écrit comme ci-dessus

;

Lorsque la méthode de requête est GET, utilisez xhr.open ("Méthode de requête (GET/POST)", chemin url + "?" request data + , "asynchrone/synchrone").

Envoyer une requête

Utilisez xhr.send() pour envoyer une requête

Lorsque la méthode de requête est GET, la requête est xhr.send (null ).

Lorsque la méthode de requête est POST, la requête à envoyer est xhr.send (demande de données).

De plus, lors de l'utilisation de POST, vous devez ajouter

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

sur xhr.send (demander des données) pour recevoir la valeur de retour

Lorsque vous utilisez ajax, vous souhaiterez utiliser un événement readystatechange : lorsque la requête est envoyée au serveur, nous devons effectuer certaines opérations basées sur la réponse.

Lorsque readystatechange change, cet événement sera déclenché.

        readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成  已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成  可以在客户端用了。

        responseText：返回请求的内容。

        status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

        封装Ajax

        在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法

        下面是ajax封装，并举例：

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

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!