原生AJAX

AJAX

AJAX 是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

原生ajax定时请求

var timeInterval =  setInterval(()=>{
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('GET', 'getStatus.jhtml?orderId='+orderId, true)
        xmlHttp.send();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 5.响应接口返回数据
                var res = xmlHttp.responseText
                if (JSON.parse(res).data.status=='1'){
                    clearInterval(timeInterval)
                    System.alert({
                        title: '提示信息',
                        text: '支付成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        System.closeThisWindow()
                    },3000)
                }
            }
        }
    },1500);

原生ajax-get请求

var xhr = new XMLHttpRequest();
xhr.open("get","thisurl?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.status == 200 && xhr.readyState == 4)	{ 
    console.log(xhr.responseText); 
    document.querySelector(".showmsg").innerHTML = xhr.responseText;
     }
}

原生ajax-post请求

var xhr = new XMLHttpRequest();
xhr.open("post","thisurl");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
	// 判断服务器是否响应，判断异步对象的响应状态
	if(xhr.status == 200 && xhr.readyState == 4){
	 	document.querySelector(".showmsg").innerHTML = xhr.responseText;
	}
}

jquery中ajax请求

$.ajax({
	type:'POST', 		// 规定请求的类型（GET 或 POST）
	url:uploadV, 		// 请求的url地址
	dataType:'json', 	//预期的服务器响应的数据类型 
	data:{},			//规定要发送到服务器的数据
	beforeSend:function(){ 
	发送请求前运行的函数（发送之前就会进入这个函数）
	},
	success: function(result){ 
	当请求成功时运行的函数
	},
	error:function(result){ 
	失败的函数
	},
	complete:function(){
 		请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
	}
});

本文地址：https://blog.csdn.net/weixin_49314958/article/details/107292397