在这篇文章，我使用 Node.js作为后端。没错，这就可以全栈（浏览器和服务器）JS了。Node.js 是很简洁的，我鼓励你能在 Github下载demo，并关注该项目。下面是服务器端的代码：
// app.js var app = http.createServer(function(req, res){ if(req.url.indexOf("/scripts/") >= 0){ render(req.url.slice(1), "application/javascript", httpHandler); } else if(req.headers['x-requested-with'] === 'XMLHttpRequest'){ // Send Ajax response } else{ render('views/index.html', 'text/html', httpHandler); } }
该代码段通过检测请求 URL，确定该app返回的相应内容。如果该请求来自 scripts 目录，那么服务器将返回内容类型（content type）为 application/javascript 的相应文件。如果请求头部的 x-requested-with 被设为 XMLHttpRequest，那么该请求是 Ajax 请求，然后返回相应数据。除了以上两种情况，服务器将会返回 views/index.html。
下面我将会展开上一代码段处理 Ajax 请求的注释部分进行深入讲解。在 Node.js端，我已处理了 render 和 httpHandler 的体力活：
// app.js function render(path, contentType, fn) { fs.readFile(__dirname + 'https://www.jb51.net/' + path, 'utf-8', function (err, str) { fn(err, str, contentType); }); } var httpHandler = function (err, str, contentType) { if (err) { res.writeHead(500, {'Content-Type': 'text/plain'}); res.end('An error has occured: ' + err.message); } else { res.writeHead(200, {'Content-Type': contentType}); res.end(str); } };
render 函数异步读取被请求文件的内容。该函数向被作为回调函数的 httpHandler 传递一个引用。
httpHandler 函数检测 error 对象是否存在（如：被请求文件不能被打开，该对象就会存在）。另外，指定类型是好的做法，那么服务器返回的文件内容就会拥有适当的 HTTP 状态码（status code）和内容类型（content type）。
测试 API
让我们为后端API编写一些单元测试，从而确保它们能正确运行。对于这类测试，我会请求 supertest 和 mocha帮助。
// test/app.request.js it("responds with html", function(done){ request(app) .get("https://www.jb51.net/") .expect("Content-Type", /html/) .expect(200, done); }); it('responds with javascript', function (done) { request(app) .get('/scripts/index.js') .expect('Content-Type', /javascript/) .expect(200, done); }); it('responds with json', function (done) { request(app) .get('https://www.jb51.net/') .set('X-Requested-With', 'XMLHttpRequest') .expect('Content-Type', /json/) .expect(200, done); });
这些测试确保了我们的 app 对于不同请求能返回正确的内容类型(content type)和HTTP 状态码（status code）。一旦你安装了这些依赖，那么你就能使用命令 npm test 运行这些测试。
界面
现在，让我们看看用户界面的 HTML 代码：
// views/index.html <h1>Vanilla Ajax without jQuery</h1> <button data-url="https://www.jb51.net/">Retrieve</button> <p></p>
上述的 HTML 代码看起来很简洁。没错，正如你所看到的，所有令人兴奋的事情都发生在 JavaScript。
onreadystate vs onload
如果你看过任何一本权威的、关于 Ajax 的书，你可能会发现 onreadystate 在书上随处可见。该回调函数需要通过嵌套的 ifs 或多个 case 语句完成，这使得难以记忆。让我们再次回顾 onreadystate 和 onload 事件。
(function() { var retrieve = document.getElementById('retrieve'), results = document.getElementById('results'), toReadyStateDescription = function(state) { switch (state) { case 0: return 'UNSENT'; case 1: return 'OPENED'; case 2: return 'HEADERS_RECEIVED'; case 3: return 'LOADING'; case 4: return 'DONE'; default: return ''; } }; retrieve.addEventListener('click', function(e) { var oReq = new XMLHttpRequest(); oReq.onload = function() { console.log('Inside the onload event'); }; oReq.onreadystatechange = function() { console.log('Inside the onreadystatechange ev![此处输入图片的描述][1]ent with readyState: ' + toReadyStateDescription(oReq.readyState)); }; oReq.open('GET', e.target.dataset.url, true); oReq.send(); }); }());
上述代码会在 控制台（console） 输出以下语句：
onreadystatechange 事件能在请求的任何过程中被触发。如能在每个请求前、请求末。但根据文档，onload 事件只会在请求成功后触发。又因为 onload 事件是一个常见的 API，所以你能在很短时间内掌握它。onreadystatechange 事件可作为后备（原文是backwards compatible 向后兼容？）方案。而 onload 事件应该是你的首选。而且 onload 事件与 jQuery 的 success 回调函数类似，难道不是吗？