原生js实现Ajax请求

8 篇文章 0 订阅
5 篇文章 0 订阅

参考《javascript高级程序设计》https://blog.csdn.net/ddbwjkq

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest();
    }
    else if (typeof ActiveXObject !="undefined") {//检测原生XHR对象是否存在
       if(typeof arguments.callee.activeXString!="string"){//使用IE7以下MSXML库中的ActiveX对象创建
           var versions=[
               'MSXML2.XMLHttp.6.0',
               'MSXML2.XMLHttp.3.0',
               'MSXML2.XMLHttp'
           ],
               i,len;
           for(i=0,len=versions.length;i<len;i++){
               try{
                   new ActiveXObject(vesions[i]);
                   arguments.callee.activeXString=vesions[i];
                   break;
               }
               catch(e){
                   //跳过
               }
           }
       }
       return new ActiveXObject(arguments.callee.activeXString);
    }
    else{
        throw new Error("No XHR Object available");//若两个对象都不存在则抛出错误
    }
};
//-----------------GET请求---------------------
var xhr=createXHR();
xhr.onreadystatechange=function(){//只要readyState属性的值发生变化就会触发onreadystatechange事件
    if(xhr.readyState==4){//已经收到全部响应数据
        if((xhr.status>=200&&xhr<300)||xhr.status==304){
            alert(xhr.responseText)
        }
        else{
            alert("Request was unsuccessful:"+xhr.status);
        }
    }
};
var url="example.txt";
function addURLParam(url,name,value){//该函数用于在url中加入查询字符串
    url+=(url.indexOf("?")==-1?"?" : "&");
    url+=encodeURLComponent(name)+"="+encodeURLComponent(value);
}
url=addURLParam(url,"book","Javascript");//添加一个查询字符串
xhr.open("get",url,true);//启动一个GET请求
xhr.send(null);//发送
//--------------POST请求-------------------------
var xhr=createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if((xhr.status>=200&&xhr<300)||xhr.status==304){
            alert(xhr.responseText)
        }
        else{
            alert("Request was unsuccessful:"+xhr.status);
        }
    }
};
xhr.open("post",url,true);//启动一个GET请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置表单提交的内容类型
var form=document.getElementById("user-info");
xhr.send(serialize(form));//将表单的数据序列化

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值