Wie schreibe ich ein Ajax-Backend? So implementieren Sie Front-End- und Back-End-Interaktion (Codebeispiel)

Der folgende Artikel stellt Ihnen vor, wie man ein Ajax-Backend schreibt. Wie man eine Front-End- und Back-End-Interaktion erreicht, hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Vorwort

Was ist Front-End- und Back-End-Verbindung? Der Grund für diesen Namen liegt darin, dass mir wirklich kein besserer Name einfällt, um die Probleme zu beschreiben, auf die ich während der Front-End-Entwicklung in meiner Anfängerphase gestoßen bin.

1. Wir alle wissen, dass das Front-End nicht nur eine gute Website-Oberfläche und Benutzerinteraktionsdesign ist, sondern auch eine gute „Kommunikation“ mit dem Back-End.

Das ist es, aber wie kommuniziert man mit dem Backend? Obwohl ich immer davon höre, wie soll ich damit in Kontakt treten?

2. Wenn unsere CSS-Technologie ausgereift ist, geben wir uns nicht mehr mit der Nachahmung von Websites zufrieden, sondern möchten wirklich eine Unternehmensentwicklung erreichen, eine eigene Anwendung entwickeln oder es tun. Es ist ein kleines Projekt, aber zum Glück Davon kann ich im Vorstellungsgespräch etwas vorweisen.

Frage

Was ist also das Backend?

Da ich mich nicht mit der Backend-Entwicklung beschäftige, möchte ich nicht mehr sagen.

Als Front-End-Entwickler müssen Sie jedoch mindestens zwei Dinge wissen. Das erste besteht darin, beim Web-Interaktionsdesign gute Arbeit zu leisten.

Vereinfacht ausgedrückt kann das Backend Daten verarbeiten und die Daten zur Verwendung durch das Frontend an das Frontend zurückgeben.

Zu den Frontend-Arbeiten gehören natürlich auch Browserkompatibilität, Web-Performance-Optimierung usw.

Wie nehmen Sie also Kontakt zum Backend auf?

Zu diesem Zeitpunkt sollten wir unsere Worte ändern: Meine (Front-End-)Anfrage an das Backend senden.

Soweit ich weiß, gibt es die folgenden Methoden, um Anfragen an das Backend zu senden. Natürlich, wenn Sie andere Front-End-Entwicklungsframeworks wie Vue.js, React usw. verwenden. Es wird andere Methoden geben, aber ich werde nur die traditionelle Methode vorstellen.

Methode

1. Verwenden Sie das Aktionsattribut des

. Diese Methode ist nützlich in speziellen Szenarien Wird als nächstes verwendet.

Wie folgt verwenden:

<form method="发送请求所使用的方法" action="向后台发送请求的url(访问的地址)">
    <input type="hidden" name="访问后台API需要传的参数" value="参数的值"/>
</form>

Diese Methode wird nur kurz vorgestellt und ist nicht die Haupterklärung dieses Artikels.

Und diese Methode hat viele Einschränkungen, wie zum Beispiel die Unfähigkeit, komplexe Anforderungsheader festzulegen.

2. Verwenden Sie WebSocket für die Kommunikation. Sie können selbst suchen oder einfach die API aufrufen (mit der bereitgestellten Methode).

3.fetch()-Methode, dies ist ebenfalls eine sehr neue Methode, aber derzeit sind die kompatiblen Browser begrenzt, sodass sie nicht sehr häufig verwendet wird.

4.ajax (Ajax), dies ist eine sehr verbreitete und praktische Methode. Sie können mehr über Ajax auf Baidu erfahren. Wenn es um Ajax geht, ist es das Ajax von JavaScript und das Ajax von jQuery.

1) Der Ajax von nativem js basiert auf einem Objekt namens XMLHttpRequest. Oh nein, alles an Ajax sollte auf diesem Objekt basieren. Sie können auf die native Ajax-Schreibmethode von Baidu zurückgreifen, Sie müssen sie nur verstehen, da es wirklich wenig Bedarf gibt, sie zu schreiben.

2) jQuery ist eine JavaScript-Kapselungsbibliothek, die viele gängige und einfache Methoden kapselt. Ich denke, es ist eine Fähigkeit, die jeder Front-End-Entwickler beherrschen muss. Daher verwendet dieser Artikel hauptsächlich jQuery-gekapseltes Ajax.

Instanz

Nachdem wir so viel gesagt haben, kommen wir endlich zum Punkt...

Wir wollen es verschicken zur Backend-Anfrage, dann muss es ein Backend geben, aber ich kenne das Backend nicht, muss ich das Backend noch lernen?

Glücklicherweise gibt es auf dieser Welt etwas Magisches namens offene Plattform und offene API. Die bekannteren sind Sina Open API, Douban Open API, wichtige offene Kartenplattformen usw.

Diese offene Plattform entspricht unserem Backend, das uns eine offene API (URL) zur Verfügung stellt. Offen, Sie wissen, was es bedeutet, auch wenn ich es nicht sage.

Das Folgende ist ein Codestück:

$.ajax({
    type: 'GET',                                                     // 请求的方式
    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址（和风天气开放API）
    data: {                                                          // 请求所需要填的参数
        location: '中山,广东',                                        // 需要查询的城市或地区
        key: '9da*********************95bcb82f'                      // 用户认证key    },
    success: function(data) {                                        // 请求成功后，接收到data
        console.log(data); // 打印获取到的数据
                
        // 对获取到的数据稍作处理
        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;
        console.log(basic);
        console.log(now);

    }
});

Drücken Sie F12 im Browser und das Ergebnis wird in der Konsolenleiste angezeigt:

Damit ist der Prozess der Verbindung von Front- und Back-End abgeschlossen!

Hier verwende ich die offene Plattform Heweather (https://www.heweather.com), die einige Wetterdaten bereitstellt. Wenn wir sie nutzen, können wir unsere eigene Wetter-APP entwickeln.

Okay, das war's für meine Einleitung! Es gibt wirklich viel Wissen über das Frontend und jeder muss die Initiative ergreifen, um es zu lernen und zu beherrschen!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, AJAX-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

JavaScript Online-Handbuch

AJAX-Online-Handbuch

jQuery-Online-Handbuch

Das obige ist der detaillierte Inhalt vonWie schreibe ich ein Ajax-Backend? So implementieren Sie Front-End- und Back-End-Interaktion (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!