So implementieren Sie domänenübergreifende Ajax-Front-End- und Back-End-Anfragen

In diesem Artikel werden die domänenübergreifenden Front-End-Anforderungsverarbeitungs- und domänenübergreifenden Back-End-Datenverarbeitungsmethoden vorgestellt und die domänenübergreifenden Probleme von Ajax im Detail analysiert. Freunde, die dies benötigen, können daraus 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 die Rückruffunktion zu empfangen und die JSON-Daten weiter zu verarbeiten. Anschließend verwendet das Frontend eine Ajax-Anfrage, um die Rückrufparameter an den Server zu senden und das Datenformat als JSONP anzugeben .

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. Wenn der zurückgegebene Rückruf null ist, 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 ist eine spezielle Verarbeitung für die JSON-Daten erforderlich, d. h., der äußeren Ebene der JSON-Daten 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), die printlnObject-Methode druckt eine normale JSON-Zeichenfolge; die printlnJSONObject-Methode führt eine spezielle Verarbeitung der JSON-Zeichenfolge 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 fügen wir das Funktionsprinzip von JSONP hinzu.

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

Das grundlegendste Prinzip von JSONP ist: Fügen Sie dynamisch ein <script> hinzu, und das src-Attribut des Skript-Tags hat kein domänenübergreifende Einschränkungen. Auf diese Weise hat diese domänenübergreifende Methode nichts mit dem Ajax-XmlHttpRequest-Protokoll zu tun. </p> <p>JSONP ist ein inoffizielles Protokoll, mit dem Skript-Tags auf der Serverseite integriert und an den Client zurückgegeben werden können Form des Javascript-Rückrufs Der domänenübergreifende Zugriff auf JSONP ist 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, wobei das Javascript-Objekt direkt mit JSON übergeben werden kann. Diese domänenübergreifende Kommunikationsmethode heißt JSONP. </p> <p>jsonCallback-Funktion jsonp1236827957501(...): Sie wird vom Browser-Client registriert, nachdem die JSON-Daten auf dem domänenübergreifenden Server abgerufen wurden. Die Callback-Funktion </p> <p><strong>Jsonp-Prinzip : </strong></p> <p>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. </p> <p>Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren.</p> <p>Platzieren Sie abschließend die JSON-Daten direkt als Eingabeparameter. Dadurch wird ein JS-Syntaxdokument generiert und an den Client zurückgegeben. </p> <p>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 <br> an die vom Client vordefinierte Rückruffunktion (z. B. jquery) übergeben im obigen Beispiel) In der success: function (json)) gekapselt durch die $.ajax()-Methode (Dynamische Ausführung der Callback-Funktion) </p> <p> Man kann sagen, dass die jsonp-Methode im Prinzip die ist Das gleiche wie <script src="http://cross-domain /...xx.js"></script> ist konsistent (qq space verwendet diese Methode, um einen domänenübergreifenden Datenaustausch zu erreichen). Script-Injection-Verhalten (Script-Injection), daher gibt es bestimmte Sicherheitsrisiken.

Das oben Genannte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Über die tatsächliche Verwendung von log4js in Express

So verwenden Sie NodeJS zur Implementierung der WebSocket-Funktion

So erhalten Sie Knotenelemente mit JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie domänenübergreifende Ajax-Front-End- und Back-End-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!