欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生AJAX

程序员文章站 2022-06-25 12:16:21
AJAXAJAX 是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。原生ajax定时请求var timeInterval = setInterval(()=>{ var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET'...

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