Was sind die Vor- und Nachteile von Ajax? Wie man Ajax richtig verwendet

In diesem Artikel geht es hauptsächlich um die Einführung der Kapselung Ajax sowie die asynchrone Anforderung von Ajax. Schauen wir uns nun gemeinsam diesen Artikel an

Ajax

Apropos Ajax Was genau ist Ajax? Ajax ist eine Technologie zur Erstellung interaktiver Webanwendungen.

Zu den Anwendungsszenarien von Ajax gehören: (Karten-)Echtzeitaktualisierung, Formularvalidierung usw....

Vor- und Nachteile von Ajax:

Vorteile : 1. Erzielen Sie Teilaktualisierungen (ohne Aktualisierung), 2. Reduzieren Sie den Druck auf den Server

Nachteile: 1. Zerstören Sie den Vorwärts- und Rückwärtsmechanismus des Browsers (aufgrund des automatischen Aktualisierungsmechanismus von Ajax)

2. Bei zu vielen Ajax-Anfragen wird die Seite ebenfalls langsam geladen.

3. Die Suchmaschinenunterstützung ist relativ gering.

4. Das Sicherheitsproblem von Ajax ist nicht sehr groß (es kann durch Datenverschlüsselung gelöst werden).

Wenn Sie Ajax verwenden möchten, müssen Sie zunächst über die Unterstützung der Back-End-Umgebung (Serverseite) verfügen.

HTTP-Anfrage

Es gibt zwei Möglichkeiten, eine HTTP-Anfrage anzufordern

GET: Wird zum Abrufen von Daten verwendet. GET dient zum Übergeben von Daten an die URL (Dinge danach). URL), Die Speicherkapazität ist gering und der Sicherheitsfaktor relativ gering.

POST: Wird zum Hochladen von Daten verwendet und ist im Allgemeinen besser als (GET), und die Kapazität ist nahezu unbegrenzt (wird hauptsächlich für Formulare verwendet).

Verwendung von Ajax

Es gibt 4 Schritte zur Verwendung von Ajax: 1. Ajax erstellen, 2. Mit dem Server verbinden, 3. Eine Anfrage senden, 4. Den Rückgabewert akzeptieren .

Erstellen von Ajax

Beim Erstellen von Ajax muss die Kompatibilität mit IE6 und höher berücksichtigt werden: new XMLHttpRequest(), IE6: new ActiveXObject("Microsoft.XMLHTTP")

Kompatible Verarbeitung

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

Verbindung zum Server herstellen

Das oben erstellte Ajax-Objekt xhr verwenden xhr.open( „Anforderungsmethode (GET/POST)“, URL-Pfad, „asynchron/synchron“).

Der dritte Parameter: true===》asynchron, false===》synchron. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AJAX-Entwicklungshandbuch der PHP-Website, um mehr zu erfahren)

Wenn die Anforderungsmethode POST ist, wird der Code wie oben geschrieben;

Wenn die Anforderungsmethode GET ist, verwenden Sie xhr.open („Anforderungsmethode (GET/POST)“, URL-Pfad + „? Anforderungsdaten +, „asynchron/synchron“).

Anfrage senden

Verwenden Sie xhr.send(), um eine Anfrage zu senden

Wenn die Anfragemethode GET ist, lautet die Anfrage xhr.send (null ).

Wenn die Anforderungsmethode POST ist, lautet die zu sendende Anforderung xhr.send (Anforderungsdaten).

Darüber hinaus müssen Sie bei Verwendung von POST

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

auf xhr.send hinzufügen (Daten anfordern), um die Rücksendung zu erhalten Wert

Wenn Sie Ajax verwenden, möchten Sie ein Ereignis „readystatechange“ verwenden: Wenn die Anforderung an den Server gesendet wird, müssen wir einige antwortbasierte Vorgänge ausführen.

Wenn sich readystatechange ändert, wird dieses Ereignis ausgelöst.

        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使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWas sind die Vor- und Nachteile von Ajax? Wie man Ajax richtig verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!