兼容性IE的Ajax原生Javascript代码

说明:异步会立即返回,不阻塞后面代码执行。同步恰恰相反。

同步调用get

function send_request(){
    var xmlhttp = null;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else if (window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        var requrl = 'user/save.do?username=zhangsan&age=10';//url可以是相对路径也可以是绝对,get需要将参数放在url里,如果参数有中文先调用encodeURIComponent("username=张三&age=10")编一下码
        xmlhttp.open( "GET",requrl,false);//第一个参数指明访问方式,第二次参数是目标url,第三个参数是“是否异步”,true表示异步,false表示同步
        xmlhttp.send();
        return xmlhttp.responseText
    }else{
        alert("您的浏览器不支持AJAX!");
    }
};

异步调用get

function send_request(){
    var xmlhttp = null;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else if (window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        var requrl = 'user/save.do?username=zhangsan&age=10';//url可以是相对路径也可以是绝对,get需要将参数放在url里,如果参数有中文先调用encodeURIComponent("username=张三&age=10")编一下码
        xmlhttp.open( "GET",requrl,true);//第一个参数指明访问方式,第二次参数是目标url,第三个参数是“是否异步”,true表示异步,false表示同步
        xmlhttp.onreadystatechange=function(){//异步需要指定回调函数
            if (xmlhttp.readyState==4 && xmlhttp.status==200){//readyState为4,表示ajax请求已经完成,status是目标url返回的http状态码,200表示服务器响应成功
            var d= xmlhttp.responseText; 
            // 处理返回结果 
          } 
        }
        xmlhttp.send();
    }else{
        alert("您的浏览器不支持AJAX!");
    }
};

异步调用post

function send_request(){
    var xmlhttp = null;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else if (window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        var requrl = 'user/save.do';//url可以是相对路径也可以是绝对
        xmlhttp.open( "POST",requrl,true);//第一个参数指明访问方式,第二次参数是目标url,第三个参数是“是否异步”,true表示异步,false表示同步
        xmlhttp.onreadystatechange=function(){//异步需要指定回调函数
            if (xmlhttp.readyState==4 && xmlhttp.status==200){//readyState为4,表示ajax请求已经完成,status是目标url返回的http状态码,200表示服务器响应成功
            var d= xmlhttp.responseText; 
            // 处理返回结果 
          } 
        }
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post需要设置Content-type,防止乱码
        xmlhttp.send("username=zhangsan&age=10");//post需要将参数放在send方法,当然参数放在url也还是可以的,但不好
    }else{
        alert("您的浏览器不支持AJAX!");
    }
};

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