window.onload=function(){ ???//get请求======================================================================================== ???function ajaxGet(url,success,fail){ ???????var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp") ???????xhr.onreadystatechange = function(){ ???????????if(xhr.readyState == 4){ ???????????????if(xhr.status == 200){ ???????????????????success(JSON.parse(xhr.responseText)) ???????????????}else{ ???????????????????fail(xhr.status) ???????????????} ???????????} ???????} ???????xhr.open("get",url,true); ???????xhr.send() ???} ???//post请求======================================================================================= ???function ajaxPost(url,data,success,fail){ ???????var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp") ???????xhr.onreadystatechange = function(){ ???????????if(xhr.readyState == 4){ ???????????????if(xhr.status == 200){ ???????????????????success(JSON.parse(xhr.responseText)) ???????????????}else{ ???????????????????fail(xhr.status) ???????????????} ???????????} ???????} ???????xhr.open("post",url,true); ???????xhr.send(data) ???} ???//普通调用 ???ajaxPost("https://www.apiopen.top/femaleNameApi",{"page":1},function(res){ ???????console.log(res) ???},function(res){ ???????console.log(res) ???})//-------------------------------------------------------------------------分割线----------------------------------------------------------------------------- ???//面向对象post方法及调用方式================================================================================== ???function Post(obj){ ???????var options = obj ???????var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp") ???????xhr.onreadystatechange = function(){ ???????????if(xhr.readyState == 4){ ???????????????if(xhr.status == 200){ ???????????????????options.success(JSON.parse(xhr.responseText)) ???????????????}else{ ???????????????????options.fail(xhr.status) ???????????????} ???????????} ???????} ???????xhr.open(options.method,options.url,options.async); ???????xhr.send(options.data) ???} ???//调用 ???Post({ ???????method:"post", ???????url:"https://www.apiopen.top/femaleNameApi", ???????data:{"page":1}, ???????async:true, ???????success:function(res){ ???????????console.log(res) ???????},fail:function(res){ ???????????console.log(res) ???????} ???})}
原生ajax的简单封装(仅提供大概的思路,具体还有参数验证的都没做)
原文地址:https://www.cnblogs.com/helloNico/p/10579022.html