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: 5-JavaScript/Labs/XHR/begin/readme.md
+82-74Lines changed: 82 additions & 74 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,13 +22,21 @@ In this lab you will learn the basics for using XMLHttpRequest Level2 or XHR L2.
22
22
## Prerequisites
23
23
24
24
* Network Access, as we will be interacting with services in the cloud.
25
-
* A service of which we can interact with. Must have CORS enabled. We have provided one for the duration of the labs at http://lightsout.co
25
+
* A service of which we can interact with. Must have CORS enabled. We have provided one for the duration of the labs at `http://lightsout.co`
26
26
27
27
**How do I know if the server is CORS enabled?**
28
28
29
29
To find out if a site or service is CORS enabled the server should return you a response header like the following.
30
30
31
-
> Access-Control-Allow-Origin: *
31
+
Access-Control-Allow-Origin: *
32
+
33
+
- - -
34
+
## Running the labs.
35
+
36
+
Run ./default.htm in your browser.
37
+
38
+
- - -
39
+
## The Lab
32
40
33
41
- - -
34
42
### Step #1
@@ -37,65 +45,65 @@ In this step we're going to learn how to create a basic XHR object and use it.
37
45
38
46
Lets start by creating the basic XMLHttpRequest object.
39
47
40
-
> var xhr = new XMLHttpRequest();
48
+
var xhr = new XMLHttpRequest();
41
49
42
-
Most modern browswers have already implemented some part of the XMLHTTPRequest L2 specification but some older versions still haven't. In the case of IE we can check the browser and if it doesn't support it create the ActiveX version of it.
50
+
Most modern browsers have already implemented some part of the XMLHTTPRequest L2 specification but some older versions still haven't. In the case of IE we can check the browser and if it doesn't support it create the ActiveX version of it.
43
51
44
-
> var xhr;
52
+
var xhr;
45
53
46
-
> if (window.XMLHttpRequest) {
47
-
> xhr = new XMLHttpRequest();
48
-
> } else if (window.ActiveXObject) {
49
-
> xhr = new ActiveXObject("Microsoft.XMLHTTP");
50
-
> }
54
+
if (window.XMLHttpRequest) {
55
+
xhr = new XMLHttpRequest();
56
+
} else if (window.ActiveXObject) {
57
+
xhr = new ActiveXObject("Microsoft.XMLHTTP");
58
+
}
51
59
52
-
In this lab we have created the XHR object for you. See that implemenation at top of each *step_.js* file.
60
+
In this lab we have created the XHR object for you. See that implementation at top of each `step_.js` file.
53
61
54
62
**Open**
55
63
56
64
With the object now created we now need to set it up.
Important to note the open method is part of a larger request namespace contating many methods to support your call: http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#request
63
71
64
72
**Supported Events**
65
73
66
-
For purposes of this lab we're going to implement two XHR event, *onerror* and *onload*. You can find all of the supported events here: http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#event-handlers
74
+
For purposes of this lab we're going to implement two XHR event, `onerror` and `onload`. You can find all of the supported events here: http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#event-handlers
67
75
68
-
> xhr.onload = onLoaded;
69
-
> xhr.onerror = onError;
76
+
xhr.onload = onLoaded;
77
+
xhr.onerror = onError;
70
78
71
-
Of course doing that assumes we have a function called *onLoaded* and another *onError* already defined. Lets create them now.
79
+
Of course doing that assumes we have a function called `onLoaded` and another `onError` already defined. Lets create them now.
72
80
73
81
**function onError**
74
82
75
-
onError is the function that will do our error handling. Given this is just a lab we're going to just take the error message and place it in our empty div called *#errors*.
83
+
onError is the function that will do our error handling. Given this is just a lab we're going to just take the error message and place it in our empty div called `#errors`.
76
84
77
-
> function onerror(e){
78
-
> $('#errors').text(e.message);
79
-
> };
85
+
function onerror(e){
86
+
$('#errors').text(e.message);
87
+
};
80
88
81
89
**function onLoaded**
82
90
83
-
In our callback **onLoaded** we can first check the status code from the response. If the status is a *200*, we can take the results *this.responseText* and append that to an empty div *#results* we have placed on the page.
91
+
In our callback `onLoaded` we can first check the status code from the response. If the status is a `200`, we can take the results `this.responseText` and append that to an empty div `#results` we have placed on the page.
84
92
85
-
> if (this.status == 200) {
86
-
> var results = this.responseText;
87
-
> $('#results').append(results);
88
-
> }
93
+
if (this.status == 200) {
94
+
var results = this.responseText;
95
+
$('#results').append(results);
96
+
}
89
97
90
-
It's important to note that we are just grabbing the responseText already knowning a great deal about our endpoint. There is a number of methods focused purly on the response.
98
+
It's important to note that we are just grabbing the responseText already knowing a great deal about our endpoint. There is a number of methods focused purely on the response.
At this point our object is configured and waiting to make the call. We do that by calling *send()* and passing along any revelant information if there is any.
104
+
At this point our object is configured and waiting to make the call. We do that by calling `send()` and passing along any relevant information if there is any.
@@ -105,64 +113,64 @@ In this step we are going to expand upon what we did in step 1. Like before the
105
113
106
114
**Open**
107
115
108
-
Like last time we are going to perform a *get* on an endpoint but this time rather than being a web page it will be an API which returns either XML or JSON.
116
+
Like last time we are going to perform a `get` on an endpoint but this time rather than being a web page it will be an API which returns either XML or JSON.
By default this endpoint will just return XML and what we really want is JSON. To do so, we need to tell DeveloperSmackdown.com that we accept JSON rather than it's default ( xml ). We do this by setting a requestHeader.
Like step 1 we need to registerd our functions with the correct events. This time our *onload* event we will want to parse the *responseText* as JSON since that is what we asked for.
130
+
Like step 1 we need to registered our functions with the correct events. This time our `onload` event we will want to parse the `responseText` as JSON since that is what we asked for.
131
+
132
+
function onloaded(e){
123
133
124
-
> function onloaded(e){
125
-
>
126
-
> if (this.status == 200) {
127
-
> var results = JSON.parse(this.responseText);
128
-
> $('#results').text(results.d.Title);
129
-
> }
130
-
> };
134
+
if (this.status == 200) {
135
+
var results = JSON.parse(this.responseText);
136
+
$('#results').text(results.d.Title);
137
+
}
138
+
};
131
139
132
140
133
141
### Step #3
134
142
135
-
*At time time of writing this, this step only correctly worked in Firefox.*
143
+
**At time time of writing this, this step only correctly worked in Firefox.**
136
144
137
145
CORS is more than just sharing text. One great thing you can do is work with blobs directly. In this step we're going to grab an avatar from gravatar.
We need to set our *responseType* to blob as we just want the image returned.
153
+
We need to set our `responseType` to blob as we just want the image returned.
146
154
147
-
> xhr.responseType = 'blob';
155
+
xhr.responseType = 'blob';
148
156
149
157
**Events**
150
158
151
-
Our response is a picture blob. What we want to do is create a new img element and url for our new blob everytime we get a response. To do this we use the createObjectURL passing our blob which will return and URL of which we can set the *src* of our img to.
Our response is a picture blob. What we want to do is create a new IMG element and url for our new blob every time we get a response. To do this we use the createObjectURL passing our blob which will return and URL of which we can set the `src` of our IMG to.
0 commit comments