经验分享：原生态Ajax的创建【java学习笔记Kingsley】Java开发工程师
一．Ajax的介绍
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
二．原生态Ajax创建
在此之前老K需要说说XMLHttpRequest对象，它是Ajax技术体系中最为核心的技术。缺少了它，Ajax的其余技术就无法成为一个有机的整体，将会土崩瓦解。
因为XMLHttpRequest还没有得到标准化，不同的浏览器使用不同的方法来创建XMLHttpRequest对象。不同的浏览器使用不同的方法来创建XMLHttpRequest对象。Internet Exolorer使用ActiveXObject。其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。要克服这个问题，可以使用这段简单的代码：
var XMLHttp=null;
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest()；
}else if (window.ActiveXObject){
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")；
}
①解析html文件
场景解释：点击按钮，立即实现haha.html的内容（浏览器没有刷新）。
<script type="text/javascript">
window.onload = function() { //页面加载函数
var button = document.getElementById("button");
button.onclick = function() {
var request = new XMLHttpRequest(); //得到XMLHttpRequest对象（不重复上面代码）
var url = "haha.html"; //haha.html文件路径（与该文件同一文件夹内）
var method = "GET"; //请求方式
request.open(method, url); //向服务器发送请求，接收两个参数，请求方式和资源路径
request.send(null); //该方法可为已经待命的请求发送指令，若请求方式为get，则不会发送任何数据
request.onreadystatechange = function() { //设置onreadystatechange的事件处理函数
if (request.readyState == 4) { //代表请求的状态，4为响应发送完毕
if (request.status == 200 || request.status == 304) { //status代表服务器状态码，200（ok），304（没有被修改）
var object = request.responseText; //得到html数据
alert(object); //显示数据
}
}
}
}
}
</script>
②解析xml文件
场景解释：点击按钮，立即实现haha.xml的内容（浏览器没有刷新）。Xml文件结构如下：
<?xml version="1.0" encoding="UTF-8"?>
<fishcoo>
<java>Kingsley</java>
</fishcoo>
<script type="text/javascript">
window.onload = function() { //页面加载函数
var button = document.getElementById("button");
button.onclick = function() {
var request = new XMLHttpRequest(); //得到XMLHttpRequest对象（不重复上面代码）
var url = "haha.html"; //haha.xml文件路径（与该文件同一文件夹内）
var method = "GET"; //请求方式
request.open(method, url); //向服务器发送请求，接收两个参数，请求方式和资源路径
request.send(null); //该方法可为已经待命的请求发送指令，若请求方式为get，则不会发送任何数据
request.onreadystatechange = function() { //设置onreadystatechange的事件处理函数
if (request.readyState == 4) { //代表请求的状态，4为响应发送完毕
if (request.status == 200 || request.status == 304) { //status代表服务器状态码，200（ok），304（没有被修改）
var object = request.responseXML; //得到xml数据，返回的是dom对象
var value=document.getElementByTagName(“java”)[0].firstChild.nodeValue //dom解析得到xml中的值
alert(value); //显示数据
}
}
}
}
}
</script>
③解析json数据
场景解释：点击按钮，立即实现haha.js的内容（浏览器没有刷新）。js文件结构如下：
{“fishcoo”:”Kingsley”}
<script type="text/javascript">
window.onload = function() { //页面加载函数
var button = document.getElementById("button");
button.onclick = function() {
var request = new XMLHttpRequest(); //得到XMLHttpRequest对象（不重复上面代码）
var url = "haha.html"; //haha.js文件路径（与该文件同一文件夹内）
var method = "GET"; //请求方式
request.open(method, url); //向服务器发送请求，接收两个参数，请求方式和资源路径
request.send(null); //该方法可为已经待命的请求发送指令，若请求方式为get，则不会发送任何数据
request.onreadystatechange = function() { //设置onreadystatechange的事件处理函数
if (request.readyState == 4) { //代表请求的状态，4为响应发送完毕
if (request.status == 200 || request.status == 304) { //status代表服务器状态码，200（ok），304（没有被修改）
var object = request.responseText; //返回的是json格式的字符串
Var Objson=Eval(“(”+object+”)”); //eval函数将字符串装换为脚本执行，即转化为json对象
alert(Objson.fishcoo); //显示数据(Kingsley)
}
}
}
}
}
</script>
三．经验总结
看到这里，相信大家对原生态Ajax的创建也有着一定的理解了。虽然现在大家都使用JQuery实现Ajax，但其实就是对原生态的Ajax进行封装，学习的魅力就在于不断的探索，所以了解了解还是有点需要的（比如，在女神面前吹吹牛啊，哈哈）。
老K在之前的学习过程中，犯了挺多错误的，跟大家说说，少走点弯路。
◇ 资源路径要写对，不同文件夹下又如何引用呢，需要大家多多思考。
◇ open方法的两个参数，要注意前后顺序，老K就写错了（怪我眼小咯）.....
◇ xml文件，一定要有文件头，否则无法解析。
◇ json格式的书写，这个大家一定要注意，一对大括号{},key和value之间用冒号且用双引号括起来。
◇最后一个，说出来不要问我笨/(ㄒoㄒ)/~~，老K当初做这个练习时，是在单机下玩得，一直不成功。最后查了查度娘，才知道要在web工程实现（所以学习一技术，要了解它的应用场景，灵活使用）。
Java开发工程师的学习道路虽然艰难，但只要有恒心、信心、耐心，就一定有所收获。加油！
1914篇文章
