Ajax-Technologie [Ausführliche Erklärung der Ajax-Technologie, Verwendung von Ajax, Ajax-Anfrage, detaillierte Erklärung von JSON, Verwendung von JACKSON] (1) - umfassende Erklärung (Lernzusammenfassung --- vom Einstieg bis zur Vertiefung)

Inhaltsverzeichnis

Detaillierte Erklärung der Ajax-Technologie

Einführung in Ajax

Ajax ist „Asynchronous Javascript And XML“ (asynchrones JavaScript und XML) und bezieht sich auf eine Webentwicklungstechnologie zum Erstellen interaktiver, schneller und dynamischer Anwendungen, die lokale Daten auf der Seite aktualisieren kann, ohne die gesamte Webseite neu laden zu müssen. Ajax ermöglicht die asynchrone Aktualisierung von Seiten durch den Austausch kleiner Datenmengen mit dem Server im Hintergrund. Das bedeutet, dass Teile der Seite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Verwendung von Ajax

Wie Ajax funktioniert

XMLHttpRequest-Objekt

XMLHttpRequest ist ein Browser-Schnittstellenobjekt. Die API dieses Objekts kann von JavaScript, VBScript und anderen in Webbrowsern eingebetteten Skriptsprachen aufgerufen werden, und XML oder andere Daten können über HTTP zwischen dem Browser und dem Webserver gesendet und empfangen werden Protokoll. XMLHttpRequest kann eine asynchrone Interaktion mit dem Server erreichen, ohne dass die gesamte Seite aktualisiert wird, und ist daher zu einem Kernobjekt der Ajax-Programmierung geworden.

Schritte zur Ajax-Nutzung

Erstellen Sie ein XMLHttpRequest-Objekt

var xhr = new XMLHttpRequest();

Angegebene Anfragemethode und Anfrageadresse

xhr.open("get","http://www.example.com");

Anfrage senden

xhr.send()

Holen Sie sich die Antwortdaten vom Server zum Client

xhr.onreadystatechange = function(){
    //0:请求未初始化
    //1:服务器连接已建立
    //2:请求已接收
    //3:请求处理中
    //4:请求已完成，且响应已就绪
    if(xhr.readyState == 4 && xhr.status == 200){
        document.getElementById("span").innerHTML=xhr.responseText;
        alert(xhr.responseText);
   }
}

Ajax-Anfrage

Schritte einer Anfrage: Wie Sie im obigen Beispiel sehen können, spielt das XMLHttpRequest-Objekt eine wichtige Rolle

1 Der Benutzer sendet eine Anfrage von der Benutzeroberfläche und JavaScript ruft das XMLHttpRequest-Objekt auf.

2 Die HTTP-Anfrage wird vom XMLHttpRequest-Objekt an den Server gesendet.

3 Der Server interagiert mit der Datenbank über JSP, PHP, Servlet, ASP.net usw.

4 Daten abrufen.

5 Der Server sendet XML-Daten oder JSON-Daten an die Rückruffunktion XMLHttpRequest.

6 HTML- und CSS-Daten werden im Browser angezeigt.

Anfrage abrufen/posten

Get- und Post-Requests sind zwei Request-Methoden im http-Protokoll.

1. Die Get-Anfrage wird im Allgemeinen zum Anfordern des Abrufens von Daten verwendet, und die Post-Anfrage wird im Allgemeinen zum Senden von Daten an den Hintergrund, zum Übertragen von Daten und zum Erstellen von Daten verwendet.

2. Die Get-Anfrage kann auch im Hintergrund übergeben werden, die übergebenen Parameter werden jedoch in der Adressleiste angezeigt, was eine geringe Sicherheit aufweist, und die Länge der Parameter ist ebenfalls begrenzt (2048 Zeichen). Die Post-Anfrage stellt die übergebenen Parameter ein im Anforderungstext. Es wird nicht in der Adressleiste angezeigt, die Sicherheit ist höher als bei der Get-Anfrage und der Parameter hat keine Längenbeschränkung;

3. Das Aktualisieren des Browsers oder das Zurücksetzen der Get-Anfrage hat keine Auswirkung und die Post-Anfrage fordert sie erneut an.

4. Get-Anfragen können zwischengespeichert werden und werden im Browserverlauf gespeichert, während Post-Anfragen nicht zwischengespeichert werden und nicht im Browserverlauf gespeichert werden.

5. Die Abrufanforderung wird normalerweise über die URL-Adresse angefordert, und der allgemeine Beitrag ist die Formularanforderung

Holen Sie sich ein Anfragebeispiel

xhr.open("GET", "http://localhost:8080/get.txt?t=" + Math.random(), true);
xhr.open("GET", "http://localhost:8080/get.txt?fname=zhang&lname=san", true);

Beispiel für eine Post-Anfrage

xhr.open("POST","http://localhost:8080/post.txt", true);
xhr.setRequestHeader("Contenttype","application/x-www-form-urlencoded");
xhr.send("fname=zhang&lname=san");

synchron oder asynchron

Async=true

Wenn Sie async=true verwenden, geben Sie im Ereignis onreadystatechange eine Funktion an, die ausgeführt werden soll, wenn sich die Antwort im Bereitschaftszustand befindet

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById("view").innerHTML = xhr.responseText;
   }                
}
xmlhttp.open("GET","get.txt",true);
xmlhttp.send();

Async = false

Wir empfehlen die Verwendung von async=false nicht, aber für einige kleine Anfragen ist dies auch möglich. JavaScript wartet, bis die Serverantwort bereit ist, bevor es fortfährt. Wenn der Server ausgelastet oder langsam ist, bleibt die Anwendung hängen oder stoppt.

xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Antwort des Ajax-Servers

Statuszeile

xhr.status-Statuscode, z. B. 200, 304, 404 usw.;

Antwortkörper

Sowohl xhr.responseText als auch xhr.responseXML stellen den Antworttext dar. Um eine Antwort vom Server zu erhalten, verwenden Sie die Eigenschaften „responseText“ oder „responseXML“ des XMLHttpRequest-Objekts.

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);
xhr.send();
xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 && xhr.status === 200) {
     //解析返回的xml文件
    xmlDoc = xhr.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++) {
   txt = txt + x[i].childNodes[0].nodeValue + "<br>";
   }
  document.getElementById("view").innerHTML = txt;
}
}

Detaillierte Erklärung von JSON

Einführung in JSON

JSON (JavaScript Object Notation) ist ein leichtes, stringbasiertes Datenaustauschformat. Leicht zu lesen und zu schreiben, aber auch einfach maschinell zu analysieren und zu generieren. JSON ist eine Teilmenge von JavaScript-Datentypen.

Warum JSON verwenden?

Für die Datenübertragungsmethode in Ajax vor dem Erscheinen von JSON wird XML als Hauptdatenformat für die Datenübertragung verwendet. Bis zum Aufkommen von JSON wurde die Verwendung von XML als Datenübertragungsformat nach und nach aufgegeben. JSON ist kleiner, schneller und einfacher zu analysieren als XML.

Eigenschaften des JSON-Formats

Syntaxregeln für JSON

JSON ist eine String-Struktur, die nach bestimmten Grammatikregeln generiert wird.

Klammern kennzeichnen JSON-String-Objekte. { }

Attribute und Werte werden durch Doppelpunkte getrennt. {"Attributwert"}

Attribute werden durch Kommas getrennt. {"property": "value", "property": "value",...} Klammern geben ein Array an. [{"Attribut":"Wert"...},{"Attribut":"Wert"...}]

JSON-String-Objekt:

{"userid":1,"username":"admin","sex":"male"}

Array:

[{"userid":1,"username":"admin"},
{"userid":2,"username":"zhangsan"}]

Datentyp von JSON

1. string: String muss in doppelte Anführungszeichen gesetzt werden.

2. Zahl: numerischer Wert, der mit der Zahl von JavaScript übereinstimmt.

3. Objekt: Die Objektform von JavaScript, dargestellt durch {key:value}, die verschachtelt werden kann.

4. Array: Array, JavaScripts Array-Darstellung [Wert], kann verschachtelt werden.

5. wahr/falsch: Boolescher Typ, der boolesche Typ von JavaScript.

6. Null: Nullwert, null in JavaScript.

Verwendung von JACKSON

Es gibt keine integrierte API zum Bearbeiten von Daten im JSON-Format im JDK, daher ist eine Klassenbibliothek eines Drittanbieters erforderlich, um Daten im JSON-Format zu verwenden und zu verarbeiten. Mehrere häufig verwendete JSON-Parsing-Bibliotheken: Gson: Eine von Google entwickelte JSON-Bibliothek mit umfassenden Funktionen. FastJson: Eine von Alibaba entwickelte JSON-Bibliothek mit hervorragender Leistung. Jackson: Die Community ist sehr aktiv und wird sehr schnell aktualisiert. Bekannt als „der beste Json-Parser“

Jackson-Profil

Jackson ist eine API zum Parsen von Daten im JSON-Format. Es ist auch die beliebteste und schnellste JSON-API. Die neueste Version ist 2.13.3. Es stehen 3 JAR-Pakete zum Herunterladen zur Verfügung: jackson-core-2.13.3.jar (Kern-JAR). Paket) jackson-annotations-2.13.3.jar (bietet Unterstützung für Json-Annotationen) jackson-databind-2.13.3.jar (Datenbindung, abhängig von den ersten beiden Paketen)

Stellen Sie Jackson in das Projekt vor

Serialisierung

Verwenden Sie Jackson, um Java-Objekte in Json-Daten zu konvertieren. Erstellen Sie zunächst TestBean.java

public class TestBean {
    //id
    private String id;
   //姓名
    private String name;
    //嵌套对象
    private List<Element> elements;
    public String getId() {
        return id;
   }
    public void setId(String id) {
        this.id = id;
   }
    public String getName() {
        return name;
   }
    public void setName(String name) {
        this.name = name;
   }
    public Elements getElements() {
        return elements;
   }
    public void setElements(Elements elements) {
        this.elements = elements;
   }
}

Erstellen Sie Element.java erneut

public class Element {
   //年龄
    private Integer age;
   //呢称
    private String ename;
    public Integer getAge() {
        return age;
   }
    public void setAge(Integer age) {
        this.age = age;
   }
    public String getEname() {
        return ename;
   }
    public void setEname(String ename) {
        this.ename = ename;
   }
}

Konvertieren Sie Java-Objekte in Json

Element element = new Element();
element.setAge(23);
element.setEName("itbaizhan");
ObjectMapper objectMapper = new ObjectMapper();
String elementStr = objectMapper.writeValueAsString(element);
System.out.println(elementStr);

Die Ausgabe ist wie folgt

{"age":23,"elName":"itbaizhan"}

Deserialisierung

String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements
\":[{\"age\":22,\"elName\":\"xiaozhang\"},
{\"age\":26,\"elName\":\"xiaosan\"}]}";
ObjectMapper objectMapper = new ObjectMapper();
TestBean testBean = objectMapper.readValue(str,TestBean.class);
System.out.println(testBean.toString());

Die Ausgabe ist wie folgt:

TestBean(id=1, name=haha, elements=
[Element(age=22, elName=xiaozhang),
Element(age=26, elName=xiaosan)])

Allgemeine Hinweise

Wenn diese Annotation in die Klasse geladen wird, werden nicht vorhandene Felder ignoriert.

@JsonIgnoreProperties(ignoreUnknown = true)

Gibt an, Felder zu ignorieren

@JsonIgnoreProperties({ “password”, “secretKey” })

Dieses in der Anmerkung markierte Feld wird ignoriert

@JsonIgnore

Markieren Sie das Zeitfeld und verwenden Sie die angegebenen Regeln zum Formatieren (standardmäßig in Zeitstempel konvertieren).

@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")

Ob an der Serialisierung teilgenommen werden soll

@JsonInclude(参数)

JsonInclude.Include.NON_EMPTY: Die Eigenschaft ist leer oder null und nimmt nicht an der Serialisierung teil. JsonInclude.Include.NON_NULL: Die Eigenschaft ist null und nimmt nicht an der Serialisierung teil

Markieren Sie das Feld und geben Sie den serialisierten Feldnamen an

@JsonProperty("firstName")

Passen Sie Serialisierungs- und Deserialisierungsregeln für bestimmte Feldtypen an

@JsonDeserialize(using= T extends
JsonDeserializer.class)
@JsonSerialize(using= T extends
JsonSerializer.class)

Ajax-Nutzung von Jquery

JQuery bietet eine Kapselung von Ajax, was uns die Nutzung der Ajax-Technologie erleichtert. JQuery bietet viele Methoden zum Senden asynchroner Anforderungen basierend auf Ajax, wie zum Beispiel: $.ajax(), $.get(), $.post(), $.getJSON().

$.ajax()在异步请求中提交数据

In der Methode $.ajax() werden die übermittelten Daten über das Datenattribut gespeichert und Daten im JSON-Format werden unterstützt. Es werden Daten im allgemeinen Format übermittelt. Im Datenattribut können wir die zu übermittelnden Daten auf zwei Arten angeben. Eine Möglichkeit besteht in der Struktur name=value&name=value. Die andere besteht darin, die übermittelten Daten über JavaScript-Objekte anzugeben. Unabhängig davon, welche Methode verwendet wird, wird der Wert entsprechend dem Namen über die Methode request.getParameter im Servlet abgerufen. Geben Sie Übermittlungsdaten über ein JavaScript-Objekt an

data:{
    userid:100,
    username:"zhangsan"
}

Senden Sie Daten im JSON-Format

Um Daten im JSON-Format in $.ajax() zu übermitteln, müssen Sie die Post-Methode zum Übermitteln verwenden und die Funktion JSON.stringify() verwenden, um das JavaScript-Objekt in eine Zeichenfolge im JSON-Format zu konvertieren. Erhalten Sie übermittelte Daten im JSON-Format durch Zeicheneingabe im Servlet.

data:JSON.stringify({name:value,name:value......})

Erhalten Sie die übermittelten Daten über req.getReader().readLine() im Servlet.

$.ajax()处理响应中的 JSON 格式数据

Die Methode $.ajax() gibt die Antwortdaten automatisch entsprechend dem Wert im dataType-Attribut ein. Wenn es sich bei der Antwort um Daten im JSON-Format handelt, ist der Wert von dataType „JSON“, und was wir in der Rückruffunktion erhalten, ist direkt das aus der JSON-Zeichenfolge konvertierte JavaScript-Objekt. Es ist nicht erforderlich, JSON.parse() für die Formatkonvertierungsverarbeitung zu verwenden.

$.get()的使用

Die Methode $.get() ist eine vereinfachte Version der Methode $.ajax() zum Senden asynchroner Anforderungen basierend auf der Methode get.

Syntax $.get(URL, Funktion(Ergebnis))

$.get(url,"name=value&name=value",function(result))

$.get(URL,Daten,Funktion(Ergebnis))

$.get(url,
{userid:1,username:"zhangsan",...},function(result))

$.post()的使用

Die Methode $.post() ist eine vereinfachte Version der Methode $.ajax() zum Senden asynchroner Anfragen basierend auf der Post-Methode.

Syntax $.post(URL, Funktion(Ergebnis))

$.post(url,"name=value&name=value",function(result))

$.post(url,data,function(result))

$.post(url,
{userid:1,username:"zhangsan",...},function(result))

Verwendung von $.getJSON()

Die Methode $.getJSON() ist die Methode $.ajax(), die eine asynchrone Anfrage basierend auf der Methode get sendet und das Zeichenfolgenobjekt im JSON-Format im Antwortergebnis automatisch in ein JavaScript-Objekt konvertiert. Bei Verwendung dieser Methode müssen die zurückgegebenen Daten im JSON-Format vorliegen. Die Methode $.getJSON() wird zusammen mit resp.setContentType("application/json") verwendet.

Syntax $.getJSON(URL, Funktion(Ergebnis))

$.getJSON(url,"name=value&name=value",function(result))

$.getJSON(URL,Daten,Funktion(Ergebnis))

$.getJSON(url,
{userid:1,username:"zhangsan",...},function(result))

Durch die Verwendung der Methode serialize() werden die Daten im Formular automatisch in eine Name=Wert&Name=Wert-Struktur zusammengefügt.

Grammatik

var param = $("form").serialize();

Der Wert von param ist: name=value&name=value