原生js和jquery发送ajax请求及封装

Posted 2020-08-14

原生js                                  

// ajax get 五部曲
function ajax_get(url,data){
// 异步对象
var ajax=new XMLHttpRequest();
// 设置url和请求方式
// url方法 如果有数据要把数据拼接到url中?name=jack&age=20
if(data){
url+=?;
url+=data;
}else{};
ajax.open(‘get‘,url);
// 发送请求
ajax.send();
// 注册事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
// 在事件中获取数据并修改页面
console.log(ajax.responseText);
}
}
}

 

// ajax post请求 五部曲
function ajax_post(url,data){
// 创建异步对象
var ajax=new XMLHttpRequest();
// 设置url和请求方式
ajax.open(‘post‘,url);
// 设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送请求 name=jack
if(data){
ajax.send(data);
}else{
ajax.send();
}
// 注册事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
console.log(ajax.responseText);
}
}
}

 

// 将 get 跟post 封装到一起

/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();

// get 跟post 需要分别写不同的代码
if (method==‘get‘) {
// get请求
if (data) {
// 如果有值
url+=‘?‘;
url+=data;
}else{

}
// 设置 方法 以及 url
ajax.open(method,url);

// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);

// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}

// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);

// 将 数据 让 外面可以使用
// return ajax.responseText;

// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;

// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}

}

jQuery 发送ajax请求