原生AXAJ

简介: 本文介绍了原生AJAX的特性,其主要优点是能无刷新获取数据,但也存在跨域问题。接着讲解了Express框架的基本使用,包括创建应用、定义路由和启动服务。然后展示了如何通过AJAX从服务器获取并显示JSON数据,处理了IE的缓存问题和网络延时,以及如何处理重复请求。最后提到了通过设置超时和错误处理来改善用户体验。

@[toc]

1.原生AXAJ

通过axjx可以先服务器发送异步请求,==最大优势无刷新获取数据==
xml json

1.1AXJX的优缺点

1)可以无需刷新页面请求数据。
2)允许你根据用户事件更新部分页面数据。

3)没有浏览历史,存在跨域问题。

1.2 HTTP

HTTP是超文本传输协议,
image.png

2.express的使用

在vscode的终端中
image.png

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

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

// 3.创建路由对象
// request 是对响应报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
   
   
   response.send('hello');
})

// 4.监听端口的启动
app.listen(8000,()=>{
   
   
    console.log("服务已启动");
})

启动express
image.png

3.axja

<!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>Document</title>
    <style>
      #serve {
   
   
        width: 300px;
        height: 400px;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="getdata">点击</button>
      <div id="serve"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      const result = document.getElementById("serve");
      const app = new Vue({
   
   
        el: "#app",
        data: {
   
   },
        methods: {
   
   
          getdata() {
   
   
            // 1.创建对象
            const xhr = new XMLHttpRequest();

            // 2.初始化数据 设置请求的方法和URL
            xhr.open("GET", "http://127.0.0.1:8000/serve");
            // 3.发送
            xhr.send();
            // 4.事假绑定,处理服务返回的结果
            // 总共有四种转态 0 1 2 3 4
            xhr.onreadystatechange = function () {
   
   
              // 确保拿到说有的数据
              if (xhr.readyState == 4) {
   
   
                // 判断转态吗
                if (xhr.status >= 200 && xhr.status <= 300) {
   
   
                  // 1.响应行
                  console.log(xhr.status); //状态码
                  console.log(xhr.setRequestHeader);

                  console.log(xhr.responseText); //状态字符串
                  console.log(xhr.response); //响应体

                  result.innerHTML = xhr.response;
                }
              }
            };
            console.log("dayu");
          },
        },
      });
    </script>
  </body>
</html>

js

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

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

// 3.创建路由对象
// request 是对响应报文的封装
// response 是对响应报文的封装
app.get('/serve',(request,response)=>{
   
   
    // 设置跨域请求
    response.setHeader('Access-Control-Allow-Origin','*');
   response.send('hello');
})

// 4.监听端口的启动
app.listen(8000,()=>{
   
   
    console.log("服务已启动");
})

4.服务端响应json数据

服务器发送json数据

app.all('/json-server',(request,response)=>{
   
   
    // 设置跨域请求
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置请求头
    response.setHeader('Access-Control-Allow-Headers','*');
    // 数据
    const data={
   
   
        name:'nohao',
        age:14
    }
    // j将对象转化为字符串
    let str =JSON.stringify(data);

   response.send(str);
})

1.手动转换

let data = JSON.parse(xhr.response);
```java
const xhr = new XMLHttpRequest();
// 设置数据响应的类型
xhr.open("GET", "http://127.0.0.1:8000/json-server");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
// 判断转态吗
if (xhr.status >= 200 && xhr.status <= 300) {
console.log(xhr.response);
// result.innerHTML = xhr.response;
// 手动转化
let data = JSON.parse(xhr.response);
console.log(data.name);
result.innerHTML = data.name && data.age;

        }
      }
    };
2.自动转换
 > // 设置数据响应的类型
  xhr.responseType = "json";
   // 自动转换
              result.innerHTML = xhr.response.name;


```java
     window.onkeydown = function () {
        const xhr = new XMLHttpRequest();
        // 设置数据响应的类型
        xhr.responseType = "json";
        xhr.open("GET", "http://127.0.0.1:8000/json-server");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            // 判断转态吗
            if (xhr.status >= 200 && xhr.status <= 300) {
              console.log(xhr.response);
              //   result.innerHTML = xhr.response;
              // 自动转换
              result.innerHTML = xhr.response.name;
            }
          }
        };

5.IE 缓存问题和网络延时

xhr.open("GET", "http://127.0.0.1:8000/ie?t"+Data.now());
通过Data.now()来实时请求。

app.all('/delay',(request,response)=>{
   
   
    // 设置跨域请求
    response.setHeader('Access-Control-Allow-Origin','*');
//    设置响应体
    setTimeout(() => {
   
   
    response.send("延时响应");
  }, 3000);

})

xhr.timeout = 1000;
// 超时回调
xhr.ontimeout = function () {
alert("网络异常");
};
// 网络异常
xhr.onerror = function () {
alert("网络有问题");
};

6.重复请求

xhr.abort();取消请求,给请求设置一个延时

 methods: {
   
   
          getdata() {
   
   
            console.log("hhh");
            if (isending) {
   
   
              xhr.abort();
            }
            xhr = new XMLHttpRequest();
            xhr.abort();
            isending = true;
            xhr.open("GET", "http://127.0.0.1:8000/a");
            xhr.send();
            xhr.onreadystatechange = function () {
   
   
              if (xhr.readyState == 4) {
   
   
                isending = false;
              }
            };
          },
        },

image.png
)

目录
相关文章
|
7月前
|
机器学习/深度学习 编解码 自然语言处理
SigLIP 2:多语言语义理解、定位和密集特征的视觉语言编码器
SigLIP 2 是一种改进的多语言视觉-语言编码器系列,通过字幕预训练、自监督学习和在线数据管理优化性能。它在零样本分类、图像-文本检索及视觉表示提取中表现卓越,支持多分辨率处理并保持图像纵横比。模型提供 ViT-B 至 g 四种规格,采用 WebLI 数据集训练,结合 Sigmoid 损失与自蒸馏等技术提升效果。实验表明,SigLIP 2 在密集预测、定位任务及多模态应用中显著优于前代和其他基线模型。
503 9
SigLIP 2:多语言语义理解、定位和密集特征的视觉语言编码器
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
866 0
|
Python
手撕Python!模块、包、库,傻傻分不清?一分钟带你弄明白!
手撕Python!模块、包、库,傻傻分不清?一分钟带你弄明白!
224 1
|
安全 Java 网络安全
【认知革命】JAVA网络编程新视角:重新定义URL与URLConnection,让网络资源触手可及!
【认知革命】JAVA网络编程新视角:重新定义URL与URLConnection,让网络资源触手可及!
117 2
|
存储 NoSQL 数据处理
Apache Paimon流式湖仓学习交流群成立
Apache Paimon流式湖仓学习交流群成立
639 59
|
监控 Cloud Native Devops
云原生应用在那些场景应用广泛
云原生应用在那些场景应用广泛
|
存储 安全 Java
提升编程效率的利器: 解析Google Guava库之集合篇Multimap(二)
提升编程效率的利器: 解析Google Guava库之集合篇Multimap(二)
|
缓存 Linux 编译器
Linux(CentOS7.5) 安装部署 Python3.6(超详细!包含 Yum 源配置!)
该指南介绍了在Linux系统中配置Yum源和安装Python3的步骤。首先,通过`yum install`和`wget`命令更新和备份Yum源,并从阿里云获取CentOS和EPEL的repo文件。接着,清理和更新Yum缓存。然后,下载Python3源代码包,推荐使用阿里云镜像加速。解压后,安装必要的依赖,如gcc。在配置和编译Python3时,可能需要解决缺少C编译器的问题。完成安装后,创建Python3和pip3的软链接,并更新环境变量。最后,验证Python3安装成功,并可选地升级pip和配置pip源以提高包下载速度。
3384 0
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容
解决elementui中el-table表格首次expand展开不能正常渲染展开页面里面的表格内容