湖北城乡和建设官方网站,一个简单的网站怎么做的,wordpress热门主题,为什么电脑有些网页打不开什么是Ajax
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) #xff0c;本质#xff1a;使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求#xff0c;并且接受服务器响应回来的数据。
使用ajax
1.创建异步对象
var xhrnew XMLHttp…什么是Ajax
Asynchronous JavaScript and xml 异步的 js 和 xml(数据承载方式) 本质使用js提供的异步对象XMLHttpRequest 异步的向服务器提交请求并且接受服务器响应回来的数据。
使用ajax
1.创建异步对象
var xhrnew 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$unameupwd$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 $unamereq.query.uname;var $upwdreq.query.upwd;if(!$uname){res.send(用户名不存在);return;}if(!$upwd){res.send(密码不存在);return;}//查询数据库返回响应var sqlselect * from xz_user where uname? and upwd?;pool.query(sql,[$uname,$upwd],(err,result){if(result.length0){res.send(1);}else{res.send(0);}});});
post请求
xhr.send(formdata)必须带着请求主体发送请求主体就是一个字符串
var formdatauname$unameupwd$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 $unamereq.body.uname;var $upwdreq.body.upwd;if(!$uname){res.send(用户名为空);return;}if(!$upwd){res.send(密码为空);return;}//查询数据库var sqlselect * from xz_user where uname? and upwd?;pool.query(sql,[$uname,$upwd],(err,result){if(result.length0){res.send(1);}else{res.send(0);}});
});
