js ajax简单使用

文章部分资源来源:(http://blog.csdn.net/lzkkevin/article/details/6777474)以及(http://www.cnblogs.com/hwx0807/archive/2011/06/28/2092205.html)

用JavaScript实现的Ajax，在性能上要比使用Jquery的ajax方法快一些。javascript主要是利用XMLHttpRequest对象发送异步请求。

使用XMLHttpRequest对象发送请求分为4步完成:

(1).创建XMLHttpRequest对象

(2).设置回调函数

(3).用XMLHttpRequest对象的open方法建立通信连接

(4).发送请求

1.创建xmlhttprequest对象

<script type="text/javascript">  
//定义XMLHttpRequest对象  
if(window.XMLHttpRequest){  
    //兼容Mozilla、Safari等非IE浏览器  
    var xmlhttprequest = new XMLHttpRequest();  
}else{  
    if(window.ActiveXObject){  
        //兼容IE浏览器  
        try{  
            var xmlhttprequest = new ActiveXObject('Msxml12.XMLHTTP');  
        }catch(e){  
            try{  
                xmlhttprequest = new ActiveXObject('Microsoft.XMLHTTP');  
            }catch(e){  
            }  
        }  
    }  
}  
</script>

2.设置回调函数

xmlhttprequest.onreadystatechange = callback ;
function callback(){
    if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){  
        var result = xmlhttprequest.responseText;  
        if(result == "true"){
            　alert("success");
    　　}else{
       　　　　alert("fail");
    　　}
　　}
}

3.建立通信连接，可以有get和post两种方式

xmlhttprequest.open("POST","setServer.do?serverSel="+serverSel);
//xmlhttprequest.open("GET","setServer.do?serverSel="+serverSel);

4.发送请求

xmlhttprequest.send(null);

完整代码以及解析:

POST方式:

function changeServer(){
    document.getElementById("serverCheck").checked = false ;
    var serverSel = document.getElementById("serverSel").value;
// 设置回调函数，用来判断代码执行是否正确，以及执行结束后的操作
    xmlhttprequest.onreadystatechange = callback ;
//调用XMLHttpRequest对象的open方法，打开与服务器之间的同步通信连接
//xmlhttprequest.open(Method,Url,Async,User,Password)方法
//Method:表示Http方法，POST,GET,PUT,PROPFIND
//Url:参数请求的url 
//Async:可选项，设置是否为异步通信， 默认true表示可以异步，
//取false,表明异步发出请求之后不需要等待服务端的响应，继续执行其他操作。
//User,password:可选项，表示请求的文件需要进行服务器进行验证 
xmlhttprequest.open("POST","setServer.do?serverSel="+serverSel);

// 设置请求的消息头 
//application/x-www-form-urlencoded表示传递的是表单值 
// 一般使用POST都必须设置此项，否则服务器无法识别传递过来的数据 
//虽然该值表示表单值，但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据 
//甚至也可以application/json类型发送JavaScript对象数据  
    xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
// 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求 
//和其他客户端的普通请求   
    xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');

//向服务器发送请求 xmlhttprequest.send(null); }

function callback(){
//接收响应数据
//xmlhttprequest.readyState返回当前请求的状态，如果为4则交互完成
//xmlhttprequest.status返回服务器的响应状态。200表示ok 一切正常
    if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
// xmlhttprequest.responseText是在action中返回的内容，可以根据内容判断后台执行结果  
        var result = xmlhttprequest.responseText;  
        if(result == "true"){
            　alert("success");
    　　}else{
       　　　　alert("fail");
    　　}
　　}
}

PrintWriter out = null;
        try {
            out = response.getWriter();
            if (flag) {
                out.print("true");
            }else {
                out.print("false");
            }
            out.close();  
        } catch (IOException e) {
            e.printStackTrace();
        }

//xmlhttprequest.responseText得到的内容正是PrintWriter输出的内容

另附:XMLHttpRequest.readyState的五种状态

readyState 返回当前请求的状态，只读.
-
(0)实例化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法作好准备。值为0表示对象已经实例化，否则浏览器会报错－－对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：
创建－初始化请求－发送请求－接收数据－解析数据－完成
在具体应用中，明确了readyState的五个状态（XMLHttpRequest对象的生命周期各个阶段）的含义。

GET方式:(比POST方式少设置两个内容，一般post的时候需要加上如下设置)

// 设置请求的消息头 
//application/x-www-form-urlencoded表示传递的是表单值 
// 一般使用POST都必须设置此项，否则服务器无法识别传递过来的数据 
//虽然该值表示表单值，但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据 
//甚至也可以application/json类型发送JavaScript对象数据  
    xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
// 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求 
//和其他客户端的普通请求   
    xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');