Skip to content
This repository was archived by the owner on Apr 20, 2018. It is now read-only.

Commit ccc9981

Browse files
Adding get
1 parent c2e91eb commit ccc9981

File tree

4 files changed

+35
-83
lines changed

4 files changed

+35
-83
lines changed

doc/operators/ajax.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Rx.DOM.Request.ajax('/products')
3838
### Location
3939

4040
File:
41-
- [`/src/ajax.md`](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/src/ajax.js)
41+
- [`/src/ajax.js`](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/src/ajax.js)
4242

4343
Dist:
4444
- [`rx.dom.js`](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/dist/rx.dom.js) | - [`rx.dom.compat.js`](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/dist/rx.dom.compat.js)
@@ -56,4 +56,4 @@ NuGet Packages:
5656
- [`RxJS-Bridges-HTML`](http://www.nuget.org/packages/RxJS-Bridges-HTML/)
5757

5858
Unit Tests:
59-
- None
59+
- [`/tests/tests.ajax.js](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/tests/tests.ajax.js)

doc/operators/get.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
### Rx.DOM.get(url)`
2+
[Ⓢ](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L248-L250 "View in source")
3+
4+
Creates an observable sequence from an Ajax GET Request with the body. This method is just shorthand for the `Rx.DOM.Request.ajax` method with the GET method.
5+
6+
#### Arguments
7+
1. `url` *(String)*: A string of the URL to make the Ajax call.
8+
9+
#### Returns
10+
*(Observable)*: The observable sequence which contains the response from the Ajax GET.
11+
12+
#### Example
13+
```js
14+
Rx.DOM.Request.get('/products')
15+
.subscribe(
16+
function (xhr) {
17+
var text = xhr.responseText;
18+
console.log(text);
19+
},
20+
function (err) {
21+
// Log the error
22+
}
23+
);
24+
```
25+
* * *

doc/readme.md

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -90,77 +90,8 @@ Schedulers
9090

9191

9292

93-
### <a id="rxdomrequestajaxcoldurl--settings"></a>`Rx.DOM.Request.ajaxCold(url | settings)`
94-
<a href="#rxdomrequestajaxcoldurl--settings">#</a>[&#x24C8;](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L145-L204 "View in source") [&#x24C9;][1]
9593

96-
Creates a cold observable for an Ajax request with either a settings object with url, headers, etc or a string for a URL.
9794

98-
#### Syntax
99-
```js
100-
// Using string URL
101-
Rx.DOM.Request.ajaxCold(url);
102-
103-
// Using settings object
104-
Rx.DOM.Request.ajaxCold(settings);
105-
```
106-
#### Arguments
107-
1. `url` *(String)*: A string of the URL to make the Ajax call.
108-
1. `settings` *(Object)*: An object with the following properties
109-
110-
- `url` *(String)*: URL of the request
111-
- `method` *(String)*: Method of the request, such as GET, POST, PUT, PATCH, DELETE
112-
- `async` *(Boolean)*: Whether the request is async
113-
- `headers` *(Object)*: Optional headers
114-
115-
#### Returns
116-
*(Observable)*: An observable sequence containing the `XMLHttpRequest`.
117-
118-
#### Example
119-
120-
The following example uses a simple URL to retrieve a list of products.
121-
```js
122-
Rx.DOM.Request.ajaxCold('/products')
123-
.subscribe(
124-
function (xhr) {
125-
126-
var products = JSON.parse(xhr.responseText);
127-
128-
products.forEach(function (product) {
129-
console.log(product);
130-
});
131-
},
132-
function (error) {
133-
// Log the error
134-
}
135-
);
136-
```
137-
* * *
138-
139-
### <a id="rxdomrequestgeturl"></a>`Rx.DOM.Request.get(url)`
140-
<a href="#rxdomrequestgeturl">#</a>[&#x24C8;](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L248-L250 "View in source") [&#x24C9;][1]
141-
142-
Creates an observable sequence from an Ajax GET Request with the body. This method is just shorthand for the `Rx.DOM.Request.ajax` method with the GET method.
143-
144-
#### Arguments
145-
1. `url` *(String)*: A string of the URL to make the Ajax call.
146-
147-
#### Returns
148-
*(Observable)*: The observable sequence which contains the response from the Ajax GET.
149-
150-
#### Example
151-
```js
152-
Rx.DOM.Request.get('/products')
153-
.subscribe(
154-
function (xhr) {
155-
var text = xhr.responseText;
156-
console.log(text);
157-
},
158-
function (err) {
159-
// Log the error
160-
}
161-
);
162-
```
163-
* * *
16495

16596
### <a id="rxdomrequestgetjsonurl"></a>`Rx.DOM.Request.getJSON(url)`
16697
<a href="#rxdomrequestgetjsonurl">#</a>[&#x24C8;](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L259-L264 "View in source") [&#x24C9;][1]

readme.md

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,9 @@ To download the source of the HTML DOM Bindings for the Reactive Extensions for
3535

3636
Let's walk through a simple yet powerful example of the Reactive Extensions for JavaScript Bindings for HTML, autocomplete. In this example, we will take user input from a textbox and trim and throttle the input so that we're not overloading the server with requests for suggestions.
3737

38-
We'll start out with a basic skeleton for our application with script references to RxJS Lite, RxJS Time-based methods, and the RxJS Bindings for HTML DOM, along with a textbox for input and a list for our results.
38+
We'll start out with a basic skeleton for our application with script references to RxJS Lite based methods, and the RxJS Bindings for HTML DOM, along with a textbox for input and a list for our results.
3939

4040
<script type="text/javascript" src="rx.lite.js"></script>
41-
<script type="text/javascript" src="rx.time.js"></script>
4241
<script type="text/javascript" src="rx.dom.js"><script>
4342
<script type="text/javascript">
4443
@@ -48,10 +47,10 @@ We'll start out with a basic skeleton for our application with script references
4847
<ul id="results"></ul>
4948
...
5049

51-
The goal here is to take the input from our textbox and throttle it in a way that it doesn't overload the service with requests. To do that, we'll get the reference to the textInput using the document.getElementById moethod, then bind to the 'keyup' event using the `Rx.Observable.fromEvent` method from base RxJS which then takes the DOM element event handler and transforms it into an RxJS Observable.
50+
The goal here is to take the input from our textbox and throttle it in a way that it doesn't overload the service with requests. To do that, we'll get the reference to the textInput using the document.getElementById moethod, then bind to the 'keyup' event using the `Rx.DOM.fromEvent` specialization shortcut for keyups called `Rx.DOM.keyup` which then takes the DOM element event handler and transforms it into an RxJS Observable.
5251
```js
5352
var textInput = document.getElementById('textInput');
54-
var throttledInput = Rx.Observable.fromEvent(textInput, 'keyup');
53+
var throttledInput = Rx.DOM.keyup(textInput);
5554
```
5655
Since we're only interested in the text, we'll use the `select` or `map` method to take the event object and return the target's value.
5756
```js
@@ -77,7 +76,7 @@ Putting it all together, our throttledInput looks like the following:
7776

7877
```js
7978
var textInput = document.getElementById('textInput');
80-
var throttledInput = Rx.Observable.fromEvent(textInput, 'keyup')
79+
var throttledInput = Rx.DOM.keyup(textInput)
8180
.map( function (ev) {
8281
return textInput.value;
8382
})
@@ -92,19 +91,16 @@ Now that we have the throttled input from the textbox, we need to query our serv
9291

9392
```js
9493
function searchWikipedia(term) {
95-
var cleanTerm = global.encodeURIComponent(term);
9694
var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
97-
+ cleanTerm + '&callback=JSONPCallback';
98-
return Rx.DOM.Request.jsonpRequest(url);
95+
+ encodeURIComponent(term) + '&callback=JSONPCallback';
96+
return Rx.Request.jsonpRequest(url);
9997
}
10098
```
10199

102100
Now that the Wikipedia Search has been wrapped, we can tie together throttled input and our service call. In this case, we will call select on the throttledInput to then take the text from our textInput and then use it to query Wikipedia, filtering out empty records. Finally, to deal with concurrency issues, we'll need to ensure we're getting only the latest value. Issues can arise with asynchronous programming where an earlier value, if not cancelled properly, can be returned before the latest value is returned, thus causing bugs. To ensure that this doesn't happen, we have the `flatMapLatest` method which returns only the latest value.
103101

104102
```js
105-
var suggestions = throttledInput.flatMapLatest( function (text) {
106-
return searchWikipedia(text);
107-
});
103+
var suggestions = throttledInput.flatMapLatest(searchWikipedia);
108104
```
109105

110106
Finally, we'll subscribe to our observable by calling subscribe which will receive the results and put them into an unordered list. We'll also handle errors, for example if the server is unavailable by passing in a second function which handles the errors.
@@ -153,7 +149,7 @@ You can contribute by reviewing and sending feedback on code checkins, suggestin
153149

154150
## LICENSE
155151

156-
Copyright 2013 Microsoft Open Technologies
152+
Copyright 2014 Microsoft Open Technologies
157153

158154
Licensed under the Apache License, Version 2.0 (the "License");
159155
you may not use this file except in compliance with the License.

0 commit comments

Comments
 (0)