You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/ajax.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -7,14 +7,14 @@ customFields:
7
7
value: "refresh"
8
8
---
9
9
10
-
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.
10
+
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.
11
11
12
-
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.
12
+
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.
13
13
14
-
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.
14
+
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.
15
15
16
16
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()`.
17
17
18
-
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).
18
+
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).
19
19
20
-
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.
20
+
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.
Copy file name to clipboardExpand all lines: page/ajax/ajax-and-forms.md
+37-59
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,20 @@
2
2
title: Ajax and Forms
3
3
level: beginner
4
4
source: http://jqfundamentals.com/legacy
5
-
attribution:
5
+
attribution:
6
6
- jQuery Fundamentals
7
7
---
8
8
9
-
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!
9
+
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!
10
10
11
11
### Serialization
12
-
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.
12
+
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.
13
13
14
14
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.
15
15
16
16
```
17
17
// Turning form data into a query string
18
-
$("#myForm").serialize();
18
+
$("#myForm").serialize();
19
19
20
20
// creates a query string like this:
21
21
// field_1=something&field2=somethingElse
@@ -25,108 +25,86 @@ While plain old serialization is great, sometimes your application would work be
25
25
26
26
```
27
27
// Creating an array of objects containing form data
28
-
$("#myForm").serializeArray();
28
+
$("#myForm").serializeArray();
29
29
30
30
// creates a structure like this:
31
31
// [
32
32
// {
33
-
//
34
33
// name : "field_1",
35
34
// value : "something"
36
-
//
37
35
// },
38
36
// {
39
-
//
40
37
// name : "field_2",
41
38
// value : "somethingElse"
42
-
//
43
39
// }
44
40
// ]
45
41
```
46
42
47
43
### Client-side validation
48
-
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.
44
+
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.
49
45
50
46
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.
51
47
52
48
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.
53
49
54
50
```
55
51
// Using validation to check for the presence of an input
56
-
$("#form").submit(function( event ) {
57
-
58
-
// if .required's value's length is zero
59
-
if ( $(".required").val().length === 0 ) {
60
-
61
-
// usually show some kind of error message here
62
-
63
-
// this prevents the form from submitting
64
-
return false;
65
-
66
-
} else {
67
-
68
-
// run $.ajax here
69
-
70
-
}
71
-
52
+
$( "#form" ).submit(function( event ) {
53
+
// if .required's value's length is zero
54
+
if ( $( ".required" ).val().length === 0 ) {
55
+
// usually show some kind of error message here
56
+
57
+
// this prevents the form from submitting
58
+
return false;
59
+
} else {
60
+
// run $.ajax here
61
+
}
72
62
});
73
63
```
74
64
75
-
Let's see how easy it is to check for invalid characters in a username:
65
+
Let's see how easy it is to check for invalid characters in a phone number:
76
66
77
67
```
78
68
// Validate a phone number field
79
-
$("#form").submit(function( event ) {
80
-
81
-
var inputtedPhoneNumber = $("#phone").val();
82
-
// match only numbers
83
-
var phoneNumberRegex = ^\d*$/;
84
-
85
-
// if the phone number doesn't match the regex
86
-
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
87
-
88
-
// usually show some kind of error message here
69
+
$( "#form" ).submit(function( event ) {
70
+
var inputtedPhoneNumber = $( "#phone" ).val();
89
71
90
-
// prevent the form from submitting
91
-
return false;
72
+
// match only numbers
73
+
var phoneNumberRegex = /^\d*$/;
92
74
93
-
} else {
94
-
95
-
// run $.ajax here
96
-
97
-
}
75
+
// if the phone number doesn't match the regex
76
+
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
77
+
// usually show some kind of error message here
98
78
79
+
// prevent the form from submitting
80
+
return false;
81
+
} else {
82
+
// run $.ajax here
83
+
}
99
84
});
100
85
```
101
86
102
87
### Prefiltering
103
88
A prefilter is a way to modify the ajax options before each request is sent (hence, the name `prefilter`).
104
89
105
-
For example, say we would like to modify all crossDomain requests through a proxy. To do so with a prefilter is quite simple:
90
+
For example, say we would like to modify all cross-domain requests through a proxy. To do so with a prefilter is quite simple:
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:
0 commit comments