• 原生ajax


    什么是Ajax

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

    使用ajax

    1.创建异步对象
    var xhr=new XMLHttpRequest();
    2.创建请求
    1. xhr.open(method,url,isAsyn);
    2. 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请求

    1. xhr.open("get",url,true)
    2. url="/demo/get_login?uname="+$uname+"&upwd="+$upwd
    1. function login() {
    2. //获取页面上用户的用户名和密码
    3. var $uname = uname.value;
    4. var $upwd = upwd.value;
    5. //使用ajax访问服务器,并接受请求
    6. //1.创建xhr异步对象
    7. var xhr = new XMLHttpRequest();
    8. //4.绑定监听,接受响应
    9. xhr.onreadystatechange = function () {
    10. if (xhr.readyState == 4 && xhr.status == 200) {
    11. var result = xhr.responseText;
    12. alert(result);
    13. }
    14. }
    15. //2.创建请求,打开连接
    16. xhr.open("get", "/demo/get_login?uname=" + $uname + "&upwd=" + $upwd, true);
    17. //3.发送请求
    18. xhr.send();
    19. }
    1. router.get("/get_login",(req,res)=>{
    2. //获取参数
    3. var $uname=req.query.uname;
    4. var $upwd=req.query.upwd;
    5. if(!$uname){
    6. res.send("用户名不存在");
    7. return;
    8. }
    9. if(!$upwd){
    10. res.send("密码不存在");
    11. return;
    12. }
    13. //查询数据库,返回响应
    14. var sql="select * from xz_user where uname=? and upwd=?";
    15. pool.query(sql,[$uname,$upwd],(err,result)=>{
    16. if(result.length>0){
    17. res.send("1");
    18. }else{
    19. res.send("0");
    20. }
    21. });
    22. });

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

    1. function login() {
    2. //获取用户输入的数据
    3. var $uname = uname.value;
    4. var $upwd = upwd.value;
    5. //ajax操作post
    6. //1.获取xhr异步对象
    7. var xhr = new XMLHttpRequest();
    8. //4.绑定监听
    9. xhr.onreadystatechange = function () {
    10. if (xhr.readyState == 4 && xhr.status == 200) {
    11. var result = xhr.responseText;
    12. alert(result);
    13. }
    14. }
    15. //2.打开连接
    16. xhr.open("post", "/demo/post_login", true);
    17. //创建请求主体,把数据放到请求主体中
    18. var formdata = "uname=" + $uname + "&upwd=" + $upwd;
    19. //由于要传递整个请求主体
    20. //而请求主体中有特殊字符,必须修改请求头
    21. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    22. //3.发送请求
    23. xhr.send(formdata);
    24. }
    1. router.post("/post_login",function(req,res){
    2. //获取前台数据
    3. var $uname=req.body.uname;
    4. var $upwd=req.body.upwd;
    5. if(!$uname){
    6. res.send("用户名为空");
    7. return;
    8. }
    9. if(!$upwd){
    10. res.send("密码为空");
    11. return;
    12. }
    13. //查询数据库
    14. var sql="select * from xz_user where uname=? and upwd=?";
    15. pool.query(sql,[$uname,$upwd],(err,result)=>{
    16. if(result.length>0){
    17. res.send("1");
    18. }else{
    19. res.send("0");
    20. }
    21. });
    22. });
  • 相关阅读:
    CPP的uint32_t类型简介
    1行Python代码,合并100个Excel文件,原来这么方便?
    Spring事务管理
    c#优雅高效的读取字节数组——不安全代码(1)
    YOLOv5、v7改进之四十:轻量化mobileone主干网络引入
    C++二分查找算法:找到 Alice 和 Bob 可以相遇的建筑
    哈佛大学:三个简单的方式,患癌风险降低60%以上
    Python基础语法(二)—— 条件语句(if)+循环语句(for+while)
    2022/09/05 day02:命令1
    PACS(Picture Archiving and Communications System)图像存储与传输系统源码
  • 原文地址:https://blog.csdn.net/m0_59962790/article/details/133151860