前端-原生Ajax理解

前言： 这两天在做一个人日记网站，基于前端+Servlet+JSP+JavaBean+tomcat+mysql实现，由于之前的实践很少碰到前端内容，这次自己搞也是边学边弄，到了js这块，必不可少的就是Ajax技术，博主花了一些时间去学习了一下，并做点总结。

什么是Ajax?

简单地说，如果你访问一个没有用到Ajax技术的网页，通常你点一下按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷新。
Ajax的应用：
百度搜索提示，淘宝新会员注册时用户名验证，级联下拉列表，显示进度条……

补充一下下面的内容（摘录自知乎）：
ajax的全称是AsynchronousJavascript+XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）
这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。
（虽然提供异步通讯功能的组件默认情况下都是异步的，但它们也提供了同步选项，如果你好奇把那个选项改为false的话，你的页面就会死在那里）
xml只是一种数据格式，在这件事里并不重要，我们在更新一行字的时候理论上说不需要这个格式，但如果我们更新很多内容，那么格式化的数据可以使我们有条理地去实现更新。

过程及代码

其实在博主的脑袋里，Ajax就是一个超级有用的XMLHttpRequest对象啦，ajax就可以让js读取服务器上的数据。
那么首先你要创建出这个对象了咯，一般来说，Ajax的使用就像打电话一样分为四步：
1.你得有个手机。
2.拨号。
3.你开始说话balabala。。。
4.听别人说。。。。

那么Ajax：
1.创建Ajax对象。
2.连接到服务器。
3.发送请求。
4.接受返回值。

1.创建Ajax对象。

if (window.XMLHttpRequest) { // Mozilla……等非IE浏览器
var oAjax = new XMLHttpRequest(); // 创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
var oAjax = new ActiveXObject("Msxml2.XMLHTTP"); // 创建XMLHttpRequest对象
} catch (e) {
try {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象
} catch (e) {
}
}
}

每个浏览器对Ajax的支持是不同的，创建的方式也不同，以上判断代码就展示了在IE浏览器和非IE浏览器环境下用各自不同的方式创建XMLHttpRequest对象。
这里要注意一下js的一个特性，在使用判断时必须使用window.XMLHttpRequest而不能使用XMLHttpRquest,在js中用没有定义的变量会报错，使用没有定义的属性不会报错，而是仅仅给你一个undefined提示，在IE6浏览器下，XMLHttpRequest是没有定义的，考虑到兼容性问题，必须使用window.XMLHttpRequest来充当判断条件，这时浏览器就把它当window的一个属性，返回undefined而非报错，这就是我们需要的。

2.连接到服务器。

oAjax.open();
open()有三个参数，第一个参数为发送方式，值为POST，GET
第二个参数为你要访问的文件的url。
第三个为 值为true 或者 false ，true代表采用异步传输方式连接服务器。

3.发送请求
oAjax.send();

4 .接受返回值。

funtion getResult(){
if(oAjax.readyState==4){
      if(oAjax.status==200){
                            alert(oAjax.reponseText);
                            }else{alert("访问失败");}
}


}

readyState的值所代表的状态：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
status的值所代表的状态（最常见的5种）：
1.200表示成功
2.202表示请求被接受，但尚未成功
3.400错误的请求
4.404文件未找到
5.500内部服务器错误

四部曲完成了，为了提高的代码重用性，可以将代码封装到一个.js文件中，代码：

var net = new Object(); // 定义一个全局变量net
// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadDate(url, method, params);
}
// 编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
if (!method) { // 设置默认为的请求方式为GET
method = "GET";
}
if (window.XMLHttpRequest) { // Mozilla……等非IE浏览器
this.req = new XMLHttpRequest(); // 创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
this.req = new ActiveXObject("Msxml2.XMLHTTP"); // 创建XMLHttpRequest对象
} catch (e) {
try {
this.req = new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象
} catch (e) {
}
}
}
if (this.req) {
try {
var loader = this;
// 指定回调函数
this.req.onreadystatechange = function() {
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method, url, true); // 创建与服务器的连接
if (method == "POST") { // 当发送POST请求时，设置请求头
this.req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
this.req.send(params); // 向服务器发送请求
} catch (err) {
this.onerror.call(this); // 调用错误处理函数
}
}
}


// 重构回调函数
net.AjaxRequest.onReadyState = function() {
var req = this.req;
var ready = req.readyState; // 获取请求状态
if (ready == 4) {
if (req.status == 200) {
this.onload.call(this); // 调用回调函数
} else {
this.onerror.call(this); // 调用错误处理函数
}
}
}
// 重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function() {
alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}