AJAX流程

最新推荐文章于 2022-10-18 14:36:47 发布

牧羊人_sj

最新推荐文章于 2022-10-18 14:36:47 发布

阅读量170

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_59347596/article/details/121016538

版权

1.创建一个XMLHttpRequest对象 xhr

2.使用xhr 的open方法设置请求格式 open（请求格式[GET,POST],接口地址）；

3.使用send方法发送数据注意POST 的提交数据，作为send的参数send（’a=b&c=d‘）;

4.设置readystate 监听处理函数，处理返回的数据；

readystate 的值为4的时候是请求完成的状态；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax流程</title>
</head>

<body>
  <button id="btn">点击</button>
</body>

</html>
<script type="text/javascript">
 
  const btn = document.querySelector('#btn');

  function http() {
    const XHR = new XMLHttpRequest();

    XHR.onreadystatechange = () => {
      // if(XHR.readyState){}
      console.log(XHR.readyState);
      /*
      当 readyState 的值为4的时候，说明请求成功，且数据已经返回
      */
      if (XHR.readyState == 4) {
        console.log(XHR.status);
        let status = XHR.status;
        //满足数据请求成功 2开头的是成功，304为缓存
        if (status >= 200 && status < 300 || status == 304) {
          //获取后台返回的文字内容
          console.log(XHR.responseText);
        }
      }
    };

    XHR.open('GET', '/abc?name=孙悟空');
    XHR.send();
  }
  btn.onclick = function () {
    http();
  };

</script>

接下来写node 文件首先 npm install express 下载express模块

const express = require('express');
const app = express();

app.get('/abc',(req,res)=>{
  res.send(req.query.name);
});


app.get('*',(req,res)=>{
  res.sendFile(__dirname+req.path);
});

app.listen(8080,()=>{
  console.log('服务启动成功');
});

牧羊人_sj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX流程

1.创建一个XMLHttpRequest对象 xhr2.使用xhr 的open方法设置请求格式 open（请求格式[GET,POST],接口地址）；3.使用send方法发送数据注意POST 的提交数据，作为send的参数send（’a=b&c=d‘）;4.设置readystate 监听处理函数，处理返回的数据；readystate 的值为4的时候是请求完成的状态；<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫