用纯js实现jquery里面的getJSON方法在网上是有比较多的资料的, 比如在You Might Not Need Jquery中,就有如下实现:

// jquery
$.getJSON('/my/url', function(data) {

});

// pure js
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

但是我在用这段代码异步获取验证码图片时,其效果却和getJSON不一样, 用后者时是可以正常返回结果的,但是用纯js时,后台却返回了404, 对比两次的HTTP请求之后,发现用纯js方法时构造的HTTP请求比用getJSON少了一个Header, 就是X-Requested-With,这是一个很重要的非标准Header, Wiki解释的比较清楚了,

mainly used to identify Ajax requests. Most JavaScript frameworks send this field with value of XMLHttpRequest

也就是说这个Header是用来标记请求是否为Ajax的,为什么要这样做呢? 为了防止跨站脚本攻击,也就是大名鼎鼎的CSRF,那么既然如此,需要怎么做呢? 很简单,就是在上面的代码open之后添加如下一行即可:

request.setRequestHeader("X-Requested-With", "XMLHttpRequest");


blog comments powered by Disqus

Published

27 December 2015

Category

tech_world

Tags