什么是Ajax
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) ,本质:使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求,并且接受服务器响应回来的数据。
使用ajax
1.创建异步对象
javascript
var xhr=new XMLHttpRequest();
2.创建请求
javascript
xhr.open(method,url,isAsyn);
xhr.open("get","http://127.0.0.1:8080/login",true);
method:请求的方法,注意必须是字符串的形式"get" "post"
url:请求的url,注意必须是字符串
isAsyn:是不是要使用异步,boolean值,true/false
3.发送请求
javascript
xhr.send(formdata);
注意,get方法,没有formdata请求主体,所以在使用get方法时,这里的参数可以不填写,也可以写null
4.绑定监听,接收响应数据
xhr.readyState属性用于表示xhr对象的请求状态,一共5个状态
0:请求尚未初始化
1: 已经打开服务器连接,正在发送请求
2:接收响应头
4:响应数据接收完毕
在发送请求之前,先配置监听,接收响应数据的方法,然后发送请求,所以执行顺序应该是1,2,4,3
get请求
javascript
xhr.open("get",url,true)
url="/demo/get_login?uname="+$uname+"&upwd="+$upwd
javascript
function login() {
//获取页面上用户的用户名和密码
var $uname = uname.value;
var $upwd = upwd.value;
//使用ajax访问服务器,并接受请求
//1.创建xhr异步对象
var xhr = new XMLHttpRequest();
//4.绑定监听,接受响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
alert(result);
}
}
//2.创建请求,打开连接
xhr.open("get", "/demo/get_login?uname=" + $uname + "&upwd=" + $upwd, true);
//3.发送请求
xhr.send();
}
javascript
router.get("/get_login",(req,res)=>{
//获取参数
var $uname=req.query.uname;
var $upwd=req.query.upwd;
if(!$uname){
res.send("用户名不存在");
return;
}
if(!$upwd){
res.send("密码不存在");
return;
}
//查询数据库,返回响应
var sql="select * from xz_user where uname=? and upwd=?";
pool.query(sql,[$uname,$upwd],(err,result)=>{
if(result.length>0){
res.send("1");
}else{
res.send("0");
}
});
});
post请求
xhr.send(formdata)必须带着请求主体发送,请求主体就是一个字符串
var formdata="uname="+uname+"\&upwd="+upwd;
在xhr.open和xhr.send之间,设置请求头信息,把content-type设置为可以发送特殊字符
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
javascript
function login() {
//获取用户输入的数据
var $uname = uname.value;
var $upwd = upwd.value;
//ajax操作post
//1.获取xhr异步对象
var xhr = new XMLHttpRequest();
//4.绑定监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
alert(result);
}
}
//2.打开连接
xhr.open("post", "/demo/post_login", true);
//创建请求主体,把数据放到请求主体中
var formdata = "uname=" + $uname + "&upwd=" + $upwd;
//由于要传递整个请求主体
//而请求主体中有特殊字符,必须修改请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3.发送请求
xhr.send(formdata);
}
javascript
router.post("/post_login",function(req,res){
//获取前台数据
var $uname=req.body.uname;
var $upwd=req.body.upwd;
if(!$uname){
res.send("用户名为空");
return;
}
if(!$upwd){
res.send("密码为空");
return;
}
//查询数据库
var sql="select * from xz_user where uname=? and upwd=?";
pool.query(sql,[$uname,$upwd],(err,result)=>{
if(result.length>0){
res.send("1");
}else{
res.send("0");
}
});
});