- Ajax的post请求也分为5个步骤,我们只需要把方式改为post即可(新建一个html页面)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax_post</title>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (evl) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('POST', "Handler.ashx?t=" + (new Date().getTime()), true);
xmlhttp.send();
xmlhttp.onreadystatechange = function (ev2) {
if (xmlhttp.readyState === 4)
{
if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304)
{
alert(xmlhttp.responseText);
}
else {
console.log("请求失败");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
- 建立一个Handler.ashx
我们不能像get请求一样将要传递的数据放在拼接在url后面,那我们怎么传递数据呢?
官方文档:
- 传递数据,我们只需要照着官方文档书写即可
运行
封装ajax-post
- 因为我们不止一种请求方式,所以我们应该再添加一个参数来传递类型
- 然后根据类型的不同,做出的处理不同
这里我们的url是Handler.ashx:
- 创建一个新的html进行测试:
创建一个新的html进行测试:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试自己封装的方法</title>
<!--这里引入你修改过的ajax-->
<script src="myAjax - post.js"></script>
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
//这里的handler.ashx需要和你自己的对应
ajax("POST", "Handler.ashx", {
"userName": "纯纯",
"userPwd":"530"
}, 3000, function (xhr) {
alert(xhr.responseText);
}, function () {
alert("请求失败");
})
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
结果:
- 我们发现官方的js,是这样调用ajax的。
- 观察自己封装的js与官方封装js的差别:
1)对于type,官方的无论我们传入大写还是小写均可以正确处理,但是我们的只能正确处理大写的。
2)我们发现我们自己封装的方法传入参数的位置是固定的,如果交换参数位置就会报错,而jquery官方传入的参数是一个对象,所以没有顺序问题。
在自己封装的js里找到方法function ajax(type, url, obj, timeout, success, error){}进行修改
然后我们把这里所有的obj改成data
function objTostr(data)
{
//动态添加一个元素来存放时间戳
data.t = new Date().getTime();
var res = [];
for(var key in data)
{
//在url中是不可以出现中文的,如果出现了中文需要进行转码
//encodeURIComponent()就是用来进行转码的
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
return res.join("&");
}
//url表示访问地址,success和error表示传入的两个回调函数,用来对成功和失败进行处理
function ajax(option) {
//定义一个方法用来将对象转换为字符串
var str = objTostr(option.data);
var xmlhttp;
var timer;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//都转为小写来判断
if (option.type.toLowerCase() === "get")
{
xmlhttp.open(option.type, option.url + "?" + str, true);
xmlhttp.send();
}
else {
xmlhttp.open(option.type, option.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(str);
}
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState === 4)
{
//如果状态为4,说明我们已经请求成功了,所以需要关闭定时器
clearInterval(timer);
if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
//传递异步对象,进行处理
option.success(xmlhttp);
}
else {
option.error(xmlhttp);
}
}
}
//判断外界是否传入了超时时间
if (option.timeout) {
//一到达超时时间就执行回调,回调函数需要中断这个请求
timer = setInterval(function () {
//中断请求
xmlhttp.abort();
//停止定时器
clearInterval(timer);
}, option.timeout)
}
}
现在引入我们自己封装的js进行测试