Skip to content

Commit

Permalink
Code and prose style improvements to all articles in Ajax chapter. Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Markus Amalthea Magnuson authored and ajpiano committed Mar 14, 2013
1 parent 7320dd6 commit 64b6981
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 216 deletions.
10 changes: 5 additions & 5 deletions page/ajax.md
Expand Up @@ -7,14 +7,14 @@ customFields:
value: "refresh"
---

Traditionally webpages required reloading to update their content. For web-based email this meant that users had to manually reload their inbox to check and see if they had new mail. This had huge drawbacks: it was slow and it required user input. When the user reloaded their inbox, the server had to reconstruct the entire web page and resend all of the HTML, CSS, JavaScript, as well as the user's email. This was hugely inefficient. Ideally, the server should only have to send the user's new messages, not the entire page. By 2003 all the major browsers, solved this issue by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with the server without requiring a page reload.
Traditionally webpages required reloading to update their content. For web-based email this meant that users had to manually reload their inbox to check and see if they had new mail. This had huge drawbacks: it was slow and it required user input. When the user reloaded their inbox, the server had to reconstruct the entire web page and resend all of the HTML, CSS, JavaScript, as well as the user's email. This was hugely inefficient. Ideally, the server should only have to send the user's new messages, not the entire page. By 2003, all the major browsers solved this issue by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with the server without requiring a page reload.

The XMLHttpRequest object is part of a technology called Ajax (Asynchronous JavaScript and XML). Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. With the widespread adoption of the XMLHttpRequest object it quickly became possible to build web applications like Google Maps, and GMail that used XMLHttpRequest to get new map tiles, or new email without having to reload the entire page.
The XMLHttpRequest object is part of a technology called Ajax (Asynchronous JavaScript and XML). Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. With the widespread adoption of the XMLHttpRequest object it quickly became possible to build web applications like Google Maps, and Gmail that used XMLHttpRequest to get new map tiles, or new email without having to reload the entire page.

Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so its imperative that a callback be used to handle the response.
Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it's imperative that a callback be used to handle the response.

Unfortunately, different browsers implement the Ajax API differently. Typically this meant that developers would have to account for all the different browsers to ensure that Ajax would work universally. Fortunately, jQuery provides Ajax support that abstracts away painful browser differences. It offers both a full-featured `$.ajax()` method, and simple convenience methods such as `$.get()`, `$.getScript()`, `$.getJSON()`, `$.post()`, and `$().load()`.

Most jQuery applications dont in fact use XML, despite the name Ajax; instead, they transport data as plain HTML or JSON (JavaScript Object Notation).
Most jQuery applications don't in fact use XML, despite the name "Ajax"; instead, they transport data as plain HTML or JSON (JavaScript Object Notation).

In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. As a work around, JSONP (JSON with Padding) uses `<script>` tags to load files containing arbitrary JavaScript content and JSON, from another domain. More recently browsers have implemented a technology called Cross-origin resource sharing (CORS), that allows Ajax requests to different domains.
In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy. As a work around, JSONP (JSON with Padding) uses `<script>` tags to load files containing arbitrary JavaScript content and JSON, from another domain. More recently browsers have implemented a technology called Cross-Origin Resource Sharing (CORS), that allows Ajax requests to different domains.
96 changes: 37 additions & 59 deletions page/ajax/ajax-and-forms.md
Expand Up @@ -2,20 +2,20 @@
title: Ajax and Forms
level: beginner
source: http://jqfundamentals.com/legacy
attribution:
attribution:
- jQuery Fundamentals
---

jQuerys ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to [prefilters](http://api.jquery.com/extending-ajax/#Prefilters) (explained below), and even more!
jQuery's ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to [prefilters](http://api.jquery.com/extending-ajax/#Prefilters) (explained below), and even more!

### Serialization
Serializing form inputs in jQuery is extremely easy. Two methods come supported natively - `$.fn.serialize` and `$.fn.serializeArray`. While the names are fairly self-explanatory, there are many advantages to using them.
Serializing form inputs in jQuery is extremely easy. Two methods come supported natively `$.fn.serialize` and `$.fn.serializeArray`. While the names are fairly self-explanatory, there are many advantages to using them.

The `serialize` method serializes a form's data into a query string. For the element's value to be serialized, it **must** have a `name` attribute. Please note that values from inputs with a type of `checkbox` or `radio` are included only if they are checked.

```
// Turning form data into a query string
$("#myForm").serialize();
$( "#myForm" ).serialize();
// creates a query string like this:
// field_1=something&field2=somethingElse
Expand All @@ -25,108 +25,86 @@ While plain old serialization is great, sometimes your application would work be

```
// Creating an array of objects containing form data
$("#myForm").serializeArray();
$( "#myForm" ).serializeArray();
// creates a structure like this:
// [
// {
//
// name : "field_1",
// value : "something"
//
// },
// {
//
// name : "field_2",
// value : "somethingElse"
//
// }
// ]
```

### Client-side validation
Client-side validation is, much like many other things, extremely easy using jQuery. While there are several cases developers can test for, some of the most common ones are: presence of a required input, valid usernames/emails/phone numbers/etc..., or checking an "I agree..." box.
Client-side validation is, much like many other things, extremely easy using jQuery. While there are several cases developers can test for, some of the most common ones are: presence of a required input, valid usernames/emails/phone numbers/etc&hellip;, or checking an "I agree&hellip;" box.

Please note that it is advisable that you also perform server-side validation for your inputs. However, it typically makes for a better user experience to be able to validate some things without submitting the form.

With that being said, let's jump on in to some examples! First, we'll see how easy it is to check if a required field doesn't have anything in it. If it doesn't, then we'll `return false`, and prevent the form from processing.

```
// Using validation to check for the presence of an input
$("#form").submit(function( event ) {
// if .required's value's length is zero
if ( $(".required").val().length === 0 ) {
// usually show some kind of error message here
// this prevents the form from submitting
return false;
} else {
// run $.ajax here
}
$( "#form" ).submit(function( event ) {
// if .required's value's length is zero
if ( $( ".required" ).val().length === 0 ) {
// usually show some kind of error message here
// this prevents the form from submitting
return false;
} else {
// run $.ajax here
}
});
```

Let's see how easy it is to check for invalid characters in a username:
Let's see how easy it is to check for invalid characters in a phone number:

```
// Validate a phone number field
$("#form").submit(function( event ) {
var inputtedPhoneNumber = $("#phone").val();
// match only numbers
var phoneNumberRegex = ^\d*$/;
// if the phone number doesn't match the regex
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
// usually show some kind of error message here
$( "#form" ).submit(function( event ) {
var inputtedPhoneNumber = $( "#phone" ).val();
// prevent the form from submitting
return false;
// match only numbers
var phoneNumberRegex = /^\d*$/;
} else {
// run $.ajax here
}
// if the phone number doesn't match the regex
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
// usually show some kind of error message here
// prevent the form from submitting
return false;
} else {
// run $.ajax here
}
});
```

### Prefiltering
A prefilter is a way to modify the ajax options before each request is sent (hence, the name `prefilter`).

For example, say we would like to modify all crossDomain requests through a proxy. To do so with a prefilter is quite simple:
For example, say we would like to modify all cross-domain requests through a proxy. To do so with a prefilter is quite simple:

```
// Using a proxy with a prefilter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
if ( options.crossDomain ) {
options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
if ( options.crossDomain ) {
options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
});
```

You can pass in an optional argument before the callback function that specifies which `dataTypes` you'd like the prefilter to be applied to. For example, if we want our prefilter to only apply to `JSON` and `script` requests, we'd do:

```
// Using the optional dataTypes argument">
// Using the optional dataTypes argument
$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
// do all of the prefiltering here, but only for
// requests that indicate a dataType of "JSON" or "script"
// do all of the prefiltering here, but only for
// requests that indicate a dataType of "JSON" or "script"
});
```
23 changes: 9 additions & 14 deletions page/ajax/ajax-events.md
Expand Up @@ -2,25 +2,20 @@
title : Ajax Events
level: beginner
source: http://jqfundamentals.com/legacy
attribution:
attribution:
- jQuery Fundamentals
---
Often, youll want to perform an operation whenever an Ajax requests starts or
stops, such as showing or hiding a loading indicator. Rather than defining
Often, you'll want to perform an operation whenever an Ajax requests starts or
stops, such as showing or hiding a loading indicator. Rather than defining
this behavior inside every Ajax request, you can bind Ajax events to elements
just like you'd bind other events. For a complete list of Ajax events, visit
[ Ajax Events documentation on docs.jquery.com ]( http://docs.jquery.com/Ajax_Events ).
just like you'd bind other events. For a complete list of Ajax events, visit
[Ajax Events documentation on docs.jquery.com](http://docs.jquery.com/Ajax_Events).

```
// Setting up a loading indicator using Ajax Events
$("#loading_indicator").ajaxStart(function() {
$( this ).show();
}).ajaxStop(function() {
$( this ).hide();
$( "#loading_indicator" ).ajaxStart(function() {
$( this ).show();
}).ajaxStop(function() {
$( this ).hide();
});
```

0 comments on commit 64b6981

Please sign in to comment.