nFriedly Web Dev Tech Blog » ajax http://nfriedly.com/techblog Expert Advice on Website Development, Javascript, Ajax, and Security Wed, 01 Feb 2012 22:35:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Calling all (available) Web Designers & Developers http://nfriedly.com/techblog/2010/12/calling-all-avaiable-web-designers-developers/ http://nfriedly.com/techblog/2010/12/calling-all-avaiable-web-designers-developers/#comments Fri, 17 Dec 2010 17:29:24 +0000 nFriedly http://nfriedly.com/techblog/?p=329 Even though I’ve been happily employed with Sociable Labs for a while now, I still get fairly frequent calls and emails from people who want to know if I’m available or I “know someone.” The list of people I know is starting to run short, so this post is intended to remedy that.

If you are an individual Web Designer or Web Developer interested in work, please post a comment below.

What to post:

  • Your name and website in the appropriate fields. I disabled WordPress’s rel="nofollow" just for you.
    • If you don’t have a website, get one! Sign up for a Dreamhost account and buy a template from Theme Forest and you’ll have a solid website in no time.
  • Your basic skillset. For me, it might be “Strong Javascript / Ajax, PHP, HTML, and CSS; basic Photoshop, ActionScript and Java”
  • A short bit about yourself and your experience.
  • Where you’re located, and if you would consider relocating for work.
  • What type of work you’re interested in: freelance / short-term contract (3-6 months or less), long-term contract, employment, startup, etc.

Tips:

  • This is your first impression to potential clients: Copy-paste it into Word and read it out loud once or twice. Get it right the first time because you can’t edit comments after you’ve posted them.
  • Contact information: any phone number or email address posted here will be picked up by spammers.
  • One or two links to your GitHub, LinkedIn, or recent work is fine, but be warned that my WordPress marks anything with more than 3 links as spam, and it’s hidden until I get around to checking the spam filter.
  • Lastly, this is my website, and I may choose to edit or delete comments. For example, if you claim 10+ years experience with jQuery, your comment will be deleted. (JQuery was released in 2006)

Thanks and best wishes with your future work!

]]> http://nfriedly.com/techblog/2010/12/calling-all-avaiable-web-designers-developers/feed/ 15 How AJAX Security and Twitter callbacks work http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/ http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/#comments Tue, 16 Jun 2009 14:40:33 +0000 nFriedly http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/ The twitter callback feature is nice – it makes it extremely easy to to add a twitter feed to a page. But to get the most benefit out of it, you really need to understand what it’s doing.

We’re going to look at how AJAX security works, specifically the Same Origin Policy, how Twitter gets around it, and the type of callback that twitter uses.

Note: the callback that twitter uses is entirely different from callback in the sense of passing a javascript function around as a variable. We’ll look at that in a future article.

AJAX Security

The XMLHTTPRequest Object, which is the javascript object used to make AJAX requests, has a “Same Origin Policy” which basically means that javascript on site1.com cannot use AJAX to directly load data from site2.com. This is a security feature, as it makes XSS (Cross-Site Scripting) attacks more difficult.

Worth noting, if the website is at site1.com, no scripts can communicate with any other site, even if the script was loaded from site2.com.

Work Arounds

There are a number of workarounds including iframes, java applets, and flash, but here’s a couple of the more common methods.

Line em up!Proxying Requests

The way proxying works is to have a file on your server that grabs the data from a remote server and passes it along. Then for javascript, the data appears to be coming from your server, even though it actually originated at a remote server. This is what the Fancy part of my twitter demo does.

We’ll look at using a proxy to get remote data in a future article.

Remotely hosted javascript files

Scripts stored on other websites can be included on a page. As long as the script doesn’t need to call home after the initial load, everything works great. This is how a basic twitter function works: you load a script from twitter’s website and it communicates with your site via the callback feature. This is what the Simple part of my twitter demo does.

Here is a very basic page that uses Twitter’s callback feature and a remotely loaded javascript file to show my twitter status – remote data – on my website, by interacting with local javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">

<head>
<title>Simple Twitter Status</title>

</head>
<body>

<h1>My Twitter Status:</h1>

<div id="twitter_status">Loading...</div>

<!-- Put scripts down here for speed -->

<!-- this must come before we load the twitter script -->
<script type="text/javascript">

function showStatus(json){

	json = json[0]; // we only care about the most recent status;

	var myDiv = document.getElementById('twitter_status');

	myDiv.innerHTML = '<img src="'
		+ json.user.profile_image_url
		+ '" style="float:left; margin:5px 10px 10px 0">'
		+ json.text;
}
</script>

<!-- now load the twitter file -->
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/nfriedly.json?count=1&amp;callback=showStatus&amp;random=<?php echo time(); ?>" />
</script>

</body>
</html>

You can see a live copy of this code at http://nfriedly.com/demos/twitter-extra-simple.

Digging into Twitter’s callback method

Below is a trimmed down example of what Twitter’s API sends back when we make the request in the example above.

showStatus([{"in_reply_to_screen_name":null,"text":" [ Lots of information that I'm omitting because it's not the point. ] "]);

Now, don’t worry about the jazz in the middle, just look at that showStatus(); that’s wrapped around it. First of all, how does Twitter even know that we have a function named show status? Because we said so in the url to the file -see how we added &callback=showStatus? That’s where the magic is.  (Ok, technically we said &amp; not just &, but that was just to pass XHTML validation. )

Cross-domain!

There’s a second important thing going on here – javascript from two different domains are interacting with each other. This is allowed because of how the Same Origin Policy works – everything is restricted to the local domain, but that means that everything can work together on the same plane.

It’s a beautiful thing

I hope this gave you a little bit better understanding of how AJAX security works and how Twitter gets around it and is still able to interact with your site. In the future, I’ll have an article on how “traditional” callbacks work that will use jQuery and more AJAX to dive a bit deeper into the topic.

Javascript Ninja for Hire

I have extensive experience working with AJAX, Twitter, and related technologies. I’m just the man you need to make your next javascript development project shine!

]]> http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/feed/ 1