Zusammenfassung der Wissenspunkte von jQuerys AJAX

Dieses Mal hat der Herausgeber die Wissenspunkte von AJAX in jQuery für alle zusammengestellt. Das Folgende ist eine Zusammenfassung der Wissenspunkte.

1. AJAX-Konzept
Asynchrones Javascript und XML (asynchrones JavaScript und XML)
AJAX ist keine Sprache, sondern eine Möglichkeit, interaktive Webanwendungen zu erstellen Entwicklungstechnologie
AJAX ist eine Kombination aus Javascript, Austausch und verwandte Operationen;
3. Verwenden Sie das XMLHttpRequest-Objekt für die asynchrone Datenkommunikation
4 >5. Verwenden Sie JavaScript, um alle Daten zu binden und zu verarbeiten.
Was ist XML?
XML bezieht sich auf Extensible Markup Language (EXtensible Markup Language).
XML ist eine Auszeichnungssprache, die HTML sehr ähnlich ist.
XML ist konzipiert um Daten zu übertragen, nicht um Daten anzuzeigen
Das XML-Tag ist nicht vordefiniert. Sie müssen die Beschriftungen selbst definieren.
XML ist so konzipiert, dass es selbstbeschreibend ist.
XML ist ein vom W3C empfohlener Standard
Was ist XSLT?
XSLT bezieht sich auf XSL-Transformationen [1]
XSLT ist der wichtigste Teil von XSL
XSLT kann ein XML-Dokument in ein anderes XML-Dokument konvertieren
XSLT verwendet XPath bei der XML-Navigation im Dokument
🎜>
Benutzerbetriebsprozess:
Benutzerbrowser->JavaScript-Instanziierung des XmlHttpRequest-Objekts->AJAX-Engine->http-Anfrage->Webserver->Backend-Geschäftssystem
Systemrückgabeprozess ：
Backend-Geschäftssystem->Backend-Server->Webserver->HTML-, XML-, JSON-Daten->AJAX-Engine->HTML+CSS (Wel-Browser)->Benutzerbrowser




3. Vor- und Nachteile von AJAX:Vorteile der asynchronen Verarbeitung von AJAX:Reduzieren Sie die Belastung des Servers im Allgemeinen nur, was benötigt wird Server. Daten
Keine Aktualisierung der Seitenaktualisierung, wodurch die Wartezeit der Benutzer verkürzt wird
Bessere Kundenerfahrung, einige Serverarbeiten können auf den Client übertragen werden, wodurch Netzwerkressourcen gespart und die Benutzererfahrung verbessert werden
Keine Plattformeinschränkungen
Fördern Sie die Trennung von Anzeige und Daten
Nachteile der asynchronen AJAX-Verarbeitung:
Es gibt viel JS auf der Seite, was Suchmaschinen Schwierigkeiten bereitet
AJAX beendet die Funktionen „Zurück“ und „Verlauf“, was eine Zerstörung der Browser-Mechanismus Es liegt ein domänenübergreifendes Problem vorNur ​​utf-8-codierte Daten können übertragen und empfangen werden


1. AJAX-Implementierungsschritte




window.open(URL,name,features,replace)

URL:
Eine optionale Zeichenfolge, die die URL des Dokuments angibt, das im neuen angezeigt werden soll Fenster. Wenn dieser Parameter
weggelassen wird oder sein Wert eine leere Zeichenfolge ist, wird im neuen Fenster kein Dokument angezeigt.

Name:Eine optionale Zeichenfolge, die eine durch Kommas getrennte Liste von Zeichen einschließlich ist Zahlen, Buchstaben und der Unterstrich , der den Namen des neuen Fensters angibt. Dieser Name kann als Wert des Zielattributs der Tags 3499910bf9dac5ae3c52d5ede7383485 verwendet werden. Wenn dieser Parameter ein vorhandenes Fenster angibt, erstellt die open()-Methode kein neues Fenster mehr, sondern gibt lediglich einen Verweis auf das angegebene Fenster zurück. In diesem Fall werden Funktionen ignoriert.
features: Eine optionale Zeichenfolge, die die Standardbrowserfunktionen angibt, die im neuen Fenster angezeigt werden sollen. Wenn dieser Parameter weggelassen wird,
verfügt das neue Fenster über alle Standardfunktionen. In der Tabelle mit den Fenstereigenschaften beschreiben wir das Format dieser Zeichenfolge im Detail

ersetzen Sie:Ein optionaler boolescher Wert. Gibt an, ob eine in ein Fenster geladene URL einen neuen Eintrag im Browserverlauf des Fensters erstellt,
oder den aktuellen Eintrag im Browserverlauf ersetzt. Die folgenden Werte werden unterstützt:
true – URL ersetzt den aktuellen Eintrag im Browserverlauf. false – URL erstellt einen neuen Eintrag im Browserverlauf

send()send() wird verwendet, um Daten an einen verbundenen Socket zu senden. Wenn kein Fehler vorliegt, ist der Rückgabewert Die Gesamtzahl der gesendeten Daten,
, andernfalls wird SOCKET_ERROR zurückgegeben. [1] Send ist ebenfalls ein englisches Wort.


responseText-Attribut:


Die Textversion der vom Serverprozess zurückgegebenen Daten
Der DOM-kompatible XML-Dokumentobjektstatusserver Vom Serverprozess zurückgegebener Statuscode, z. B.: 404 = „Datei nicht gefunden“.
Wenn Sie eine xmlhttp-Anfrage an das Ajax-Hintergrundprogramm senden, verarbeitet das Hintergrundprogramm die Anfrage nach dem Empfang Ist der Vorgang abgeschlossen, kann eine Datenzeichenfolge an den Vordergrund zurückgegeben werden.
Dies ist im Hintergrundprogramm C# im Allgemeinen Response.Write("string"). In PHP wird echo verwendet ist eine Ausgabezeichenfolge
, da ein Zeichen ausgegeben wird. Manchmal erhalten Sie jedoch ein Array, das Sie jedoch mit der JSON-Technologie in PHP serialisieren müssen, um das Array in eine
-Zeichenfolge umzuwandeln Front-End und das Front-End-Attribut respText können diese Zeichenfolge empfangen. Verwenden Sie dann die JSON-Technologie in JS, um diese Zeichenfolge zu konvertieren
Konvertieren Sie es erneut in ein von JS erkanntes Objekt für den Betrieb (der JSON-Datenübertragungstyp wird grundsätzlich von jeder Sprache erkannt und kann für die Übertragung und Konvertierung in verschiedenen Sprachen verwendet werden)


Initialisieren Sie das XMLHttpRequest-Objekt

  if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest gibt eine HTTP-Anfrage aus

http_request.open("GET|POST","test.php?GET方式传值",true);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
         //用于向一个已经连接的socket发送数据
         //如果是POST传输方式要把值写在send()函数里
          http_request.send(向一个已连接的套接口发送数据);
      XMLHttpRequest取得响应数据并显示
       http_request.onreadystatechange=function(){
if(http_request.readyState==4  && http_request.status==200){
                    $("p").text(http_request.responseText)
         }
      }

Beispiel:
//GET-Methode
Parameter 1: Stellt dar, ob die Anfrage in get gesendet werden soll oder Post-Methode Parameter 2: An welche URL soll die Anfrage gesendet werden? Parameter 3: true stellt eine asynchrone Anfrage dar, false stellt eine synchrone Anfrage dar

http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();

Sende eine POST-Anfrage

var username=$("input[name='user_name']");

Parameter 1: stellt die Methode „Anfrage per Get oder Post senden“ dar. Parameter 2: An welche URL die Anfrage gesendet werden soll. Parameter 3: „true“ stellt eine asynchrone Anfrage dar, „false“ stellt eine synchrone Anfrage dar

http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Wenn es sich um eine POST-Übertragungsmethode handelt, schreiben Sie den Wert in die send( )-Funktion

http_request.send({username:username});

4. JSON
Javascript-Objekt Notation, ist ein leichtes Datenaustauschformat
JSON alle Sprachen kennen es, also verwenden Sie es, um Daten in verschiedene Sprachen zu konvertieren
JSON unterstützt mehrere Sprachen​​
Format
{ key:value,key:value,...} Objektformat
[{key:value,key:value,.....},{key:value,key:value,.....}, ...] Array-Format
PHP-Verarbeitung:
$json=json_encode($array) //Variablen in Json kodieren
$array=json_decode($json) //Json-Daten dekodieren und in PHP konvertieren Variablen
JavaScript-Verarbeitung:
eval(' ​​('+json+')') //Führen Sie eine bestimmte Zeichenfolge gemäß JS-Code aus
Beispiel:

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串

5. AJAX-Anwendung in jQuery 1
. Vergessen Sie nicht,

$.ajax({
            //你要传的php文件的路径
            url:"test1.php",    ('服务器url地址')
            //以get方式传输拼接字符串
            data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
            //以什么方式传输
            type:'get',('post|get')
            //传输返回的数据类型
            dataType:'json',  ('xml|html|text|json|script')
            //展示 数据的方式
            success:function(res){
                $('h1').text('用户名为：'+res.user_name);
            },
                //错误信息
                error:function(xhr){
                },
              timeout:2000,
              async:true,
              cache:false
})

6. AJAX-Anwendung in jQuery 2

$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

Beispiel zu schreiben :

            //'服务器url地址'，"json格式或字符串格式"
        $.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
               //如果后台发过来的值跟这里的值相等让他执行下面代码
                if(data.status=='ok'){
                    alert("登陆成功");
                    location.href="http://www.wl.com";
                }else{
                    alert("登陆失败");
                }
        //"xml|html|json|text|script"类型
        },'json')

7. AJAX-Anwendung in jQuery 3
serialize() Der Inhalt der Sequenztabellentabelle sind Zeichenfolgen und die serialisierten Daten sind wird für Ajax-Anfragen verwendet

$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

Beispiel:

//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
        // 然后用serialize()来拿里面所有有值
        $.post("test1.php",$('form').serialize(),function(res){
            //如果后台发过来的值跟这里的值相等让他执行下面代码
            if(res.status=='ok'){
                alert("登陆成功");
                location.href="http://www.wl.com";
            }else{
                alert("登陆失败");
            }
            //"xml|html|json|text|script"类型
        },'json')

Ausgabe in PHP empfangen und verarbeiten

try{
    $pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
    $pdo->exec("set names utf8");
    $sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
    if($sen->rowCount()>0){
       // $arr=$sen->fetch(PDO::FETCH_ASSOC);
        //echo json_encode($arr);
        //echo 'yes';
       $arr['status']='ok';
    }else{
        echo 'no';
    }
    //切记用json数据类型传输
    echo json_encode($arr);
}catch (PDOException $e){
    echo $e->getMessage();
}

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte von jQuerys AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!