Ajax-Front-End- und Back-End-Methoden zur domänenübergreifenden Anforderungsverarbeitung

In diesem Artikel werden die domänenübergreifenden Ajax-Anforderungsverarbeitungs- und domänenübergreifenden Hintergrunddatenverarbeitungsmethoden vorgestellt und die domänenübergreifenden Ajax-Probleme im Detail analysiert. Freunde, die mehr über das Ajax-Front-End und -Back erfahren müssen. Die Methoden zur domänenübergreifenden Anforderungsverarbeitung können Sie aus diesem Artikel lernen.

Ich habe kürzlich an der Front-End-Entwicklung öffentlicher Konten gearbeitet und bin auf das Problem domänenübergreifender Ajax-Anfragen gestoßen, wie z. B. die dreistufige Verknüpfung von Provinz-Stadt-Kreis in der Region Dreistufige Verknüpfungsabfrage von Automarke, Autoserie, Automodell usw. Alle müssen durch Aufrufen externer Schnittstellen (Schnittstellen anderer Engineering-Projekte) vervollständigt werden. Jetzt werde ich meine persönliche Lösung für domänenübergreifende Anfragen mitteilen. Natürlich habe ich mit Hilfe des Hintergrundprogrammierers schnell herausgefunden, woher sie stammt, und ich hoffe, dass sie für alle hilfreich sein kann. Bitte geben Sie auch aktiv Kommentare oder Vorschläge ein.

Domänenübergreifende Anfragen müssen den Hintergrundcode verwenden, um den Rückruf zu empfangenRückruffunktion, um die JSON-Daten weiter zu verarbeiten; das Frontend verwendet dann eine Ajax-Anfrage, um die Rückrufparameter an den Server zu senden und geben Sie das Datenformat als jsonp an.

1. Verarbeitung domänenübergreifender Anfragen im Hintergrund

1.CarBrandController.java (Automarkenschnittstellen-Java-Datei), die hier aufgeführten Methoden werden hauptsächlich verwendet, um die entsprechende Abfrage nach verschiedenen Ebenen durchzuführen Werte Marke, Autoserie, Automodell. Hier wird eine Rückruffunktion für domänenübergreifende Anfragen verarbeitet. Wenn der zurückgegebene Rückruf null ist, handelt es sich nicht um eine domänenübergreifende Anfrage und es ist keine spezielle Verarbeitung erforderlich direkt; wenn der zurückgegebene Rückruf nicht null ist, weist dies auf eine domänenübergreifende Anforderung hin. In diesem Fall muss eine spezielle Verarbeitung der JSON-Daten durchgeführt werden, dh der äußeren Ebene des JSON wird ein Klammerpaar hinzugefügt Einzelheiten finden Sie in der printlnJSONObject-Methode in der Datei HttpAdapter.java.

public void json(HttpServletRequest request,HttpServletResponse response){ 
  Map<String,Object>map=new HashMap<String, Object>(); 
  String id = request.getParameter("id");      //接收ajax请求带过来的id 
  String level = request.getParameter("level");   //接收ajax请求带过来的level 
  String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 
  if ("1".equals(level)) {             //如果level是&#39;1&#39;,则查询第一级目录内容 
    map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map 
  } else if ("2".equals(level)) {          //如果level是&#39;2&#39;,则查询第二级目录内容 
    map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map 
  } else if ("3".equals(level)) {          //如果level是&#39;3&#39;,则查询第三极目录内容 
    map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map 
  } 
  map.put("level",level); 
  if (null==callback) {               //如果接收的callback值为null,则是不跨域的请求,输出json对象 
    HttpAdapter.printlnObject(response, map); 
  }else{                      //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 
  HttpAdapter.printlnJSONPObject(response, map, callback); 
  } 
}

2.HttpAdapter.java (Java-Datei des Ausgabeobjekts), printlnObject-Methode druckt normale JSONString; printlnJSONObject-Methode führt eine spezielle Verarbeitung für JSON-String durch.

/** 
 * 打印对象 
 * @param response 
 * @param object 
*/ 
public static void printlnObject(HttpServletResponse response,Object object){ 
  PrintWriter writer=getWriter(response); 
  writer.println(JSON.toJSONString(object)); 
} 
/** 
 * 打印跨域对象 
 * @param response 
 * @param object 
*/ 
public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ 
  PrintWriter writer=getWriter(response); 
  writer.println(callback+"("+JSON.toJSONString(object)+")"); 
}

2. Front-End-Ajax-Cross-Domain-Anforderungsdaten

Schreibmethode 1: Einen Parameter-Callback= an den Server senden? und geben Sie den Datentyp als „jsonp“-Format an. Das bei domänenübergreifenden Anforderungen angegebene Datenformat muss das Format „jsonp“ haben.

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',   //将callback写在请求url后面作为参数携带 
    type:'GET', 
    async:false, 
    dataType:'jsonp', 
    success:function(data){         
      console.log(data);             
      //其他处理(动态添加数据元素)       
  });    
}

Schreibmethode 2: Der Rückruf muss nicht in die URL geschrieben werden, aber der jsonp-Parameter muss als „callback“ angegeben werden und dem jsonpCallback-Parameter sollte ein Wert übergeben werden.

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, 
    type:'GET', 
    dataType:'jsonp', 
    jsonp: 'callback',          //将callback写在jsonp里作为参数连同请求一起发送 
    jsonpCallback:'jsonpCallback1',    
    success:function(data){            
    console.log(data);       
}); }

Die beiden oben genannten Schreibweisen haben die gleiche Bedeutung, werden aber auf unterschiedliche Weise geschrieben.

Als nächstes werde ich das Arbeitsprinzip von JSONP hinzufügen.

3. Analyse des domänenübergreifenden Prinzips von JSONP

Das grundlegendste Prinzip von JSONP ist: Fügen Sie dynamisch ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a hinzu Das Tag ist nicht domänenübergreifend und unterliegt keinen Einschränkungen. Auf diese Weise hat diese domänenübergreifende Methode nichts mit dem Ajax-XmlHttpRequest-Protokoll zu tun.

JSONP ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und die Rückgabe an den Client ermöglicht Javascript Die Form des Callbacks ermöglicht den domänenübergreifenden Zugriff auf JSONP, also JSON mit Padding. Aufgrund der Einschränkungen der Same-Origin-Richtlinie darf XmlHttpRequest nur Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) anfordern. Wenn wir eine domänenübergreifende Anfrage stellen möchten, können wir eine domänenübergreifende Anfrage stellen, indem wir das Skript-Tag von HTML verwenden und den auszuführenden Skriptcode in der Antwort zurückgeben, wo sich das Javascript-Objekt befinden kann direkt über JSON übergeben. Diese domänenübergreifende Kommunikationsmethode heißt JSONP.

jsonCallback-Funktion jsonp1236827957501(...): Sie wird vom Browser-Client registriert, nachdem die JSON-Daten auf dem domänenübergreifenden Server abgerufen wurden. Die Callback-Funktion

Jsonp-Prinzip :

Registrieren Sie zunächst einen Rückruf (z. B. „jsoncallback“) auf dem Client und übergeben Sie dann den Rückrufnamen (z. B. jsonp1236827957501) an den Server. Hinweis: Nachdem der Server den Rückrufwert erhalten hat, muss er jsonp1236827957501(...) verwenden, um den auszugebenden JSON-Inhalt einzuschließen. Zu diesem Zeitpunkt können die vom Server generierten JSON-Daten korrekt vom Client empfangen werden.

Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren.

Platzieren Sie abschließend die JSON-Daten direkt als Eingabeparameter. Dadurch wird ein JS-Syntaxdokument generiert und an den Client zurückgegeben.

Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus. Zu diesem Zeitpunkt werden die Javascript-Dokumentdaten als Parameter übergeben,
werden an die vom Client vordefinierte Rückruffunktion übergeben (z. B jquery im obigen Beispiel) Im Erfolg: Funktion (json)), gekapselt durch die Methode $.ajax() (Dynamische Ausführung der Rückruffunktion)

Man kann sagen, dass die Methode jsonp im Prinzip funktioniert Dasselbe wie 829f4515d45765547710de74af22eea82cacc6d41bbb37262a98f745aa00fbf0 ist konsistent (qq space verwendet diese Methode, um einen domänenübergreifenden Datenaustausch zu erreichen). ein Skriptinjektionsverhalten, daher bestehen bestimmte Sicherheitsrisiken

Beachten Sie, dass jquey keine domänenübergreifenden Beiträge unterstützt.

Das sind alle oben genannten Inhalte Mit Ajax-Cross-Domain-Anfragen können Sie mehr lesen!

Empfohlene ähnliche Artikel:

Detaillierte Beispiele für Lösungen für den im domänenübergreifenden Ajax-Zugriff gemeldeten Fehler 501

In diesem Artikel wird hauptsächlich die Lösung für den im domänenübergreifenden Ajax-Zugriff gemeldeten Fehler 501 im Detail vorgestellt. Domänenzugriff, der einen bestimmten Referenzwert, Interesse hat...

Ajax domänenübergreifende perfekte Lösung, Beispielfreigabe

Das Unternehmen möchte eine Veranstaltungsseite erstellen und alles entdecken Die Informationen in der Prozessschnittstelle, Ajax-Anforderung domänenübergreifend. Hier ist eine kurze Einführung in Cross-Domain...

Lösung für das Problem des Cookie-Verlusts beim Ajax-Cross-Domain-Zugriff_AJAX bezogen

In diesem Artikel wird hauptsächlich Ajax Cross vorgestellt - Problem mit dem Verlust von Cookies beim Domänenzugriff, Freunde in Not können sich darauf beziehen...

Das obige ist der detaillierte Inhalt vonAjax-Front-End- und Back-End-Methoden zur domänenübergreifenden Anforderungsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!