Browse Source

tutorial: Simplify ajax options

dataType was unnecessary; mimeType was both unnecessary and wrong in this case. Also removed an unnecessary bind and changed pollInterval to 2000 ms for consistency with https://github.com/petehunt/react-tutorial (faster is nicer if you actually try it out!).
main
Ben Alpert 11 years ago
parent
commit
2f08e7f3d0
  1. 46
      docs/tutorial.md

46
docs/tutorial.md

@ -379,8 +379,6 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
$.ajax({ $.ajax({
url: 'comments.json', url: 'comments.json',
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -407,8 +405,6 @@ var CommentBox = React.createClass({
loadCommentsFromServer: function() { loadCommentsFromServer: function() {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -419,10 +415,7 @@ var CommentBox = React.createClass({
}, },
componentWillMount: function() { componentWillMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval( setInterval(this.loadCommentsFromServer, this.props.pollInterval);
this.loadCommentsFromServer.bind(this),
this.props.pollInterval
);
}, },
render: function() { render: function() {
return ( return (
@ -436,13 +429,13 @@ var CommentBox = React.createClass({
}); });
React.renderComponent( React.renderComponent(
<CommentBox url="comments.json" pollInterval={5000} />, <CommentBox url="comments.json" pollInterval={2000} />,
document.getElementById('content') document.getElementById('content')
); );
``` ```
All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 5 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show! All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the `comments.json` file; within 2 seconds, the changes will show!
### Adding new comments ### Adding new comments
@ -456,7 +449,7 @@ var CommentForm = React.createClass({
<form className="commentForm"> <form className="commentForm">
<input type="text" placeholder="Your name" /> <input type="text" placeholder="Your name" />
<input type="text" placeholder="Say something..." /> <input type="text" placeholder="Say something..." />
<input type="submit" /> <input type="submit" value="Post" />
</form> </form>
); );
} }
@ -488,7 +481,7 @@ var CommentForm = React.createClass({
placeholder="Say something..." placeholder="Say something..."
ref="text" ref="text"
/> />
<input type="submit" /> <input type="submit" value="Post" />
</form> </form>
); );
} }
@ -517,8 +510,6 @@ var CommentBox = React.createClass({
loadCommentsFromServer: function() { loadCommentsFromServer: function() {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -532,10 +523,7 @@ var CommentBox = React.createClass({
}, },
componentWillMount: function() { componentWillMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval( setInterval(this.loadCommentsFromServer, this.props.pollInterval);
this.loadCommentsFromServer.bind(this),
this.props.pollInterval
);
}, },
render: function() { render: function() {
return ( return (
@ -573,7 +561,7 @@ var CommentForm = React.createClass({
placeholder="Say something..." placeholder="Say something..."
ref="text" ref="text"
/> />
<input type="submit" /> <input type="submit" value="Post" />
</form> </form>
); );
} }
@ -588,8 +576,6 @@ var CommentBox = React.createClass({
loadCommentsFromServer: function() { loadCommentsFromServer: function() {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -598,9 +584,8 @@ var CommentBox = React.createClass({
handleCommentSubmit: function(comment) { handleCommentSubmit: function(comment) {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
type: 'POST',
data: comment, data: comment,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -611,10 +596,7 @@ var CommentBox = React.createClass({
}, },
componentWillMount: function() { componentWillMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval( setInterval(this.loadCommentsFromServer, this.props.pollInterval);
this.loadCommentsFromServer.bind(this),
this.props.pollInterval
);
}, },
render: function() { render: function() {
return ( return (
@ -640,8 +622,6 @@ var CommentBox = React.createClass({
loadCommentsFromServer: function() { loadCommentsFromServer: function() {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -653,9 +633,8 @@ var CommentBox = React.createClass({
this.setState({data: comments}); this.setState({data: comments});
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
type: 'POST',
data: comment, data: comment,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) { success: function(data) {
this.setState({data: data}); this.setState({data: data});
}.bind(this) }.bind(this)
@ -666,10 +645,7 @@ var CommentBox = React.createClass({
}, },
componentWillMount: function() { componentWillMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval( setInterval(this.loadCommentsFromServer, this.props.pollInterval);
this.loadCommentsFromServer.bind(this),
this.props.pollInterval
);
}, },
render: function() { render: function() {
return ( return (

Loading…
Cancel
Save