原生ajax

什么是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");
		}
	});
});
相关推荐
花海少爷2 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7946 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You15 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生26 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410929 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap41 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript