Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
P.S. 其实本blog也采用了Ajax加载方式哟。
简介
如果对于Ajax进行一个简短的总结，那么就是只刷新网页的一个部分，并且获取数据是在后台进行的，前台用户还能继续操作。
XMLHttpRequest对象
这个对象充当了浏览器中脚本（如JavaScript）和服务器的中间人，是Ajax的核心。
并且，如果你不准备支持IE，就不用考虑跨浏览器的事情。但是为了使这篇文章覆盖面积更广,我将做一个简短的描述
首先，我们先编写一个ajax.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Ajax test</title>
</head>
<body>
<script src="js/addLoadEvent.js"></script>
<script src="js/getHTTPObject.js"></script>
<script src="js/getNewContent.js"></script>
<!--<p>下面是一个随机图片api，如果刷新了就会改变，而ajax不会刷新，所以加载时图片不会改变。</p>
<img src = "/api/fengjing"></img>
<button onclick="getNewContent();">Ajax加载</button>
<p>P.S.:Ajax加载后在下方</p>
-->
<div id="outAjax"></div>
</body>
</html>在测试时候，不需要写出注释中的内容，那里只是为了证明这是ajax加载的而已。此网页的在线版本在这里：ajax.html
addLoadEvent.js是一个替代window.onload的好用的js插件，避免window.onload只能启用最后一个的弊端。源码如下：
function addLoadEvent(func) {
var oldonload = window.onload;//获取window.onload这个对象里的值
if (typeof window.onload != 'function') {//当window.onload没有任何值的时候，会返回"object";
window.onload = func;//直接更改window.onload
} else {//有其他函数的时候
window.onload = function(){
oldonload();//先执行原来的函数
func();//执行现在的函数
}
}
}为了模拟服务器的响应，我们在ajax.html的同源目录下创建一个example.txt:
当你看到这句话是，就成功了。getHTTPObject函数
接下来,我们要编写一个getHTTPObject函数.由于不同的浏览器(特指IE)有不同的获取对象的方法,而且不同的IE版本有不同的方法.如果不是使用IE,只需下面一行:
function getHTTPObject() {
return new XMLHttpRequest();
}而如果你考虑最大兼容,那么就要这样:
function getHTTPObject() {
if(typeof XMLHttpRequest == "undefined") {//是IE
XMLHttpRequest = function () {
try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try{ return new ActiveXObject("Maxml2.XMLHTTP.3.0"); }
catch (e) {}
try{ return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {}
return false;//不支持Ajax
}
}
return new XMLHttpRequest();//不是IE
}写成函数的好处就是可以直接用变量赋值,如:var request=getHTTPObject();
getNewContent函数
XMLHttpRequest对象有很多方法,我们只需要传输example.txt内的文字,所以我们只需要使用open方法:指定服务器上将要访问的文件,指定请求类型:GET、POST或SEND.第二个参数是请求文件名路径,第三个参数是用来指定请求是否异步发送和处理.下面是我们的getNewContent函数：
function getNewContent() {
var request = getHTTPObject();
//获取XMLHttpRequest对象
if (request) {
//获取成功
request.open( "GET", "example.txt", true );
//请求example.txt
request.onreadystatechange = function () {
//服务器返回响应时这个函数会执行,后面也可以跟一个单独的函数.
if (request.readyState == 4) {
//见下面注释一
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('outAjax').appendChild(para);
}
//if都是插入一个p元素
};
request.send(null);
} else {
alert('抱歉，你的浏览器不支持XMLHttpRequest');
}
}
//addLoadEvent(getNewContent);注释一:readyState有5个返回的值:
- 0表示未初始化
- 1表示正在加载
- 2表示加载完毕
- 3表示正在交互
- 4表示完成
这里的request.readyState == 4表示完成
注意一下,这里是异步请求.js文件在发送请求后会继续执行,所以这里的if语句内的必须等到返回4执行完毕才能执行,否则会出错.
还有在ajax请求中,一定要注意同源策略,否则是无法在其他的域名请求的.同源策略一个很重要的响应头就是Access-Control-Allow-Origin.有兴趣的可以看一下MDN的介绍:跨源资源共享（CORS）,如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段.
一些问题
虽然说Ajax有很多好处,可是他也有一些问题,例如很多网站滥用Ajax,导致很多操作并没有返回的按键,这就不同于我们的操作习惯.所以基于这些问题,有一个新的解决方案:Hijax.这个就留给大家自己去探索了.
Comments | NOTHING