JSON: Difference between revisions

← Older edit

JSON (view source)

Revision as of 08:52, 25 January 2012

3,073 bytes added , 25 January 2012

m

no edit summary

Mm

emailconfirmed, nsInternRO, nsInternRW, Administrators

3,356

edits

@@ Line 1: / Line 1: @@
-First of all, i'm sorry for writing this article in english, although i've been around for a few months, i still don't feel comfortable enough to write in german.
+  This article has been created by Luís Filipe Couto (thanks!). Please feel free to add or correct.
+  There's also an article here: [[IFD:WApplications/Vortraege/APIs_JSON]]
 I'm assuming that you are familiar with [[HTML]], [[CSS]], [[JavaScript]] and [[PHP]] for this article.
@@ Line 176: / Line 178: @@
 <li>[[#Print the tweets]]</li>
 <li>[[#Serialize a form with JavaScript]]</li>
-<li>Send the form to [[PHP]] with [[AJAX]]</li>
+<li>[[#Send the form to PHP with AJAX]]</li>
-<li>Post the tweet using a [http://dev.twitter.com/pages/libraries PHP Twitter Library]
+<li>[[#Post the tweet using a PHP Twitter Library]]
 </ol>
 ----
@@ Line 228: / Line 230: @@
 ===Serialize a form with [[JavaScript]]===
 <p>This is the part, where i want to show a few more things about JSON which is the JSON Parsers. JSON usually travels between web app and the server as a string, javascript has a really nice (and dangerous!) function which is <em><strong>eval()</strong></em> this function reads string values and interprets it as javascript, which is quite convenient if the JSON file comes from a secure source, however we can't assure the security of an external service like twitter, so i'm going to use a parser to convert the values of our form into a JSON, while i'm also going to show the opposite, convert a JSON into a Javascript Object with the parser</p>
+<sub>To save a few lines i'll be using the [http://www.jquery.com jQuery Framework]</sub>
+<source lang="javascript">
+<form action="sendTweet.php" method="post" accept-charset="utf-8">
+	<input type="text" name="username" value="" id="username">
+	<input type="pasword" name="password" value="" id="password">
+	<textarea name="tweet" value="tweet"></textarea>
+	<p><input type="submit" id="submit" value="Continue &rarr;"></p>
+</form>
+<script type="text/javascript" charset="utf-8" src="json2.js"></script>
+<script type="text/javascript" charset="utf-8" src="jquery-1.4.2.min.js"></script>
+<script type="text/javascript" charset="utf-8">
+	$(document).ready(function(){
+		$('form').submit(function(e){
+			e.preventDefault();
+			obj = new Object;	//Going to do an object only to use the parser
+			obj.username = $('#username').val();
+			obj.password = $('#password').val()
+			obj.tweet = $('#tweet').val();
+			obj2string = JSON.stringify(obj);	//convert object to json string
+		});
+	});
+</script>
+</source>
+<p>As you can see, i'm using the parser to safely convert a javascript object to a JSON String</p>
+----
+===Send the form to PHP with AJAX===
+Here i'm sending the previous JSON string to a PHP file with AJAX, and parsing the twitter answer into a javascript object. To every request, Twitter responds with a JSON, in this case, the JSON file contains the info about the tweet we posted using PHP.
+<source lang="javascript">
+	$.post("sendTweet.php",{"sendedTweet":obj2string},function(data)){
+		tweet = JSON.parse(data);	//convert json string to object
+	}
+</source>
+----
+===Post the tweet using a [http://dev.twitter.com/pages/libraries PHP Twitter Library]===
+<p>On the other side in PHP, we get the values, and we use a PHP Library to send the tweet, libraries change according to its programmer, so it's always a good idea to read the instructions.</p>
+<p>On the other hand, if you don't want to use a library you can always use the cURL method showed above to do an authenticated post</p>
+<source lang="php">
+<?php
+//Currently using the Tijs Verkoyen library http://classes.verkoyen.eu/twitter/
+if(isset($_POST['sendedTweet'])){
+	$tweet = json_decode($_POST['sendedTweet']); #decode the JSON string
+	$username = $tweet['username'];
+	$password = $tweet['password'];
+	$tweet = $tweet['tweet'];
+	include "twitter_library.php";
+	$twi_user = new Twitter("$username","$password");
+	$user_text = $tweet;
+	$twi_user->updateStatus($user_text);
+	echo $twi_user
+}
+?>
+</source>
+<p>And that's pretty much it. I hope i was able to make myself clear during this article, however if you have any doubt please feel free to contact me to [mailto:lcouto87@gmail.com here]</p>
+==Resources==
+* [http://www.json.org  JSON Official Website]
+* [http://www.twitter.com Twitter.com]
+* [http://dev.twitter.com Twitter Developer Page]
+* [http://www.php.net PHP.net]
+* [http://www.jquery.com jQuery.com]
+--[[User:Couto|Couto]] 21:07, 7 July 2010 (UTC)
+[[Category:Javascript]]
+[[Category:Netztechnik]]
+[[Category:Programmiersprachen]]
+[[Category:Software]]
+[[Category:Webtechnologien]]
+[[Category:Louis Couto]]