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
{{ message }}
This repository was archived by the owner on Apr 20, 2018. It is now read-only.
[Ⓢ](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.
<ahref="#rxdomrequestajaxcoldurl--settings">#</a>[Ⓢ](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L145-L204"View in source")[Ⓣ][1]
95
93
96
-
Creates a cold observable for an Ajax request with either a settings object with url, headers, etc or a string for a URL.
97
94
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.
<ahref="#rxdomrequestgeturl">#</a>[Ⓢ](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L248-L250"View in source")[Ⓣ][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.
<ahref="#rxdomrequestgetjsonurl">#</a>[Ⓢ](https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/rx.dom.js#L259-L264"View in source")[Ⓣ][1]
Copy file name to clipboardExpand all lines: readme.md
+8-12Lines changed: 8 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,10 +35,9 @@ To download the source of the HTML DOM Bindings for the Reactive Extensions for
35
35
36
36
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.
37
37
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 Litebased methods, and the RxJS Bindings for HTML DOM, along with a textbox for input and a list for our results.
@@ -48,10 +47,10 @@ We'll start out with a basic skeleton for our application with script references
48
47
<ul id="results"></ul>
49
48
...
50
49
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.
52
51
```js
53
52
var textInput =document.getElementById('textInput');
54
-
var throttledInput =Rx.Observable.fromEvent(textInput, 'keyup');
53
+
var throttledInput =Rx.DOM.keyup(textInput);
55
54
```
56
55
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.
57
56
```js
@@ -77,7 +76,7 @@ Putting it all together, our throttledInput looks like the following:
77
76
78
77
```js
79
78
var textInput =document.getElementById('textInput');
80
-
var throttledInput =Rx.Observable.fromEvent(textInput, 'keyup')
79
+
var throttledInput =Rx.DOM.keyup(textInput)
81
80
.map( function (ev) {
82
81
returntextInput.value;
83
82
})
@@ -92,19 +91,16 @@ Now that we have the throttled input from the textbox, we need to query our serv
92
91
93
92
```js
94
93
functionsearchWikipedia(term) {
95
-
var cleanTerm =global.encodeURIComponent(term);
96
94
var url ='http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
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.
103
101
104
102
```js
105
-
var suggestions =throttledInput.flatMapLatest( function (text) {
106
-
returnsearchWikipedia(text);
107
-
});
103
+
var suggestions =throttledInput.flatMapLatest(searchWikipedia);
108
104
```
109
105
110
106
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
153
149
154
150
## LICENSE
155
151
156
-
Copyright 2013 Microsoft Open Technologies
152
+
Copyright 2014 Microsoft Open Technologies
157
153
158
154
Licensed under the Apache License, Version 2.0 (the "License");
159
155
you may not use this file except in compliance with the License.
0 commit comments