Ich habe kürzlich an der Front-End-Entwicklung öffentlicher Konten gearbeitet und bin auf das Problem der domänenübergreifenden Ajax-Anfrage gestoßen, beispielsweise die dreistufige Verknüpfung von Provinz-Stadt-Kreis in der Region, die dreistufige Die Verknüpfungsabfrage von Automarke, Autoserie, Automodell usw. muss alle aufgerufen werden. Die externe Schnittstelle (Schnittstelle zu anderen Engineering-Projekten) ist abgeschlossen. In diesem Artikel werden hauptsächlich 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.
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.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 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是'1',则查询第一级目录内容
map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map
} else if ("2".equals(level)) { //如果level是'2',则查询第二级目录内容
map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map
} else if ("3".equals(level)) { //如果level是'3',则查询第三极目录内容
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 (die Java-Datei des Ausgabeobjekts), die printlnObject-Methode druckt eine normale JSON-Zeichenfolge; die printlnJSONObject-Methode führt eine spezielle Verarbeitung durch JSON-Zeichenfolge.
/**
* 打印对象
* @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)+")");
}Schreibmethode 1: Senden Sie einen Parameter-Callback= an den Server ? 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);
//其他处理(动态添加数据元素)
});
}Schreiben 2: Der Rückruf muss nicht in die URL geschrieben werden, aber der JSONP-Parameter muss als „Callback“ angegeben werden und der JSONPCallback-Parameter a angeben Wert.
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.
Das grundlegendste Prinzip von JSONP ist: Fügen Sie dynamisch ein <script> 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. <br></p> <p>JSONP ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite ermöglicht, um über einen Javascript-Rückruf an den Client zurückzukehren Das Formular implementiert 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, 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 übergeben, <br> 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) </p> <p> Man kann sagen, dass die Methode jsonp im Prinzip funktioniert Dasselbe wie <script src="http://cross-domain /...xx.js"></script> ist konsistent (qq space verwendet diese Methode, um einen domänenübergreifenden Datenaustausch zu erreichen). ein Skriptinjektionsverhalten (Script-Injection), daher bestehen bestimmte Sicherheitsrisiken
Beachten Sie, dass jquey keine domänenübergreifende Veröffentlichung unterstützt:
Vue verwendet Axios, um Daten domänenübergreifend im Detail anzufordern Native JS implementiert Ajax und domänenübergreifende Ajax-AnfragenBeispiele erläutern das Prinzip von Ajax-Cross-Domain-Anfragen im DetailDas 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!
