ajax请求，以及jQuery实现的方法

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的方法时的一些差异和基本逻辑。