Web-Frontend
js-Tutorial
Eingehende Analyse von Ajax- und domänenübergreifenden Problemen im Zusammenhang mit AJAX
Eingehende Analyse von Ajax- und domänenübergreifenden Problemen im Zusammenhang mit AJAX
In diesem Artikel werden hauptsächlich Ajax- und domänenübergreifende Probleme im Detail vorgestellt und Ihnen erklärt, was Ajax und was domänenübergreifend ist. Interessierte Freunde können sich auf
Was ist Ajax
Ajax (Asynchrones JavaScript) beziehen. ist eine Technologie, die zusätzliche Daten vom Server anfordern kann, ohne die Seite zu aktualisieren.
Der Kern von Ajax ist XMLHttpRequest (XHR). Holen Sie sich Daten vom Server ohne Aktualisierung, es müssen jedoch keine XML-Daten sein, es kann auch JSON sein
1. Erstellen Sie ein XMLHttpRequest-Objekt
2. Senden Sie eine Anfrage1). () Der Wert des POST-Anforderungsheaders Content-Type: application/x-www-form-urlencoded3).Anforderungstext festlegen xhr.send() Get Request übergibt Null, Post hängt von der Situation ab
3. Verarbeiten Sie die Serverantwort Stellen Sie zunächst fest, ob die AntwortStatuscode
und das asynchrone Objekt analysiert wurden. Abgeschlossen.
Statuscodestatus zurückgegeben vom Server
1xx: Nachricht
3xx: Weiterleitung
4xx: AnforderungsfehlerAsynchroner Objektstatuscode Readystate0: Das asynchrone Objekt wurde erstellt1: Die asynchrone Objektinitialisierung ist abgeschlossen und die Anforderung wird gesendet2: Empfangen Sie die von der zurückgegebenen Originaldaten Server
3: Die Daten werden analysiert und die Analyse dauert einige Zeit
4: Die Datenanalyse ist abgeschlossen und die Daten sind einsatzbereit
XML
Grammatikregeln: Ähnlich wie bei HTML werden sie durch Tags ausgedrückt.
Sonderzeichen: <> Entity-Transfer Das Parsen der Zeichen
erfordert die Zusammenarbeit von Front- und Backend: 1. Wenn das Backend zurückkehrt, setzen Sie den Content-Type-Wert im Antwortheader auf application/xml 2. Das Frontend ist asynchron. Wenn das Objekt Hintergrunddaten empfängt, denken Sie daran, diese in Form von XML, xhr.responseXML, zu empfangen, und es gibt ein
Objektobjektzurück, der Inhalt ist #document
Grammatikregeln:
Daten werden durch Schlüssel/Wert-Paare dargestellt und die Daten werden durch Kommas getrennt, geschweifte Klammern speichern Objekte, eckige Klammern speichern Arrays, Namen und Werte müssen in doppelte Anführungszeichen gesetzt werden (dies ist ein kleiner Unterschied zu js ).
JSON in js analysieren/betreiben:
1.JSON.parse(json string); Parse eine JSON-Formatzeichenfolge in ein js-Objekt
2 .JSON.stringify(js object); Konvertieren eines js-Objekts in ein json-Format. Der String kapselt einen Ajax
Ajax in jQuery verwenden
$.ajax({}) kann so konfiguriert werden, dass eine Ajax-Anfrage initiiert wird
function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}$('form').serialize() Serialisieren Formular (Formatschlüssel=val$schlüssel=val)
Parameterbeschreibung
URL: Schnittstellenadresse
Typ: Anforderungsmethode (get/post)Timeout: Der Parameter muss vom Typ „Zahl“ sein. Legen Sie das Timeout für die Anforderung (Millisekunden) fest.
Datentyp: Es sollte ein Wert sein, der vom Client an den Server übergeben wird und dem Server mitteilt, wie er verarbeiten soll:
Daten: Anforderung senden data
beforeSend: Erforderlich, um ein Parameter vom Typ Funktion zu sein, bevor die Anforderung gesendet wird. Funktionen, die das XMLHttpRequest-Objekt ändern können, z. B. das Hinzufügen benutzerdefinierter HTTP-Header. Wenn in beforeSend „false“ zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden.
Erfolg: Wird nach einer erfolgreichen Antwort aufgerufen.
Abgeschlossen: Wird aufgerufen, wenn die Antwort abgeschlossen ist (einschließlich Erfolg und Fehler)
Domänenübergreifend
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1391
52
Ausführliche Erklärung des Oracle-Fehlers 3114: So beheben Sie ihn schnell
Mar 08, 2024 pm 02:42 PM
Ausführliche Erklärung des Oracle-Fehlers 3114: Um ihn schnell zu beheben, sind spezifische Codebeispiele erforderlich. Bei der Entwicklung und Verwaltung von Oracle-Datenbanken stoßen wir häufig auf verschiedene Fehler, unter denen Fehler 3114 ein relativ häufiges Problem ist. Fehler 3114 weist normalerweise auf ein Problem mit der Datenbankverbindung hin, das durch einen Netzwerkfehler, einen Stopp des Datenbankdienstes oder falsche Einstellungen der Verbindungszeichenfolge verursacht werden kann. In diesem Artikel wird die Ursache des Fehlers 3114 ausführlich erläutert und wie dieses Problem schnell gelöst werden kann. Außerdem wird der spezifische Code angehängt
Parsing Wormhole NTT: ein offenes Framework für jedes Token
Mar 05, 2024 pm 12:46 PM
Wormhole ist führend in der Blockchain-Interoperabilität und konzentriert sich auf die Schaffung robuster, zukunftssicherer dezentraler Systeme, bei denen Eigentum, Kontrolle und erlaubnislose Innovation im Vordergrund stehen. Die Grundlage dieser Vision ist das Bekenntnis zu technischem Fachwissen, ethischen Grundsätzen und Community-Ausrichtung, um die Interoperabilitätslandschaft mit Einfachheit, Klarheit und einer breiten Palette von Multi-Chain-Lösungen neu zu definieren. Mit dem Aufkommen wissensfreier Nachweise, Skalierungslösungen und funktionsreicher Token-Standards werden Blockchains immer leistungsfähiger und Interoperabilität wird immer wichtiger. In dieser innovativen Anwendungsumgebung eröffnen neuartige Governance-Systeme und praktische Funktionen beispiellose Möglichkeiten für Assets im gesamten Netzwerk. Protokollentwickler setzen sich nun mit der Frage auseinander, wie sie in dieser aufstrebenden Multi-Chain agieren sollen
PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine
Jun 02, 2024 pm 08:39 PM
Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.
Analyse der Bedeutung und Verwendung von Midpoint in PHP
Mar 27, 2024 pm 08:57 PM
[Analyse der Bedeutung und Verwendung von Mittelpunkt in PHP] In PHP ist Mittelpunkt (.) ein häufig verwendeter Operator, der zum Verbinden zweier Zeichenfolgen oder Eigenschaften oder Methoden von Objekten verwendet wird. In diesem Artikel befassen wir uns eingehend mit der Bedeutung und Verwendung von Mittelpunkten in PHP und veranschaulichen sie anhand konkreter Codebeispiele. 1. String-Mittelpunkt-Operator verbinden Die häufigste Verwendung in PHP ist das Verbinden zweier Strings. Indem Sie . zwischen zwei Saiten platzieren, können Sie diese zu einer neuen Saite zusammenfügen. $string1=&qu
Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden?
Feb 23, 2024 pm 04:27 PM
Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen
Wie erhalte ich Variablen aus der PHP-Methode mit Ajax?
Mar 09, 2024 pm 05:36 PM
Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:
Analyse der neuen Funktionen von Win11: So überspringen Sie die Anmeldung bei einem Microsoft-Konto
Mar 27, 2024 pm 05:24 PM
Analyse der neuen Funktionen von Win11: So überspringen Sie die Anmeldung bei einem Microsoft-Konto. Mit der Veröffentlichung von Windows 11 haben viele Benutzer festgestellt, dass es mehr Komfort und neue Funktionen bietet. Einige Benutzer möchten jedoch möglicherweise nicht, dass ihr System an ein Microsoft-Konto gebunden ist, und möchten diesen Schritt überspringen. In diesem Artikel werden einige Methoden vorgestellt, mit denen Benutzer die Anmeldung bei einem Microsoft-Konto in Windows 11 überspringen können, um ein privateres und autonomeres Erlebnis zu erreichen. Lassen Sie uns zunächst verstehen, warum einige Benutzer zögern, sich bei ihrem Microsoft-Konto anzumelden. Einerseits befürchten einige Benutzer, dass sie
Apache2 kann PHP-Dateien nicht korrekt analysieren
Mar 08, 2024 am 11:09 AM
Aus Platzgründen folgt hier ein kurzer Artikel: Apache2 ist eine häufig verwendete Webserver-Software und PHP ist eine weit verbreitete serverseitige Skriptsprache. Beim Erstellen einer Website stößt man manchmal auf das Problem, dass Apache2 die PHP-Datei nicht korrekt analysieren kann, was dazu führt, dass der PHP-Code nicht ausgeführt werden kann. Dieses Problem wird normalerweise dadurch verursacht, dass Apache2 das PHP-Modul nicht richtig konfiguriert oder das PHP-Modul nicht mit der Version von Apache2 kompatibel ist. Im Allgemeinen gibt es zwei Möglichkeiten, dieses Problem zu lösen: Die eine ist
