ajax简介_动力节点Java学院整理

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

function success(text) { var textarea = document.getElementById('test-response-text'); textarea.value = text;}function fail(code) { var textarea = document.getElementById('test-response-text'); textarea.value = 'Error code: ' + code;}var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成  // 判断响应结果:  if (request.status === 200) {   // 成功，通过responseText拿到响应的文本:   return success(request.responseText);  } else {   // 失败，根据响应码判断失败原因:   return fail(request.status);  } } else {  // HTTP请求还在继续... }}// 发送请求:request.open('GET', '/api/categories');request.send();alert('请求已发送，请等待响应...');

对于低版本的IE，需要换一个ActiveXObject对象：

function success(text) { var textarea = document.getElementById('test-ie-response-text'); textarea.value = text;}function fail(code) { var textarea = document.getElementById('test-ie-response-text'); textarea.value = 'Error code: ' + code;}var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象request.onreadystatechange = function () { // 状态发生变化时，函数被回调 if (request.readyState === 4) { // 成功完成  // 判断响应结果:  if (request.status === 200) {   // 成功，通过responseText拿到响应的文本:   return success(request.responseText);  } else {   // 失败，根据响应码判断失败原因:   return fail(request.status);  } } else {  // HTTP请求还在继续... }}// 发送请求:request.open('GET', '/api/categories');request.send();alert('请求已发送，请等待响应...');