The jQuery .ajax() Cheatsheet… The Quick Reference For ajax Settings!

Written by Gregory Milby | Saturday, March 12th, 2011
, , ,
Have you ever noticed that when you lookup an example on google that you find a few hundred thousand, but never one that spills all the options? switches? parameters?  It was starting to look like every jQuery ajax example was mysterious coming up with some new parameters. So, it seemed reasonable to share my quick reference chart – it helped me learn more about the methods inside the low level .ajax call:

$.ajax()

Perform an asynchronous HTTP (AJAX) request.
$.ajax(settings)
settings: A map of options for the request:
*url: A string containing the URL to which the request is sent.
*async (optional): A Boolean indicating whether to perform the request asynchronously. Defaults to true.
* beforeSend (optional): A callback function that is executed before the request is sent.
*cache (optional): A Boolean indicating whether to allow the browser to cache the response. Defaults to true.
*complete (optional): A callback function that executes whenever the request finishes.
*contentType (optional): A string containing a MIME content type to set for the request.  Defaults to application/x-www-form-urlencoded.context (optional): An object (typically a DOM element) to set as this within the callback functions. Defaults to window.
(below is newer elements >1.4)
*data (optional): A map or string that is sent to the server with the request.
*dataFilter (optional): A callback function that can be used to preprocess the response data before passing it to the success handler.
*dataType (optional): A string defining the type of data expected back from the server (xml, html, json, jsonp, script, or text).
*error (optional): A callback function that is executed if the request fails.
*global (optional): A Boolean indicating whether global AJAX event handlers will be triggered by this request. Defaults to true.
*ifModified (optional): A Boolean indicating whether the server should check if the page is modified before responding to the request. Defaults to false.
* jsonp (optional): A string containing the name of the JSONP parameter to be passed to the server. Defaults to callback.
*password (optional): A string containing a password to be used when responding to an HTTP authentication challenge.
*processData (optional): A Boolean indicating whether to convert submitted data from object form into query string form. Defaults to true.
*scriptCharset (optional): A string indicating the character set of the data being fetched; only used when the dataType parameter is jsonp or script.
*success (optional): A callback function that is executed if the request succeeds.
*timeout (optional): A number of milliseconds after which the request will time out in failure.
*type (optional): A string defining the HTTP method to use for the request, such as GET or POST. Defaults to GET.
*username (optional): A string containing a user name to be used when responding to an HTTP authentication challenge.
*xhr (optional): A callback function that is used to create the XMLHttpRequest object. Defaults to a browser-specific implementation.
This list was found, amongst a pile of results, while doing a (very extensive) google search. Here are some other helpful links that were found that have provided some useful examples:
This person has broken down the ‘useful’ functionality of ajax…. especially for using it in a real world situation.
Of course the original/latest jQuery api reference… don’t let it scare you. If you see a method (term) that you do not understand, then take a break – look up that “ONE TERM” in quotes… figure it out before moving forward.  This ‘cheat sheet’ is basically some anonymous compilation of  a variation of the api, but the way it was written helped me see all of the options. After taking each switch on this sheet, and researching it, it wasn’t a mysterious magical thing anymore. Hopefully this will prove useful to you too.
http://jsbin.u1st.us <–use jsbin to share your code! :)

No Comments

How To Resize Images Why Do I Need To?

Written by Gregory Milby | Thursday, October 14th, 2010

Digital media has become so main-stay that the average phone can take pictures in excess of 3mb, and cameras can take in excess of 10mb images now.  Desktop applications like Photoshop, Fireworks & GIMP can create unlimited size images (depending on the dimensions and the numbers of layers).

Sites that will allow you to upload an avatar or an image – like blogs, forums, and media featured sites – often have a size restraint, and it leave some people not knowing how to get their favorite image uploaded to the site.

The basic premise is that the image has a weight, measured in megabytes – before this goes south and someone falls asleep, it’s basically just comprised of how many colors, how big, and how technical the image is.

because of the number of factors, it’s usually easier to just utilize an upload/resizing service that will do the job for you.  Some of these services will allow you to decide up front how big/how much file weight you want to have the image ‘shaved down to’.  Some just use verbiage like “small”, “smaller”, etc…

Some social network sites, will even scale the image down for you now – but even then, it has to be below a certain size.

Here are some of the more “user-friendly” online resizing tools that I’ve found:

Like most services on the internet, these are free (for now). Also, most of these services will do one thing/feature that the other will not do.  ResizeToMail gives you the option to skew images down to specific scale size (width vs height), while another allows for zoom and crop (which are nice if you want to cut out a bad background)

Please reply with any experiences you have at any of these sites, and likewise, let us know if you have another site you could recommend.

No Comments

The Google App Engine (GAE) No Non Sense Quick Start Guide

Written by Gregory Milby | Saturday, October 9th, 2010

Follow these quick steps to deploy a website or web-application in Google App Engine:

1) Create a account in Google AppEngine:
a) Go to http://appengine.google.com and sign in (with a Google/Gmail account) to the service. When you sign in, you will create a project too. This project have a app-id ( a identifier, please anote it ).
2) Download the latest version of AppEngine SDK:
a) Go to  http://code.google.com/appengine/downloads.html and download the latest version of AppEngine SDK for Python for your Operation System.
b) Extract the compacted file in your home folder for example. This will create a folder called “google_appengine”. This folder contains all necessary files to develop, debug and deploy your app in GAE.
3) Download the skeleton app ‘webpy-gallery’ and alter the app.yaml file:
a) In the google_appengine folder get the webpy-gallery app. This app contains a basic skeleton of a web.py app to run in GAE.
svn checkout http://webpy-gallery.googlecode.com/svn/trunk/ webpy-gallery (or ANY web project inside the google code respository)
Now in the google_appengine folder you have a sub-folder called webpy-gallery and in this sub-folder you have a file called app.yaml. This file is a deployment descriptor where you can configure ‘what’ and ‘how’ deploy in GAE. Then as a first step, alter the application property for the id of the application that you have created in STEP 1.
4) Run the application in dev mode:
a) To test your app, open a shell (bash) and go to google_appengine folder and type;
python dev_appserver.py webpy-gallery
This will start the ‘development webserver’ in the address http://localhost:8008 then you can access this address in the browser.
5) Deploy your application in GAE:
For deploy your app in GAE just run the command:
python appcfc.py update webpy-gallery
6) Last tip:
- Whenever that you alterate a html file, you need compile this file before update your app, the go to the webpy-gallery folder and execute the shell script compile_template.sh

Follow the steps to deploy a website or web-application in Google App Engine:

1) Create a account in Google AppEngine:

a) Go to http://appengine.google.com and sign in (with a Google/Gmail account) to the service. When you sign in, you will create a project too. This project have a app-id ( a identifier, please anote it ).

2) Download the latest version of AppEngine SDK:

a) Go to  http://code.google.com/appengine/downloads.html and download the latest version of AppEngine SDK for Python for your Operation System.      b) Extract the compacted file in your home folder for example. This will create a folder called “google_appengine”. This folder contains all necessary files to develop, debug and deploy your app in GAE.

3) Download the skeleton app ‘webpy-gallery’ and alter the app.yaml file:

a) In the google_appengine folder get the webpy-gallery app. This app contains a basic skeleton of a web.py app to run in GAE.

svn checkout http://webpy-gallery.googlecode.com/svn/trunk/ webpy-gallery

Now in the google_appengine folder you have a sub-folder called webpy-gallery and in this sub-folder you have a file called app.yaml. This file is a deployment descriptor where you can configure ‘what’ and ‘how’ deploy in GAE. Then as a first step, alter the application property for the id of the application that you have created in STEP 1.

4) Run the application in dev mode:

a) To test your app, open a shell (bash) and go to google_appengine folder and type;      python dev_appserver.py webpy-gallery        This will start the ‘development webserver’ in the address http://localhost:8008 then you can access this address in the browser.

5) Deploy your application in GAE:

For deploy your app in GAE just run the command:

python appcfc.py update webpy-gallery

6) Last tip:

- Ever that you alterate a html file, you need compile this file before update your app, the go to the webpy-gallery folder and execute the shell script compile_template.sh

Special Thanks to Leandro of ProfessionalIT for his extensive research & sharing his quickstart for the GAE.

Need a “Break?”

No Comments

Stop Censorship