BlackBoard | Druckvorschau: Javascript: JSON per HTTP an Server schicken.

Geschrieben von phlox81 am 05.04.2010 um 01:05:

Javascript: JSON per HTTP an Server schicken.

Hallo, habe mir einen kleinen Server gebastelt, welcher auf port 80, localhost läuft.

Versuche nun per JS da JSON daten über HTTP hinzuschicken, aber meine Versuche wollen nicht so richtig funktionieren, und irgendwie hab ich auch keine große Ahnung was ich da genau tue

Mein Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       //alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           //alert("Response: " + data);
         }
       );
     });
   </script>

  </head>
  <body>
<form action="http://127.0.0.1" method="get" name="myform">
<input name="firstName" value="harry" />
<input name="lastName" value="tester" />
<input name="toEmail" value="testtest@test.com" />
</form>

  </body>
</html>

Ich bekomme beim Server aber nur den HTTP Header zu sehen, wenn ich es mit get sende, stehen die JSON Daten zwar drin, aber als erstes, und nicht nach dem Header, wie ich es gerne hätte.

Auch ist das HTTP nicht sauber, steht doch da irgendwo her OPTIONS:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

handle read_header: OPTIONS / HTTP/1.1
Host: 127.0.0.1
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.1.3) Gecko/20090
824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with

An diesen HTTP Header würde ich gerne die Daten anhängen, wie geht dies in JS?
Würde dies später auch gerne mit JQuery.JSONRequest/getJSON machen, habe aber da auch noch nicht herausgefunden wie ich es korrekt verwenden kann.

Wie geht das korrekt in JS? (bin totaler JS Analphabet

)

phlox

Geschrieben von Misel am 05.04.2010 um 12:56:

Schon mal per POST probiert?

Geschrieben von phlox81 am 05.04.2010 um 14:47:

Das beispiel da oben ist doch post.
Per getJSON läuft es jetzt über JQuery, nur das das JSON dann halt teil des Headers ist, und es keinen body gibt.

Geschrieben von Zirias am 08.04.2010 um 17:47:

Ohne genau zu wissen um was es geht und wenn die Serialisierung in JSON nicht das Problem ist: dem value eines form-elements zuweisen und form.submit() sollte es doch tun

Geschrieben von phlox81 am 09.04.2010 um 23:05:

Nee, JSON ist mandatory.
Natürlich wäre es auch gut mal einfach einen normalen POST Request einfach so zu loggen, um zu sehen wie das z.b. von Firefox aussieht.

Geschrieben von Zirias am 10.04.2010 um 10:44:

Moment ... was genau du überträgst ist doch egal!
Wenn du dem Browser das übertragen überlässt (also per form.submit()) werden die inhalte der form-elemente als application/x-www-url-encoded im body des requests verschickt. wenn dann in einem feld daten im JSON format stehen, ist das wohl kein problem, die auch wieder zu extrahieren

Wenn du JSON unbedingt direkt im Body haben willst, sieht ein minimaler request so aus:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

POST [Resource-Pfad] HTTP/1.1
Host: [Hostname]
Content-Type: text/json
Content-Transfer-Encoding: 8bit
Content-Length: [größe des JSON in bytes]

{
    "test": {
        "foo": "bar"
    }
}

Den musst du dann wohl per XmlHttpRequest() Klasse loswerden...

edit: Wie ich sehe arbeitest du da mit irgendeinem Framework -- das ich allerdings nicht kenne. Vielleicht hilft als Beispiel für einen POST-Request (sendet in meinem Fall allerdings application/x-www-form-urlencoded) in javascript mein alter "web 2.0" (*fg*) formmailer:
http://palmen-it.de/script/formmail.js

Der interessante Code beginnt ab dem Kommentar "// POST in asynchronous mode:"

Geschrieben von phlox81 am 10.04.2010 um 22:24:

Danke, aber das JS interessiert mich dabei nur marginal, schreibe ja eher den Serverpart.
Mir gehts deshalb auch darum das ganze mit jquery zu machen, weil dieses Framework im Webentwicklungsbereich recht verbreitet ist.

Momentan habe ich eine Version, die erstmal zum Testen ausreicht, einen HTTP Parser muss ich dann wohl irgendwann noch dazu machen oder anderswo her einbauen.

Geschrieben von Zirias am 11.04.2010 um 09:45:

Ok, also ich glaube ich kapiere einfach nicht, was du erreichen willst. Die Daten in deinem kurzen Beispiel-HTML-Form in JSON serialisieren und zum Server schicken?

Warum? :o Alle Welt schickt Formulardaten in application/x-www-urlencodet, das verstehen auch alle serverseitigen Framworks. Aber WENN es unbedingt JSON sein soll, musst du wohl erstmal die Daten mit einer Schleife über die form-Elemente "einsammeln".

Normalerweise verwendet man JSON für den umgekehrten Weg, vom Server zum Client.