前端知识-原生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);
}

你可能感兴趣的:(前端知识)