原生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//请求失败
        {
                    
        }
                
    }
});
-------------------------------------------------------
Jquery的ajax使用
var arr = [{id:1, score:2}]
var json=JSON.stringify({'jsonArr':arr});
var data2={'jsonObj':json,'userName':userName};
var url2 = "studentUploadTask.nx"+"&userName="+ "student1";
$.ajax({
	type: 'post',
	dataType:'json',
	data: data2,
	url: url2,
	success: function(result){
		console.log(result);
	}
});

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值