原生Ajax get和post方法请求及对其进行封装

// post方法请求

function loadX()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            var str = '';
            var postData = {"mobile":15626192509,"password": 12313};
            postData = (function(value){
              for(var key in value){
                str += key+"="+value[key]+"&";
              };
              return str;
            }(postData));

            xmlhttp.open("POST","地址",true);//连接到服务器
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置头部信息
            xmlhttp.send(postData);//发送数据
            xmlhttp.onreadystatechange=function()//响应服务器时所做的准备
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)//响应成功
                {
                    var data = JSON.parse(xmlhttp.responseText);//解析数据
                    console.log(data);
                }
            }
            
        }
        loadX();

---------------------------------------------------------------------------------------------------------------------------------------------------------

       // get方法请求
        function getXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var data = JSON.parse(xmlhttp.responseText);
                }
            }
            xmlhttp.open("GET","地址",true);
            xmlhttp.send();
        }

      getXMLDoc()

----------------------------------------------------------------------------------------------------------------------------------------------------

//对原生Ajax方法进行封装
function ajax2(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') {//请求方法为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') {//请求方法为GET,则执行如下操作
			xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
			xmlHttp.send(null);
		}
		xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//响应是否成功
				var data = JSON.parse(xmlHttp.responseText);
				opt.success(data);
			}
		};
	}

-------------------------------------------------------------------------------------------------------------------------------

//封装后调用

ajax({
	method: 'GET',//请求方法
	url: "地址",
	data: {//要传输的数据
             
	},
	success: function (data) {
                
        if(data.status == 1)//请求成功
        {
                    
        }
        else//请求失败
        {
                    
        }
                
    }
});

 

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