简单封装了一个ajax的方法：
ajax({
url: "test.txt", //请求地址
type: "get", //请求方式
data: {"name": "Tom"}, //请求参数
async: true, //是否异步
success: function (response) {
console.log(response); // 此处执行请求成功后的代码
},
fail: function (status) {
console.log('状态码为'+status); // 此处为执行成功后的代码
}
});
function ajax(options) {
var url = options.url || "";
var type = (options.type || "GET").toUpperCase();
var data = options.data || {};
var async = options.async || true;
var params = pieceParams(data);
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = (function (myxhr) {
return function () {
if (myxhr.readyState === 4 && myxhr.status === 200) {
options.success(myxhr.responseText)
} else {
options.fail(myxhr.status)
}
}
})(xhr)
if (type === "GET") {
xhr.open("GET", url + "?" + params, async)
xhr.send()
} else if (type === "POST") {
xhr.open("post", url, async)
xhr.setRequestHeader("Content-Type", "application/application/x-www-form-urlencoded")
xhr.send(params)
}
}
//处理参数
function pieceParams(data) {
var arr = []
for (var i in data) {
arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]))
}
arr.push("randomNum=" + Date.now())
return arr.join("&")
}
使用fetch来发起获取资源的请求:
fetch(input, init).then(function(response) { ... });
参数
�input
定义要获取的资源。这可能是：一个 USVString
字符串，包含要获取资源的 URL。
一个 Request
对象。
init (可选)
一个配置项对象，包括所有对请求的设置。可选的参数有：
- method: 请求使用的方法，如 GET、POST。
- headers: 请求的头信息，形式为 Headers
对象或 ByteString
。 - body: 请求的 body 信息：可能是一个 Blob
、BufferSource
、FormData
、URLSearchParams
或者 USVString
对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。 - mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
- credentials: 请求的 credentials，如 omit、same-origin 或者include。
- cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
get请求：
fetch("/test.json").then(function(res) {
if (res.ok) { //当status为2xx的时候它是true
res.json().then(function(data) {
console.log(data);
});
} else {
console.log("未能正确响应：", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});
post请求：
fetch("http://www.example.org/submit.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
if (res.ok) {
alert("Perfect! Your settings are saved.");
} else if (res.status == 401) {
alert("Oops! You are not authorized.");
}
}, function(e) {
alert("Error submitting form!");
});
