原生ajax

什么是Ajax

Asynchronous  JavaScript  and  xml   异步的  js  和  xml(数据承载方式) ，本质：使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求，并且接受服务器响应回来的数据。

使用ajax

1.创建异步对象

var xhr=new XMLHttpRequest();

2.创建请求

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.发送请求

xhr.send(formdata);

注意，get方法，没有formdata请求主体,所以在使用get方法时，这里的参数可以不填写，也可以写null 

4.绑定监听，接收响应数据

xhr.readyState属性用于表示xhr对象的请求状态，一共5个状态

0：请求尚未初始化
1:  已经打开服务器连接，正在发送请求
2：接收响应头
4：响应数据接收完毕

在发送请求之前，先配置监听，接收响应数据的方法，然后发送请求，所以执行顺序应该是1,2,4,3

get请求

xhr.open("get",url,true)
url="/demo/get_login?uname="+$uname+"&upwd="+$upwd

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();
}

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")

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);}

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");}});
});