关于ajax的一些总结

Ajax

定义

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是在不重新加载整个页面的情况下, 与服务器交换数据并更新部分网页的技术 .

XMLHttpRequest 对象

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象:

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

新的浏览器都是使用XMLHttpRequest对象:

new XMLHttpRequest().
var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

为了应对所有浏览器 , 写法如下 :

var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

如何向服务器发送请求 , 我们使用XMLHttpRequest的open()和send()方法 :

xmlhttp.open(METHOD,URL,ASYNC);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求
	method：请求的类型；GET 或 POST
	url：文件在服务器上的位置
	async：true（异步）或 false（同步）
send(string)	将请求发送到服务器, string 仅适用于 post 请求

---

Async = true(异步请求)当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Async = false(同步请求) 不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Jquery.ajax

基本形式

$.ajax({
    type:"POST",//默认GET
    url:URL,//发送请求的地址
    dataType : "json",//如果不指定,jquery会根据http包的MIME信息智能判断
    cache : true,//默认缓存为true
    async : false,//默认是否异步为true
    success : function(data,textStatus) {
        //do something when the Ajax request succeed
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
        //do something when the Ajax request failed
    },
    beforeSend:function(XMLHttpRequest){
        //do something before send
    },
    complete:function(XMLHttpRequest,textStatus){
        //do something whether the Ajax request failed or not
    },
    dataFilter:function(data,dataType){
        //filter the data before the success function execute
    }
    });

上面的 Jquery.ajax也可以简写成Jquery.get或是Jquery.post , 就是相当于直接指定了type .

ajax请求遇到session过期的处理

普通非ajax请求在遇到session过期时 , 可以用:

response.sendRedirect("/login.html")

, 或是用

request.getRequestDispatcher("/login.html").forward(request, response);

两者区别是 ,前者在返回给浏览器,浏览器重新发送一个新的request请求给服务器,request变了;后者是在服务器内部实现请求转发,是同一个request,浏览器发过去一个请求,中间被服务器转发过一次,地址栏显示的地址还是之前那个地址,但是返回的页面已经不是之前请求的页面了.

对于ajax请求,在遇到session过期的情况下,上述两个方法都是不可取的, 因为ajax请求的response信息是返回给回调函数的,所以只能根据回调函数的返回信息,来确定是否过期并且在回调函数里发送请求; 这里因为一个项目会有很多ajax请求,我们不可能在每个ajax请求都写一个这样的判断, 这里给出一个办法, 就是重写jquery的ajax方法, 这样所有的ajax请求在遇到session失效时, 由重写的ajax方法统一来判断,具体代码如下:

前台Jquery ajax重写代码参考:

(function($){
    //备份jquery的ajax方法
    var _ajax=$.ajax;

    //重写jquery的ajax方法
    $.ajax=function(opt){
        //备份opt中error和success方法
        var fn = {
            error:function(XMLHttpRequest, textStatus, errorThrown){},
            success:function(data, textStatus){}
        }
        if(opt.error){
            fn.error=opt.error;
        }
        if(opt.success){
            fn.success=opt.success;
        }

        //扩展增强处理
        var _opt = $.extend(opt,{
            error:function(XMLHttpRequest, textStatus, errorThrown){
                //错误方法增强处理

                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success:function(data, textStatus){
                //成功回调方法增强处理
                var status = XMLHttpRequest.status;
                if(status=='状态码'){
                    var url =   XMLHttpRequest.getResponseHeader("Location");
                    alert("用户已经过期或者已经在其他地方登陆");
                    window.location.href = url;
                    return;
                }

                fn.success(data, textStatus);
            }
        });
        _ajax(_opt);
    };
})(jQuery);

后台JAVA代码参考:

//如果是ajax请求响应头会有，x-requested-with；  
if (request.getHeader("x-requested-with") != null   && request.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){  
    response.setStatus("状态码");//指定一个状态码 作为重写过后的ajax方法的判断依据
    response.setHeader("Location",request.getContextPath()+"/login.html"); 
    return false;
}