jQuery / AngularJS / React
var xhr;
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e2) {
try {
xhr = new XMLHttpRequest();
} catch (e3) {
xhr = false;
}
}
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
"ok";
}
}
};
xhr.open("GET", "data.xml", true);
xhr.send(null);
Script.aculo.us, Mootools, YUI
var xhr;
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e2) {
try {
xhr = new XMLHttpRequest();
} catch (e3) {
xhr = false;
}
}
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
"ok";
}
}
};
xhr.open("GET", "data.xml", true);
xhr.send(null);
$.get( "data.xml", function( data ) {
"ok"
});
Javascript pure
jQuery
$.post('/login', credentials, function( user ) {
$('.user-notlogged').hide();
$('.user').show();
$('.user__firstname').text(user.firstname);
$('.user__lastname').text(user.lastname);
});
<header>
<div class="user-notlogged">Not logged in</div>
<div class="user">
<div class="user__firstname"></div>
<div class="user__lastname"></div>
</div>
</header>
jQuery
Backbonejs (2010), Embersjs (2011)
app.controller('UserCtrl', function ($scope, $http) {
$scope.user = false
$http.post('/login').success(function(user) {
$scope.user = user;
});
});
<header>
<div class="user-notlogged" ng-hide="user">Not logged in</div>
<div class="user" ng-show="user">
<div class="user__firstname">{{ user.firstname }}</div>
<div class="user__lastname">{{ user.lastname }}</div>
</div>
</header>
AngularJS
RiotJS (2014), VueJS (2015)
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
ReactDOM.render(<Timer />, mountNode);
ReactJS
Flux
import { createStore } from 'redux'
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
let store = createStore(counter)
store.subscribe(() =>
console.log(store.getState())
)
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })
Redux