Ajax请求步骤与代码

最新推荐文章于 2022-03-20 16:55:33 发布

原创最新推荐文章于 2022-03-20 16:55:33 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

Ajax封装

//三个参数的意思：

url：请求地址（不能出现中文）
success：请求成功后执行函数
error：请求失败后执行的函数

function ajax(url,succuss,error){
//1.创建异步对象
var xml=new XMLHttpRequest();
//2.设置请求方式和请求地址
xml.open(“get”,url,true);
//3.发生请求
xml.send();
//4.监听状态变化

    xml.onreadystatechange=function(ev){
        if(xml.readyState===4){
            if(xml.status>=200&&xml.status<=300||
            styleMedia.status===304){
                // console.log("接收成功");
                succuss(xml);
            }else{
                // console.log("接收失败");
                error(xml);
            }
        }
    }
}

请求参数

get请求方式(直接把参数以key=vaule的形式加在url后面)

		var xhr = new XMLHttpRequest();
		xhr.open("get","ajax-get.php?username=name",true);
		xhr.send();
		xml.onreadystatechange=function(ev){
        if(xml.readyState===4){
            if(xml.status>=200&&xml.status<=300||
            styleMedia.status===304){
                // console.log("接收成功");
                succuss(xml);
            }else{
                // console.log("接收失败");
                error(xml);
            }
        }
    }

post请求方式(直接把参数以key=vaule的形式加在send中)

		var xhr = new XMLHttpRequest();
		xhr.open("post","ajax-post.php",true);
		xhr.setRequestHeader("Content-Type",
		"application/x-www-form-urlencoded");
		xhr.send("username=name");
		xml.onreadystatechange=function(ev){
        if(xml.readyState===4){
            if(xml.status>=200&&xml.status<=300||
            styleMedia.status===304){
                // console.log("接收成功");
                succuss(xml);
            }else{
                // console.log("接收失败");
                error(xml);
            }
        }
    }