GET 请求
假设给定一个ID，空的负载，使用GET请求
jQuery:
$.ajax('myservice/username', {
data: {
id: 'some-unique-id'
}
})
.then(
function success(name) {
// ...
},
function error(data, status) {
// ...
console.log(status)
}
)
Native XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'myservice/username');
xhr.onload = function() {
if (xhr.status === 200 && xhr.readyStatus === 4) {
console.log(xhr.responseText);
} else {
console.log(xhr.status);
}
}
IE7-使用 new ActiveXObject('MSXML2.XMLHTTP.3.0') 代替 new XMLHttpRequest():
POST
假如我们给服务器提交消息，使用POST
jQuery:
var newName = 'James Sawyer';
$.ajax('myservice/username?' + $.param({id: 'some-unique-id'}), {
method: 'POST',
data: {
name: newName
}
})
.then(
function success(name) {
if (name !== newName) {
console.log('something went wrong, name now is ' + name)
}
},
function error(data, status) {
console.log(status);
}
)
Native XMLHttpRequest:
var newName = 'James Sawyer',
xhr = new XMLHttpRequest();
xhr.open('POST', 'myservice/username?id=some-unique-id');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
// ...
} else if (xhr.status !== 200) {
//...
}
}
xhr.send(encodeURI('name='+newName));
URL encoding
对参数进行编码：
jQuery:
$.param({
'key1': 'some value',
'key 2': 'another value'
})
// "key1=some+value&key+2=another+value"
原生实现：
function param(obj) {
var encodedString = '';
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (encodedString.length > 0) {
encodedString += '&';
}
encodedString += encodeURI(prop + '=' + obj[prop]);
}
}
return encodedString
}
对于url将其变为对象形式：
// 即
url = "https://www.google.co.jp/search?q=lazy+load&oq=lazy+load&aqs=chrome..69i57j0l5.1969j0j4&sourceid=chrome&ie=UTF-8#q=parse+url+query+string+to+object&*"
// 变为这种形式：
{
q: 'lazy+load',
oq: 'lazy+load',
aqs: "chrome..69i57j0l5.1969j0j4"
ie: "UTF-8"
oq: "lazy+load"
q: "lazy+load"
sourceid:"chrome"
}
// 使用 decodeURIComponent()
function decodeParam(url) {
var str = url.slice(url.indexOf('?') + 1);
var obj = str.split('&').reduce(function(prev, curr, i, arr) {
var p = curr.split('=');
prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
return prev;
}, {})
return obj;
}
发送和接收JSON
比如我们想更新某个用户1234的某些信息，使用 'PUT' 请求
jQuery:
$.ajax('myservice/user/1234', {
method: 'PUT',
contentType: 'application/json',
processData: false,
data: JSON.stringify({
name: 'James Sawyer',
age: 27
})
})
.then(
function success(userInfo) {
// userInfo 是一个JS对象，包含name, age等属性
}
)
Native XMLHttpRequest:(IE8+)
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'myservice/user/1234');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
var userInfo = JSON.parse(xhr.responseText);
}
};
xhr.send(JSON.stringify({
name: 'James Sawyer',
age: 27
}))
CORS 跨域请求
跨域ajax请求默认不发送cookie,必须将 withCredentials 设置为 true
jQuery:
$.ajax('http://someotherdomain.com', {
method: 'POST',
contentType: 'text/plain',
data: 'sometext',
beforeSend: function(xhr) {
xhr.withCredentials = true;
}
})
Native XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://someotherdomain.com');
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send('sometext');
// 对于IE8/9 可以将 'new XMLHttpRequest()' 替换为 'new XDomainRequest()'
if (new XMLHttpRequest().withCredentials === undefined) {
var xdr = new XDomainRequest();
xdr.open('POST', 'http://someotherdomain.com');
xdr.send('sometext');
}
JSONP
从不遵守同源策略的服务器中请求内容，使用动态生成 'script' 的hack方式
jQuery:
$.ajax('http://jsonp-aware-endpoint.com/user', {
jsonp: 'callback',
dataType: 'jsonp',
data: {
id: 123
}
})
.then(
function(response) {
// 处理从服务器请求的数据
}
)
Native XMLHttpRequest:
调用全局函数，将请求的数据传入
window.myJsonpCallback = function(data) {
// 处理从服务器请求的数据
}
var scriptElm = document.createElement('script');
scriptElm.setAttribute('src', 'http://jsonp-aware-endpoint.com/user');
document.body.appendChild(scriptElm);
总结
主要对比jQuery和原生API在使用ajax的方法时的一些差异和基本逻辑。
