之前的算打基础——好戏才刚刚开始
post文件上传
<?php
print_r($_POST);
echo"<br>";
print_r($_FILES);
echo"<br>";
//1.获取上传文件的对应的字典
$fileInfo = $_FILES["upfile"];
echo"<br>";
print_r($fileInfo);
//2.获取上传文件的名字
$fileName = $fileInfo["name"];
echo"<br>";
//3.获取上传文件的路径
$filePath = $fileInfo["tmp_name"];
echo"<br>";
//4.打印名字和路径
echo $fileName;
echo"<br>";
echo $filePath;
echo"<br>";
//5.移动全新目录 上传失败的把destination:去掉就可以了
move_uploaded_file($filePath,"./source/".$fileName);
?>
post大文件上传
修改上传设置
图片.png
GET基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>发送请求</button>
<script>
window.onload = function(ev) {
var num = Math.floor(Math.random() * 10)
var data = new Date().getTime()
console.log(num, data)
var oBtn = document.querySelector('button');
oBtn.onclick = function(ev1) {
//1创建一个异步对象
var xhr;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else { // code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
//var xhr = new XMLHttpRequest();
//2设置请求方式和请求地址
xhr.open("GET", "05-ajax-get.txt?tn=" + "data", true);
//第三个参数永远true
//3发送请求
xhr.send();
//4监听状态变化
xhr.onreadystatechange = function(ev2) {
if (xhr.readyState === 4) {
//5处理返回的结果
if (xhr.status >= 200 & xhr.status <= 300 | xhr.status === 304) {
alert("success")
//document.write(xhr.responseText)
} else {
alert("false")
}
}
/*在ie浏览器中如果通过ajax发送请求 那么ie浏览器人为同一个URL
只有一个结果*/
/*
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
*/
}
}
}
</script>
</body>
</html>
ie兼容
GET/POST封装
ajax封装部分
function ajax(url, success, timeout, error) {
//1创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
//所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
//var xhr = new XMLHttpRequest();
//2设置请求方式和请求地址
xmlhttp.open(method, encodeURIComponent(url) + "?tn=" + (new Date().getTime()), true); //第三个参数永远true
//3发送请求
xmlhttp.send();
//4监听状态变化
xmlhttp.onreadystatechange = function(ev2) {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
//5处理返回的结果
if (xmlhttp.status >= 200 & xmlhttp.status <= 300 | xmlhttp.status === 304) {
success(xmlhttp);
} else {
error(xmlhttp);
}
};
};
//判断外界是否传入了超时时间
if (timeout) {
timer = setInterval(function() {
//中断请求
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout)
}
}
html调用部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="myAjax.js"></script>
</head>
<body>
<button>发送请求</button>
<script>
window.onload = function(ev) {
var res = encodeURIComponent("wd=张三");
var oBtn = document.querySelector('button');
console.log(res)
oBtn.onclick = function(ev1) {
ajax("文字.php", function(xhr) {
alert(xhr.responseText);
}, 3000 //设置超时时间
,
function(xhr) {
alert("请求失败")
})
}
}
</script>
</body>
</html>
jQuery封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-3.4.1.js"></script>
</head>
<body>
<button>发送请求</button>
<script>
$(function(ev) {
$("button").click(function(ev1) {
$.ajax({
type: "GET",
url: "09-ajax.php",
data: "userName=lkf&userPwd=654321",
success: function(msg) {
document.write(msg);
},
error: function(xhr) {
alert(xhr.status);
}
});
}
)
})
</script>
</body>
</html>
function ajax(method, url, success, timeout, error) {
//1创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
//所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
//var xhr = new XMLHttpRequest();
option.method.touppercase()
console.log(option.method)
option.url += "?tn=" + new Data().gettime()
//2设置请求方式和请求地址
xmlhttp.open(option.obj); //第三个参数永远true
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//3发送请求
xmlhttp.send();
//4监听状态变化
xmlhttp.onreadystatechange = function(ev2) {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
//5处理返回的结果
if (xmlhttp.status >= 200 & xmlhttp.status <= 300 | xmlhttp.status === 304) {
option.success(xmlhttp);
} else {
option.error(xmlhttp);
}
};
};
//判断外界是否传入了超时时间
if (option.timeout) {
timer = setInterval(function() {
//中断请求
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout)
}
}
XML
可扩展的标记语言
完犊子哦
ajax 原生js封装最终版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--<script src="../jquery-3.4.1.js"></script>-->
<script src="ajax封装.js"></script>
<script>
window.onload = function(ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function(ev1) {
/* ajax("POST",
"ajax封装.php", {
"userName": "三生石",
"userPwd": "123456"
//服务器需要的格式：url?key=value&key = value;
}, 3000,
function(xhr) {
alert(xhr.responseText);
},
function(xhr) {
alert("请求失败");
})
};*/
ajax({
success: function(xhr) {
alert(xhr.responseText)
},
url: 'ajax封装.php',
data: {
"userName": "三生石",
"userPwd": "123456"
},
type: "post",
timeout: "3000",
error: function(xhr) {
alert(xhr.status)
}
})
}
}
/* $(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "ajax封装.php",
data: "userName=三生石&userPwd=123456 ",
success: function(msg) {
alert(msg);
},
error: function(xhr) {
alert(xhr.status)
}
});
})
})*/
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
网友评论