-
Notifications
You must be signed in to change notification settings - Fork 0
/
ajax.html
146 lines (121 loc) · 7.02 KB
/
ajax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Force IE to use its standard document rendering mode - I found this line at https://stackoverflow.com/questions/10975107/forcing-internet-explorer-9-to-use-standards-document-mode -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<title>AJAX | Jschool</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/js-icon.png" type="image/x-icon">
</head>
<body>
<header>
<!-- Page header containing logo/site title, with a navigation bar
nested inside of it-->
<a href="index.html"><h1 id="header-logo">Jschool</h1></a>
<!-- navigation bar in the semantically nice nav element -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<div id="tutorial-container" class="fade-in">
<section class="lead">
<h1>AJAX</h1>
<p>AJAX allows your JavaScript code to communicate with servers over the internet, <a
href="http://rve.org.uk/dumprequest" target="_blank">performing HTTP requests with them</a>,
and retrieving any data that they may send back - meaning you can use data sent from servers within your web
page
interactively, no page refreshing needed...</p>
</section>
<section>
<p class="top-tip">Unsure of what a HTTP request is? <a
href="http://www.loadtestingtool.com/blog/general/what-is-http-request/" target="_blank">
Find out more about them here</a>, and specifically more <a href="http://rve.org.uk/dumprequest"
target="_blank">about what they actually contain
here</a>.</p>
<h2>A simple AJAX request example</h2>
<p>AJAX allow HTTP requests (of any type - POST, GET, etc.) to be carried out 'in the background' asynchronously
in JavaScript, and their response data (along with response code) to be returned to your JavaScript -
meaning that you can then use the data you've received back - for example by formatting it into HTML and
adding it to the web page. This means that you can then display new data that you've retrieved from a web
server to a user, without them having to refresh the page themselves, as an example.</p>
<p>An AJAX request is to be created by creating a <a
href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">XMLHttpRequest
object</a>, and then having a request URL and request method set on it using the .open() method. The request
can then be sent with the .send() method. In POST requests, POST data can also be added using the
.send(myData) method, passing in your encoded POST data as a parameter (where myData is in the example).</p>
<p>The response is handed to a 'callback' function when complete, and this function firstly needs to check if
the request was completed successfully by looking at its status code (the .statusCode property, containing a
Number, which has the <a href="http://www.w3.org/Protocols/HTTP/HTRESP.html" target="_blank">standard HTTP
response code</a> to state how the request was completed), before then using the .responseText to get
the raw response data that the server has returned (in the case that the request was a success).</p>
<p>A simple example of an AJAX POST request is shown below...</p>
<!-- Code snipping to follow... no indentation inside of code tags because the pre tag forces them to be un-formatted, so indentation does not work! -->
<!-- I got the AJAX request example from http://vanilla-js.com/ and modified it to suit a tutorial context/
my tutorial's needs -->
<pre>
<code>
// create a new AJAX request
var ajaxRequest = new XMLHttpRequest();
// set the API endpoint URL to carry out the request on...
var apiUrl = "http://my-cool-api.com/api/endpoint";
// set the request method in a string (i.e. POST, GET, DELETE, etc.)
var requestType = "POST";
// set the request data to POST too (if it's a POST request)...
var postData = "data=Hello%20World";
// set the AJAX request type and URL to the variables we set up previously
ajaxRequest.open(requestType, apiUrl, true);
// add an anonymous 'callback' function to execute once the request is complete...
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState != 4 || ajaxRequest.status != 200) {
/* an error occurred -
the request has not been carried out correctly */
// let's log the failure...
console.log("AJAX Request failed with status " + String(ajaxRequest.status));
// nothing we can do... give up and return.
return;
}
/* if we've reached this point we can be sure the request
completed properly, let's log that, and the data we got back... */
// log the success and the status of the request...
console.log("AJAX Request succeeded with status " + String(ajaxRequest.status));
// and log the data we received back...
console.log("Received data: " + String(ajaxRequest.responseText));
};
// send the POST data that we prepared earlier
ajaxRequest.send(postData);
</code>
</pre>
<p class="top-tip">200 is the standard response status code for a successful HTTP request - meaning that it's
worked as expected. You can view <a href="http://www.w3.org/Protocols/HTTP/HTRESP.html" target="_blank">a
full list of possible HTTP response codes here</a>, and include as many as you need to handle within
your callback function. <br/>Post data should be <a href="http://www.w3schools.com/tags/ref_urlencode.asp"
target="_blank">URL Encoded</a> before being sent.</p>
</section>
</div>
<!-- Consistent footer containing links and other information -->
<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
<p>© Dylan McKee 2015 - for Newcastle University.</p>
</footer>
<!-- linking JavaScript at the end for page load speed benefits.
Using RequireJS has meant that I only need to link one file into the actual
HTML, allowing my HTML to be semantically beautiful.
I can also load JavaScript in Async, which is ideal to speed up loading,
again thanks to RequireJS.
-->
<script data-main="js/main" type="text/javascript" src="js/lib/require.js" async></script>
</body>
</html>