AJAX1.ajax介绍 AJAX全称为“Asynchronous JavaScript and XML”（异步Java

1.ajax介绍

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和 XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.配置相关文件

在终端中输入 npm init -y

将下面的代码复制到package.json中

"dependencies": {
    "body-parser": "^1.20.0",
    "express": "^4.18.1",
    "multer": "^1.4.5-lts.1"
}

在终端中输入npm i

3.ajax请求的五个步骤

建立XMLHttpRequest对象;
设置回调函数;
配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
向服务器发送数据;
在回调函数中针对不同的响应状态进行处理;

<script>
    // 1.创建一个ajax对象    XMLHttpRequest
    let xhr = new XMLHttpRequest()
    console.log(xhr.readyState);

    // 2.onreadystatechange 监听ajax对象的状态变化 同onload
    xhr.onreadystatechange = function () {
        console.log('改变了状态', xhr.readyState);
    }
    // xhr.onload = function () {
    //     console.log(xhr.response);
    // }

    // 3.配置网络请求
    // open 的第一个实参 是发送请求的方式 get  post
    //        第二个实参 是发送请求的地址 接口 后端人员开发好给你
    xhr.open('get','http://127.0.0.1:3000/get')
    xhr.responseType = 'json'  // 会自动将json格式反序列化

    // // 4.发起请求  send(请求体) 请求体就是前端发送给后端的数据
    // // get请求 没有所有的请求体  post请求由请求体
    xhr.send()

</script>

const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router");
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router();

app.use(cors());
app.use(logger());
app.use(koaBody());
 
// .get  你要使用get请求 
// /get  你请求时的路径
router.get("/get", async (ctx, next) => {
    //成功后的状态码 200
    ctx.status = 200;
    //"hello Ajax" 响应给前端的数据
    ctx.body = "hello Ajax";
});

app.use(router.routes())
router.allowedMethods();

// 3000 端口号  前端请求时需要加上这个端口号
app.listen(3000, () => {
    console.log("running in http://127.0.0.1:3000");
});

4.ajax中的五种状态码

readystatechange，用来监测ajax状态变化的

ajax状态码	状态
0	`xhr`刚刚创建，没有调用 `open()`
1	已经调用 `open()`，但尚未调用 `send()`
2	`send()` 方法已经被调用，接收到头响应头
3	接收到部分响应体数据
4	请求完成，接收到全部响应体数据

5.http状态码

http状态码	类型	状态
1xx	信息	服务器收到请求，需要请求者继续执行操作
2xx	成功	操作被成功接收并处理
3xx	重定向	需要进一步的操作以完成请求
4xx	客户端错误	请求包含语法错误或无法完成请求
5xx	服务器错误	服务器在处理请求的过程中发生了错误

6.通过请求体传参

text/plain
- 默认的请求体类型，如果不设置请求头字段 Content-type，默认就是该种类型
- 求体只要是字符串就可以，后端不会做任何处理
application/x-www-form-urlencoded
- 需要设置请求头 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
- 要求请求体是查询字符串，如 a=100&b=200
- 点击提交按钮提交表单（非Ajax），如果 Method 是 Post，默认请求体内容就是 x-www-form-urlencoded
application/json
- 设置设置请求头 xhr.setRequestHeader('Content-type', 'application/json');
- 要求请求体是 json 格式的字符串
multipart/form-data
- 请求体（send()的方法的参数）除了是字符串，也可以是 formData 对象。如果请求体是 FormData 对象，浏览器会自动设置请求头字段 Content-type 为 multipart/form-data。

1.text/plain

<script>
    let xhr = new XMLHttpRequest()

    xhr.onload = function () {
        console.log(xhr.response);
    }
    xhr.responseType = 'json'
    // query 传参
    // 给后端传递查询字符串  ?xx=xxx
    // ?name=wc&age=18&adddres=bj  前端发送给后端的查询字符串
    xhr.open('get', 'http://127.0.0.1:3000/get?name=wc&age=18&adddres=bj')
    xhr.send()


    // params传参  将参数写成路径的格式 需要后端人员配合你写成动态接口
    // /get/:name/:age/:address
    //       wc    18     bj
    // xhr.open('get','http://127.0.0.1:3000/get/wc/18/bj')
    // xhr.send()
</script>

const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router");
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router();

app.use(cors());
app.use(logger());
app.use(koaBody());

router.get("/get", async (ctx, next) => {
    ctx.status = 200;
    //  ctx.query;  表示前端传递的查询字符串
    ctx.body = ctx.query;
});

router.get("/get/:name/:age/:address", ctx => {
    ctx.status = 200;
    //  ctx.params;  表示前端传递的查询字符串
    ctx.body = ctx.params;
})

app.use(router.routes())
router.allowedMethods();

app.listen(3000, () => {
    console.log("running in http://127.0.0.1:3000");
});

2.application/x-www-form-urlencoded

<script>
    let xhr = new XMLHttpRequest()

    xhr.onload = function(){
        console.log(xhr.response);
    }

    xhr.responseType = 'json'  // 会自动将json格式反序列化
     
    xhr.open('post','http://127.0.0.1:3000/post')

    // 如果使用post给后端传递信息 需要设置请求头 Content-Type
    // Content-Type 不同的值 表示不同的数据格式
    // 如果不设置 默认就是 text/plain
    // 将请求体Content-Type 配置为 application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

    // post传参 直接写请求体即可
    xhr.send("name=wc&age=18&address=bj")
</script>

const app = new Koa();
const router = new Router();

app.use(cors());
app.use(logger());
app.use(koaBody());

router.post("/post", async (ctx, next) => {
    ctx.status = 200;
    // ctx.request.body; 获取请求体内的数据
    // post传参的值会写在请求体中
    ctx.body = ctx.request.body;
});

app.use(router.routes())
router.allowedMethods();

app.listen(3000, () => {
    console.log("running in http://127.0.0.1:3000");
});

3.application/json

<script>
    let xhr = new XMLHttpRequest()

    xhr.onload = function(){
        console.log(xhr.response);
    }

    xhr.responseType = 'json' // 会自动将json格式反序列化  
      
    xhr.open('post','http://127.0.0.1:3000/post')

    // application/json 表示传递的数据是json格式
    xhr.setRequestHeader('Content-Type','application/json')
    

    // post传参 直接写请求体即可
    // 传递时,需要把JSON对象,手动转化成JSON字符串
    xhr.send(JSON.stringify({a:10,b:20}))
</script>

const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router");
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router();

app.use(cors());
app.use(logger());
app.use(koaBody({ multipart: true }));

router.post("/post", async (ctx, next) => {
    ctx.status = 200;
    ctx.body = ctx.request.body;
});

app.use(router.routes())
router.allowedMethods();

app.listen(3000, () => {
    console.log("running in http://127.0.0.1:3000");
});

4. multipart/form-data

<body>
  <form class="info">
    <input type="text" name="username" />
    <input type="text" name="pwd" />
  </form>
  <button class="send">发送请求</button>
  <script>
    let info = document.querySelector(".info");
    let btn = document.querySelector(".send");

    btn.onclick = function () {
      let xhr = new XMLHttpRequest();

      xhr.onload = function () {
        console.log(xhr.response);
      };
      xhr.responseType = "json";
      xhr.open("post", "http://127.0.0.1:3000/post");

      // post传参 直接写请求体即可 
      // 传递formData 表单的数据
      // 可以手动给FormData对象中添加数据
      // let formData = new FormData()
      // formData.append('name',info.firstElementChild.value)
      // formData.append('psw',info.firstElementChild.nextElementSibling.value)

      // 直接获取表单内的数据
      // FormData(表单数据)
      let formData = new FormData(info)
      xhr.send(formData);
    };
  </script>
</body>

const Koa = require("koa");
const cors = require("koa2-cors");
const logger = require("koa-logger");
const Router = require("@koa/router");
// 之前: body-parser
// 现在: koa-body
const koaBody = require("koa-body");
const app = new Koa();
const router = new Router();

app.use(cors());
app.use(logger());
app.use(koaBody({ multipart: true }));

router.post("/post", async (ctx, next) => {
    ctx.status = 200;
    ctx.body = ctx.request.body;
});

app.use(router.routes())
router.allowedMethods();

app.listen(3000, () => {
    console.log("running in http://127.0.0.1:3000");
});

7.请求超时处理

<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>取消请求</title>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素对象
        // const btns = document.querySelectorAll('button')
        // let xhr = null

        // btns[0].onclick = function () {
        //   xhr = new XMLHttpRequest()
        //   xhr.open('GET', 'http://127.0.0.1:3000/delay')
        //   xhr.send()
        // }

        // // 调用abort()方法手动取消请求
        // // abort()：用来终止一个进程
        // btns[1].onclick = function () {
        //   xhr.abort()
        // }
        let xhr = new XMLHttpRequest()
        xhr.onload = function () {
            console.log(xhr.response);
        };
        
        // 设置超时时间  1s
        // 如果时间到了，数据还没有回来，会自动取消请求
        xhr.timeout = 1000;
        xhr.open('GET', 'http://127.0.0.1:3000/delay')
        xhr.send()

    </script>
</body>

</html>

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
// 延时响应
app.get('/delay', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  setTimeout(() => {
    // 设置响应体    
    response.send('延时响应')
  }, 3000)
})

// 4.监听端口启动服务 
app.listen(3000, () => {
  console.log("服务已经启动，3000 端口监听中....")
})