Jquery fordert NodeJS über Ajax auf, eine JSON-Dateninstanz zurückzugeben-js-Tutorial-php.cn

Jquery fordert NodeJS über Ajax auf, eine JSON-Dateninstanz zurückzugeben

高洛峰

Freigeben： 2016-12-07 14:12:04

Original

1336 Leute haben es durchsucht

Kürzlich habe ich über NodeJS gelesen und die mit AJAX kombinierten Anwendungen im Internet überprüft. Ich habe das Gefühl, dass die Anwendungsaussichten recht gut sind. Warum diese Kombination verwenden?

1. NodeJS muss nicht installiert werden, Sie können es einfach kopieren und verwenden. Die Umgebungsvariablen können nur im aktuellen cmd-Fenster konfiguriert werden, was die Ausführung erleichtert.

2. Durch HTML-Ajax-Anfrage können Daten über verschiedene Domänen hinweg auf verschiedenen Servern abgerufen werden.

3. Das Kommunikationsdatenformat ist flexibel und kann XML, JSON, Binär usw. sein. Die Daten sind für jede Plattform geeignet.

Lassen Sie mich über meine Umgebung sprechen. Ich verwende einen von der Firma bereitgestellten Computer, der viele Einschränkungen aufweist. Es handelt sich beispielsweise um einen Computer in einer Domäne, auf dem keine Software installiert werden kann. Sie können die Computerkonfiguration nicht ändern und keine USB-Sticks usw. verwenden. Deshalb habe ich selbst eine grüne Version der NodeJS-Umgebung konfiguriert, die die NodeJS-bezogene Umgebung nur im aktuellen cmd-Fenster ausführen kann. Ich kann keinen HTML-Server einrichten, also habe ich eine separate HTML-Datei auf dem Laufwerk D erstellt und darauf doppelgeklickt um es zu öffnen.

Schreiben Sie ein Skript für die Knotenausführung. Die Skriptdatei app.js lautet wie folgt:

var http = require("http");
var fs = require("fs");
 
var str=&#39;{"id":"123",name:"jack",arg:11111}&#39;;
 
function onRequest(request, response){
 console.log("Request received.");
 response.writeHead(200,{"Content-Type":&#39;text/plain&#39;,&#39;charset&#39;:&#39;utf-8&#39;,&#39;Access-Control-Allow-Origin&#39;:&#39;*&#39;,&#39;Access-Control-Allow-Methods&#39;:&#39;PUT,POST,GET,DELETE,OPTIONS&#39;});//可以解决跨域的请求
 //response.writeHead(200,{"Content-Type":&#39;application/json&#39;,   &#39;Access-Control-Allow-Origin&#39;:&#39;*&#39;,&#39;Access-Control-Allow-Methods&#39;:&#39;PUT,POST,GET,DELETE,OPTIONS&#39;});
 //response.write("Hello World 8888\n");
  
 str=fs.readFileSync(&#39;data.txt&#39;);
 response.write(str);
 response.end();
}
 
http.createServer(onRequest).listen(8888);
 
console.log("Server has started.port on 8888\n");
console.log("test data: "+str.toString());

Nach dem Login kopieren

wobei data.txt und die Die aktuelle app.js-Datei wird im selben Verzeichnis abgelegt. Der Code in data.txt besteht aus Daten im JSON-Format: {"id":"123",name:"jack",arg:321,remark:"test data"}

Führen Sie es über den Knoten app.js aus und lassen Sie HTML dann über Ajax auf Daten zugreifen.

Die andere ist die HTML-Datei, die ich erstellt habe. Der Inhalt der Datei aaa.html lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
 <title>Node JS 实例</title>
 
<script src="jquery-1.4.4.min.js"></script>
 
<script>
 
/*
 
//可用于检查出错函数的错误内容，一般使用$.get()和$.post()函数就可以了
 
$.ajax({
 url: "http://127.0.0.1:8888/",
 type: "GET",
 dataType: "binary", //因为是调用nodeJS返回的json数据，所以必须使用binary类型
 error: function(XMLHttpRequest, textStatus, errorThrown){
 var s1=XMLHttpRequest;
 var s2=textStatus;
 var s3=errorThrown;
 alert("error message : "+errorThrown.toString())
 },
 success: function(data){
 $("#feeds").html(data);
 var dataObj=eval(&#39;(&#39;+data+&#39;)&#39;);//转换为json对象
 $("#id").html("编号："+dataObj.id);
 $("#name").html("姓名："+dataObj.name);
 $("#arg").html("年龄："+dataObj.arg);
 $("span").html(dataObj.remark);
  
// alert( "Data is : " + data );
 }
 
});
 
*/
 
 
//$.get("test.cgi", function(data){ alert("Data Loaded: " + data); }); //$.get函数形式结构
 
$.get("http://127.0.0.1:8888/" + new Date().getTime(), function(data){
$("#feeds").html(data);
var dataObj=eval(&#39;(&#39;+data+&#39;)&#39;);//转换为json对象
$("#id").html("编号："+dataObj.id);
$("#name").html("姓名："+dataObj.name);
$("#arg").html("年龄："+dataObj.arg);
 
$("span").html(dataObj.remark);
 
//alert("Data Loaded: "+new Date().getTime());
});
 
 
 
 
</script>
 
 
 
</head>
<body>
  
 <div id="feeds"></div>
 <div id=id></div>
 <div id=name></div>
 <div id=arg></div>
  
 <span>ddddd</span>
 
</body>
</html>

Nach dem Login kopieren

Es gibt entsprechende Kommentare in der Datei Hinweis, ich werde es hier nicht mehr erklären. Laden Sie die js-Datei von jquery aus dem Internet herunter und legen Sie sie im Verzeichnis der aktuellen HTML-Datei ab.

Eine kleine Erklärung: Ich habe die JQuery-Versionen 1.8.3 und 2.1.4 heruntergeladen und beide haben Fehler gemeldet. Die Unterstützung für JSON ist möglicherweise nicht sehr gut. Andere Versionen funktionieren nicht getestet.

Die normale Anzeige auf meinem lokalen Computer und Intranet-Test ist wie folgt:

{"id":123",Name:"Jack",arg:32100, Bemerkung:"Testdaten "}
Nummer: 123
Name: Jack
Alter: 32100
Testdaten

Die obige Umgebung wurde von mir persönlich getestet. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird. Bitte unterstützen Sie PHP Chinese Net