Front-End- und Back-End-Interaktion Ajax

Ajax

1 Das Grundkonzept des Servers

1.1-Server

Beim Surfen im Internet wird der Computer, der für die Speicherung und Bereitstellung von Ressourcen für die Außenwelt verantwortlich ist , als Server bezeichnet.

Beim Surfen im Internet wird der Computer, der für den Erhalt und Verbrauch von Ressourcen verantwortlich ist , als Client bezeichnet.

1.2 URL-Adresse

Die URL (vollständiger Name lautet UniformResourceLocator) wird auf Chinesisch als Uniform Resource Locator bezeichnet und wird verwendet, um den eindeutigen Speicherort jeder Ressource im Internet anzugeben. Nur über die URL-Adresse kann der Browser den Speicherort der Ressource korrekt lokalisieren und somit erfolgreich auf die entsprechende Ressource zugreifen.

Eine URL-Adresse besteht im Allgemeinen aus drei Teilen:

① Kommunikationsprotokoll zwischen Client und Server (http/https)

② Der Name des Servers , auf dem die Ressource gespeichert ist

③ Der spezifische Speicherort der Ressource auf dem Server

1.3 Ressourcenanforderungsmethode

Wenn der Client den Server anfordert, gibt es viele Möglichkeiten zum Anfordern, und die beiden häufigsten Methoden sind Get- und Post- Anfragen.

• Get-Anfragen werden normalerweise verwendet, um Serverressourcen abzurufen (Ressourcen vom Server anzufordern).
• Post-Anfragen werden normalerweise verwendet , um Daten an den Server zu senden (Ressourcen an den Server zu senden).

2 Ajax verstehen

Der vollständige Name von Ajax lautet Asynchronous JavaScript And XML (asynchrones JavaScript und XML).

XMLHttpRequestDas weit verbreitete Verständnis lautet: Die Art und Weise, wie Objekte und Server für die Interaktion mit Daten auf Webseiten verwendet werden, ist Ajax

3 Schnittstelle und Schnittstellendokument

Wenn Sie Ajax zum Anfordern von Daten verwenden, wird die angeforderte URL-Adresse als Datenschnittstelle (als Schnittstelle bezeichnet) bezeichnet . Gleichzeitig muss jede Schnittstelle über eine Anforderungsmethode verfügen .

Das Schnittstellendokument ist, wie der Name schon sagt, das Beschreibungsdokument der Schnittstelle , auf dessen Grundlage wir die Schnittstelle nennen . Das Schnittstellendokument enthält eine Beschreibung der Schnittstellen-URL , der Parameter und des Ausgabeinhalts . Wir können die Funktion der Schnittstelle und den Aufruf der Schnittstelle leicht erkennen, indem wir uns auf das Schnittstellendokument beziehen.

4 Grundlegende Verwendung von XMLHttpRequest

XMLHttpRequest (kurz xhr) ist ein vom Browser bereitgestelltes JavaScript-Objekt, über das Datenressourcen auf dem Server angefordert werden können .

Anfragemethode:

ERHALTEN	POST	Anmerkung
GET-Anfragen sind auf Abfragen ausgerichtet (Daten abrufen...)	Bei POST-Anfragen geht es vor allem um die Übermittlung von Daten (Registrierung, Änderung, Löschung ...).	Unterscheiden Sie GET und POST semantisch
Die von GET angezeigten übertragenen Parameter werden direkt nach der Anforderungsadresse gespleißt, was eine schlechte Sicherheit und einen schlechten Datenschutz aufweist	POST überträgt implizit Parameter und wird nicht an der Anforderungsadresse angezeigt, was eine gute Sicherheit bietet.	POST-Anfragen werden im JSON-Format weitergeleitet
Für die Länge der GET-Anforderungsdaten gibt es eine Größenbeschränkung, die je nach Browser bei 2 KB bis 8 KB liegt	POST-Anfragen sind unbegrenzt
GET-Anfragen können zwischengespeichert werden	POST-Anfragen werden nicht zwischengespeichert

Die readyState-Eigenschaft des xhr-Objekts :

0	Anfrage nicht initialisiert
1	Serververbindung hergestellt
2	Anfrage erhalten
3	Bearbeitung der Anfrage
4	Die Anfrage ist abgeschlossen und die Antwort ist bereit

4.1 Verwenden Sie xhr, um eine Get-Anfrage zu initiieren

Schritt:

• Erstellen Sie ein XHR-Objekt
• Rufen Sie die Funktion xhr.open() auf
• Rufen Sie die Funktion xhr.send() auf
• Hören Sie sich das Ereignis xhr.onreadystatechange an

// 不带参数的GET请求
        // 1. 创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 2. 调用open函数
        // 不带参数的GET请求
        // xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
        // 带参数的GET请求
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
        // 3. 调用send函数
        xhr.send();
        // 4. 监听onreadystatechange 事件
        xhr.onreadystatechange = function() {
    
    
            // readyState 表示当前ajax请求所处的状态
            if (xhr.readyState === 4 && xhr.status === 200) {
    
    
                console.log(xhr.responseText);
            }
        }

4.2 Verwenden Sie xhr, um eine POST-Anfrage zu initiieren

Schritt:

• Erstellen Sie ein XHR-Objekt
• Rufen Sie die Funktion xhr.open() auf
• Legen Sie das Content-Type-Attribut fest (feste Schreibweise)
• Rufen Sie die Funktion xhr.send() auf und geben Sie die zu sendenden Daten an
• Hören Sie sich das xhr.onreadystateChange-Ereignis an

		// 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest();
        // 2. 调用 open 函数
        xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
        // 3. 设置 Content-Type 属性
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        // 4. 调用 send 函数
        xhr.send("bookname=水浒传转&author=施耐庵呀&publisher=上海图书出版社么");
        // 5. 监听事件
        xhr.onreadystatechange = function() {
    
    
            if (xhr.readyState === 4 && xhr.status === 200) {
    
    
                console.log(xhr.responseText);
            }
        }

4.3 Abfragezeichenfolge

Abfragezeichenfolgen (URL-Parameter) sind Zeichenfolgen (Variablen), die am Ende der URL hinzugefügt werden, um Informationen an den Server zu senden.

Format: Fügen Sie das Englische? am Ende der URL ein und fügen Sie den Parameter = value hinzu . Wenn mehrere Parameter vorhanden sind, verwenden Sie zum Trennen das & -Symbol

5 Verwenden Sie Axios, um eine Anfrage zu initiieren

Axios ist eine Bibliothek, die sich auf Netzwerkdatenanfragen konzentriert .

Einführen:

<script src="https://unpkg.com/axios/dist/axios.min.js"/></script>

5.1 Verwenden Sie Axios, um eine GET-Anfrage zu initiieren

Die Syntax für Axios zum Initiieren einer Get-Anfrage:

axios.get("url", {params: { /* 参数 */ }}.then(callback))

Hinweis: Axios gibt ein Promise-Objekt zurück und muss daher verarbeitet werden

axios.get('http://81.70.153.180:8081/api/getStudentList', {
    
    params:{
    
    sid:'s0001',sname:'王'}}).then(res => {
    
    
    console.log('res',res);
});

axios.get('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
    
    
	console.log('res',res);
});

axios({
    
    
    url: 'http://81.70.153.180:8081/api/getStudentList',
    method: 'GET',
    params: {
    
     // GET方式，传递参数使用params
        sid: 's0001',
        sname: '王',
    }
}).then(res => {
    
    
    console.log('res', res); // res.data
});

5.2 Verwenden Sie Axios, um eine POST-Anfrage zu initiieren

Die Syntax von Axios zum Initiieren einer POST-Anfrage:

axios.post("url", { /* 参数 */ }.then(callback))

axios.post('http://81.70.153.180:8081/api/login', {
    
    
                sid: 's0001',
                password: "123456"
             }).then(res => {
    
    
             console.log(res);
         });

axios({
    
    
	url: 'http://81.70.153.180:8081/api/login', // 请求的地址
    method: 'POST',
    headers: {
    
     'Content-Type': 'application/json;charset=utf-8' }, // 设置请求头
    data: {
    
      
    	sid: 's0001',
		password: "123456"
    }
}).then(res => {
    
    
    console.log(res); // res.data
});

6 Verwenden Sie fetch, um eine Anfrage zu initiieren

Fetch ist auch eine bessere Mainstream-Methode für das Front-End, um Netzwerkanfragen zu initiieren. Ajax-Anfragen umfassen hauptsächlich zwei Arten von XML und Fetch, und XML ist möglicherweise offener. Aber fetch ist keine weitere Kapselung von Ajax, sondern nativem js , ohne das XMLHttpRequest-Objekt zu verwenden.

6.1 Verwenden Sie fetch, um eine Get-Anfrage zu initiieren

fetch('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res => {
    
    
 	if (res.ok) {
    
    
		return res.json();
    }
}).then(data => {
    
    
	console.log(data);
});

Anmerkungen: Die Get-Anfrage verwendet die Rest-Methode zum Übergeben von Parametern, und die Parameter werden als Teil der Adressleiste verwendet

6.2 Verwenden Sie fetch, um eine Post-Anfrage zu initiieren

fetch('http://81.70.153.180:8081/api/login', {
    
    
	method: 'post',
    body: JSON.stringify({
    
      // 进行传参,需要转换为json字符串
		sid: 's0001',
		password: "123456"
	}),
	headers: {
    
    
		'Content-Type': 'application/json'
    }
}).then(res => {
    
    
	if (res.ok) {
    
    
		return res.json();
	}
}).then(data => {
    
    
		console.log(data);
	});