一、使用ajax发送post请求:
<script>
let obtn = document.getElementById("obtn");
let odiv = document.getElementById("odiv");
obtn.onclick = () => {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let params = `username=${username}&password=${password}`;
//发送ajax请求
// 1、创建 AJAX 对象;
let ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
ajax.open('POST', '/login_post');
ajax.setRequestHeader("enctype","application/x-www-form-urlencoded");
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;
ajax.onreadystatechange = ()=>{
// 获取响应回来的数据
if(ajax.readyState===4&& ajax.status===200){
console.log(ajax.readyState);
console.log(ajax.responseText);
// 请求到数据之后,就可以把数据更新到页面上
odiv.innerHTML = ajax.responseText;
}
};
// 4、发送请求。
ajax.send(params)
}
</script>
服务端代码:
else if(requestUrl=== "/login_post"){ //来处理css文件的请求 如果这个路径包含.css
request.on('data',(postData)=>{
let uname = postData.toString().split("&")[0].split("=")[1]; // 获取用户提交的用户名
let pwd = postData.toString().split("&")[1].split("=")[1]; // 获取用户提交的密码
if(uname===username && pwd===password){
response.end("账号密码正确,登录成功");
}else{
response.end("账号或者密码错误,登录失败");
}
});
}
超时处理:
有时网络会出现问题或者服务端出问题导致请求时间过长,一般提示网络请求稍后重试,以增加用户的体验感。在代码中我们可以通过定时器和请求中断来实现超时处理的效果。
var timer = setTimeout(function () {
// 取消请求,中断请求
ajax.abort();
}, 5000);
二、方法抽取(了解)
function ajax(mehtod, url, param, success, time){
var ajax;
//处理ajax获取时候的兼容性问题
try { // 非 IE
ajax = new XMLHttpRequest();
}
catch (e) { // IE
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
if(method === 'get'){
param = encodeURI(param); //针对get请求的查询参数出现中文的编码处理
url = url + '?' + param;
param = null;
}
ajax.open(method, url);
if(method === 'post'){
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
ajax.onreadystatechange = function () { // onload
if(ajax.readyState == 4 && ajax.status ==