一个比较好用的JS原生封装Ajax.js，使用方法与jQuery一样

Ajax新手可以直接载入使用的JS封装，可以实现http连接的方式，包括POST和GET两种方式、我已经详细注释了代码，使用的时候可以直接去掉注释并压缩代码，可加速载入。代码使用与jQuery一样，

function ajax(opt) {
        opt = opt || {};//opt以数组方式存参，如果参数不存在就为空。
        opt.method = opt.method.toUpperCase() || 'POST';//转为大写失败，就转为POST
        opt.url = opt.url || '';//检查URL是否为空
        opt.async = opt.async || true;//是否异步
        opt.data = opt.data || null;//是否发送参数，如POST、GET发送参数
        opt.success = opt.success || function () {};成功后处理方式
        var xmlHttp = null;//定义1个空变量
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();//如果XMLHttpRequest存在就新建，IE大于9&&非IE有效
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//用于低版本IE
        }
        var params = [];//定义1个空数组
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);//将opt里的data存到push里
        }
        var postData = params.join('&');//追加个& params
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);//开始请求
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');//发送头信息，与表单里的一样。
            xmlHttp.send(postData);//发送POST数据
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);//GET请求
            xmlHttp.send(null);//发送空数据
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//readyState有5个状态，可以百度一下看看都有什么。当请求完成，并且返回数据成功
                opt.success(xmlHttp.responseText);//返回成功的数据
            }
        };
    }

使用示例：

ajax({
    method: 'POST',//提交的方法，可以为GET或POST
    url: 'test.php',//服务器端处理
    data: {
//发送给服务器的数据
        name1: 'value1',
        name2: 'value2'
    },
    success: function (response) {
//成功后要做的事，如替换某网页区域，返回弹窗什么的
       console.log(response)；
    }
});

 

压缩版：

function ajax(opt){opt=opt||{};opt.method=opt.method.toUpperCase()||'POST';opt.url=opt.url||'';opt.async=opt.async||true;opt.data=opt.data||null;opt.success=opt.success||function(){};var xmlHttp=null;if(XMLHttpRequest){xmlHttp=new XMLHttpRequest()}else{xmlHttp=new ActiveXObject('Microsoft.XMLHTTP')}var params=[];for(var key in opt.data){params.push(key+'='+opt.data[key])}var postData=params.join('&');if(opt.method.toUpperCase()==='POST'){xmlHttp.open(opt.method,opt.url,opt.async);xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');xmlHttp.send(postData)}else if(opt.method.toUpperCase()==='GET'){xmlHttp.open(opt.method,opt.url+'?'+postData,opt.async);xmlHttp.send(null)}xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4&&xmlHttp.status==200){opt.success(xmlHttp.responseText)}}}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/6