封装ajax函数及简单实用-优快云博客

本文链接：https://blog.youkuaiyun.com/lei2350934xj/article/details/72957161

------------------------------------------html部分-------------------------------------------

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<body>

</body>
</html>

<script>
// 参数param 可能有的东西如下
var param = {
type:"get/post",
url:"",
asyn:"true/flase",
dataType:"xml/json",
data:"",
success:function(value) { // 自定义的回调函数---success
alert(value);
},
failure:function() { // 自定义的回调函数---failure
alert("error");
}
};
// 注意 data:"" 可以是字符串或者JSON格式
// 如： data='username=123&password=321'; ------------------字符串
// data={"username":"123","password":"321"};-----------JSON

function ajax(data) {

var http_request = null;

// 1.
if(window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject) { // IE浏览器
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2.
// 不要把username password写死动态拼接
var type = (data.type=="get" ? "get" : "post"); // 2.1
if(data.url) { // 2.2
url = data.url;
if(type=="get") {
url += "?" + data.data + "&_t=" + new Date().getTime(); // get方式添加一个变化的时间防止读缓存
}
}
var flag = (data.asyn=="true" ? "true" : "false"); // 2.3
http_request.open(type,url,flag);


// 3.
// 3.1向服务器发送一个不包含任何参数的请求---GET方式
if(type=="get") {
http_request.send(null);
}else if(type=="post") {
// POST方式提交需要对表单数据进行编码不然后台读不到数据
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(data.data);
}

// 4.
// 获得服务器端的数据后执行的操作
http_request.onreadystatechange = function () {
if(http_request.readyState == 4) { // 判断请求状态
if(http_request.status == 200) { // 请求成功，开始处理返回结果
if(typeof data.success=="function") {
var value=(data.dataType=='xml'?http_request.responseXML:http_request.responseText);
data.success(value); // 回调函数
}
}else { // 请求失败,从status里面判断不要从readyState里判断
if(typeof data.failure=="function") {
data.failure();
}
}
}
}
}

// 使用该ajax函数
var param = {
type:"get",
url:"./formCheck.php",
asyn:"true",
dataType:"json",
// 注意注意注意因为没有使用jquery的序列化函数一下json的格式data后台不能_GTE[]得到---推荐jquery
// data:"username=liang&password=123"; // 字符串形式没问题后台可以正确读取username password
data:{"username":"liang","password":"123"},
success:function(value) { // 自定义的回调函数---success alert一下当前的值
alert(value);
},
failure:function() { // 自定义的回调函数---failure
alert("error");
}
};
ajax(param);
</script>

----------------------------------------------<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<body>

</body>
</html>

<script>
// 参数param 可能有的东西如下
var param = {
type:"get/post",
url:"",
asyn:"true/flase",
dataType:"xml/json",
data:"",
success:function(value) { // 自定义的回调函数---success
alert(value);
},
failure:function() { // 自定义的回调函数---failure
alert("error");
}
};
// 注意 data:"" 可以是字符串或者JSON格式
// 如： data='username=123&password=321'; ------------------字符串
// data={"username":"123","password":"321"};-----------JSON

function ajax(data) {

var http_request = null;

// 1.
if(window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject) { // IE浏览器
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2.
// 不要把username password写死动态拼接
var type = (data.type=="get" ? "get" : "post"); // 2.1
if(data.url) { // 2.2
url = data.url;
if(type=="get") {
url += "?" + data.data + "&_t=" + new Date().getTime(); // get方式添加一个变化的时间防止读缓存
}
}
var flag = (data.asyn=="true" ? "true" : "false"); // 2.3
http_request.open(type,url,flag);


// 3.
// 3.1向服务器发送一个不包含任何参数的请求---GET方式
if(type=="get") {
http_request.send(null);
}else if(type=="post") {
// POST方式提交需要对表单数据进行编码不然后台读不到数据
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(data.data);
}

// 4.
// 获得服务器端的数据后执行的操作
http_request.onreadystatechange = function () {
if(http_request.readyState == 4) { // 判断请求状态
if(http_request.status == 200) { // 请求成功，开始处理返回结果
if(typeof data.success=="function") {
var value=(data.dataType=='xml'?http_request.responseXML:http_request.responseText);
data.success(value); // 回调函数
}
}else { // 请求失败,从status里面判断不要从readyState里判断
if(typeof data.failure=="function") {
data.failure();
}
}
}
}
}

// 使用该ajax函数
var param = {
type:"get",
url:"./formCheck.php",
asyn:"true",
dataType:"json",
// 注意注意注意因为没有使用jquery的序列化函数一下json的格式data后台不能_GTE[]得到---推荐jquery
// data:"username=liang&password=123"; // 字符串形式没问题后台可以正确读取username password
data:{"username":"liang","password":"123"},
success:function(value) { // 自定义的回调函数---success alert一下当前的值
alert(value);
},
failure:function() { // 自定义的回调函数---failure
alert("error");
}
};
ajax(param);
</script>