Request Douglas Crockford douglas@crockford.com 2006-04-17 (Updated 2012-08-10) Abstract XMLHttpRequest has a security model that is inadequate for supporting the next generation of web applications. Motivation The next generation of web applications will be much more data intensive. XMLHttpRequest is constrained by the Same Origin Policy. If the Same Origin Policy were not in place, then the user could be harmed by XSS (cross site scripting) attacks. If the Same Origin Policy were not in effect, a pirate.net page could send a request via XMLHttpRequest to penzance.org. If penzance.org sits behind a firewall, and if the internal servers assume that the firewall makes explicit authorization unnecessary, then the pirate.net page could be used as a proxy, accessing the contents of penzance.org for transmission back to pirate.net. The Same Origin Policy frustrates these attacks, but it also frustrates a larger class of legitimate uses. Surprisingly, the Same Origin Policy does not apply to scripts.
COWS Ajax Top 10 custom JavaScript functions of all time Wednesday Nov 30 2005 UPDATE: For anyone who lands on this article months after the fact, there is now a podcast entry about this article reviewing each and every function. If there was ever a universal common.js shared among the entire develosphere, you'd fine these ten (plus one bonus) functions. It would be the swiss army knife no developer would go into production without. They have no doubt been tested tried and true and have proven usefulness and helpfulness to all those who've used them. So without further ado, here are what I believe to the top ten greatest custom JavaScript functions in use today. 10) addEvent() Surely a staple to event attachment! Scott Andrew's original addEvent() function function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } 9) addLoadEvent() 7) cssQuery()
CSS tutorial Bert Bos CWI, Amsterdam, Netherlands the 12th of May, 2006 Part 1 – Principles CSS annotates a tree with style properties Colors backgrounds Fonts, weights, styles Margins, padding, borders List numbering Basic shapes (inline, block, list, table…) Line height Justification Underlining, etc. <h2>Ellipsis Points</h2> <h3>Their Function</h3> <p>Ellipsis points indicate that either a few letters of a word or one or more words have been omitted. <p>Grammar calls this omission of words ellipsis. <p>A poet writes: <blockquote> <p>I do not know what it could mean<br> that I am saddened so. Ellipsis Points Their Function Ellipsis points indicate that either a few letters of a word or one or more words have been omitted. Grammar calls this omission of words ellipsis. A poet writes: I do not know what it could mean that I am saddened so. The style in a typical browser Binding in CSS is done with selectors CSS has selectors for Example: <h2>An <em>example</em> header</h2><p>First para not indented. Third, too. <!
60 Effective JavaScript Tools A correct and qualified set of development tools will save you from many tedious and time consuming tasks. And why make your work more difficult, when there are tools to achieve your goals so much easier and less painful? Below you find some JavaScript tools that will make your work faster and more effective – something your customers will appreciate. Many of the tools in this list require a Firefox browser. In this article Cashrevelations.com presents 60 effective and useful JavaScript Tools to help you with your development process and save you a lot of time. This article is an update from our earlier article 40 JavaScript Tools, with some additions. AJAX And JavaScript Authoring Tools 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Top JavaScript Toolkits 12. 13. 14. 15. JavaScript Debugging And Testing Tools Browser Based Debugging Tools 16. 17. 18. 19. 20. 21. 22. 23. Online Debugging Tools 24. 25. 26. 27. JavaScript Testing 28. 29. 30. 31. 32. 33. 34. Documentation And Code Optimization 35. 36. 37.
Understanding JSON: the 3 minute lesson 'Simon' on Sun, 23 Jul 2006 18:22:02 GMT, sez: Brilliant. I had (sub-consiously) followed steps 1 to 4 exactly as you describe, except the alarm bells were 3 days ago. Thankyou for saving me the agro of looking it up for myself. 'John' on Sun, 23 Jul 2006 19:35:19 GMT, sez: INI files Rule! Anyway, nice post on LEON er, JSON. 'Rumen Stankov' on Mon, 24 Jul 2006 06:29:04 GMT, sez: Ah! 'Wesley Shephard' on Mon, 24 Jul 2006 22:20:38 GMT, sez: Interesting. SQL injection, take two? 'lb' on Tue, 25 Jul 2006 00:04:01 GMT, sez: yeh it looks very 'injectable' -- maybe more prone to XSS (cross site scripting) than sql injection... i guess the main trick is html encoding all user input, so it can't be interpreted as html (or javascript). 'Dustin Diaz' on Tue, 25 Jul 2006 13:49:44 GMT, sez: JSON in and of itself is not what's OO. 'Aaron Bassett' on Tue, 25 Jul 2006 14:30:35 GMT, sez: 'lb' on Wed, 26 Jul 2006 05:07:27 GMT, sez: cheers lb
PlayFramework recipe: Reusable ajax Tags HaveLet’s say it: Play! and Rails do have similarities. One thing I always liked of my Rails friends where the ajax tags. Here the svn url to check out the Play! Link opens a remote url in a page div with a fancy fade out - fade in effect and has the following parameters: update: the id of the div to be updatedurl: the remote url to be called. can be a reverse such as @Controller.action(params…)Select the everyone favorite! Have Fun! AJAX RSS Display Using JavaScript only without any server-side script, you want to be able to display a RSS feed? Easy! (But it took me 3 hours of hacking.) First setup a web page like this (write your own HTML, this is only an example): <html> <head> <title>JavaScript RSS Reader</title> <script language="JavaScript" xsrc="rss.js" mce_src="rss.js" ></script> </head> <body> <h1>JavaScript RSS Reader</h1> <div id="rss"></div> <script language="JavaScript"> displayRSS(" </script> </body> You can download the rss.js script. Voilà! Why is this useful? The downside? Any limitations? Here’s an excellent reference on AJAX: using the XMLHttpRequest object.
CSS Dock Menu May 08, 2007 270 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. CSS dock menu screenshot Update: I no longer support the questons regard this dock menu. View Demo | Download 1. Download the CSS dock menu zip package. 2. In between the HTML <head> tag, add the following code The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack for IE 6. 3. Don’t forget to add the following code to anywhere within the <body> tag: 4. To add menu item to the top dock (note: span tag is after the img tag): <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> To add menu item to the bottom dock (note: span tag is before the img tag): <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> Browser Compatibility Collapse All Expand All
10 super useful tools for JavaScript developers MicroJS Need a piece of code quickly? MicroJS is a brand new site which aim to provide JavaScript code snippet for most common tasks: Ajax, Json, DOM, Object-Oriented JavaScript, and more. Diva.js Diva is a Javascript frontend for viewing documents, designed to work with digital libraries to present multi-page documents as a single, continuous item. Bookmarklet Generator As you can guess, this tool is a bookmarklet generator: Simply paste your regular JavaScript code, press the button and you’ll get a bookmarklet – ready to be installed on your browser bar.Visit jQAPI Like any other jQuery developers, I spend a large amount of time digging in the documentation. jQAPI is a website which provides the jQuery documentation in a more user-friendly way, so it is now my reference site when I need any jQuery help.Visit heatmap.js Respond.js Remember my article about adaptable layouts with CSS3 media queries? Modernizr YepNope
The Ultimate Ajax Object Filed: Thu, Mar 08 2007 under Programming|| Tags: ajax javascript object post get In my recent article Ten Javascript Tools Everyone Should Have I offered an AJAX object as the 10th tool. After publication, I received quite a number of requests to document the object, and so document it I shall. Introduction This object represents the pinnacle of my attempts to create a flexible and robust Ajax object. An Object Lesson Creating a new ajaxObject This AJAX snippet is a javascript object. When you create the variable assignment, you pass the URL you want that that Ajax object to call. var myRequest = new ajaxObject(' Defining the Ajax Callback Function If you would like to have a procedure to process the data returned by the server, add the function name you want to handle the request after the URL as such. var myRequest = new ajaxObject(' processData); Here processData will accept responseText and responseStatus. Mr.
AjaxTags: Home frequency decoder | Unobtrusive Table Sort Script (revisited) A rewrite of the original table sort script that includes a few more features and a much faster sort routine architecture My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the “Unobtrusive Table Sort Script”, that addresses speed issues present within version #1. Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object) Multiple columns can be sorted at once by pressing Shift while selecting the columns using either the keyboard or mouse The new script sorts (on average – based on my very non-scientific calculations), 5 times faster than its predecessor The plug-in architecture makes writing custom sort functions a breeze The script can highlight both alternate rows and full columns on a table by table basis. Like its predecessor, the script is fully keyboard accessible The script is smart enough not to sort columns containing identical data
10 Smart Javascript Techniques For Manipulating Content Jan 11 2009 Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content. Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 11 smart javascript techniques you should always have handy when creating your next layout design. “Page Sliders”, “Hiding Content”, “Image or Content Sliders”, “Animated Slideshows”, “Carousels”, “Tabbed content” as well as “resizable, draggable & slidable” & “lightboxes” modules that you can use for effective presentations of your content (text or images). 1. jQuery pageSlide jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. Check OUt the Demo Here 2. Here is the javascript code to enable slideOut() effect: Check it out here 3. Check it out here