原生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
)

目录
相关文章
|
6月前
|
移动开发 JavaScript Android开发
H5封装和原生开发这两种不同的应用开发方式有什么区别?
原生开发是指为特定操作系统(如iOS或Android)开发应用程序。整个应用程序代码,逻辑和界面都是按照该系统提供的规范来开发,因此其性能和体验感会很好,可以与设备充分融洽,提供流畅的用户体验。原生开发App充分的利用了操作系统的功能,给设备上的应用程序提供了高性能和良好的用户体验。原生应用程序拥有很好的设备兼容性,可以直接访问设备的硬件功能等,如相机,蓝牙等。
46 1
|
移动开发 小程序 安全
原生小程序Donut多端开发
随着移动应用开发的不断发展,跨平台开发成为了一个备受关注的话题。开发人员希望能够使用一套代码库,同时支持多个平台,从而提高开发效率并覆盖更广泛的用户群体。在小程序领域,微信 Donut 多端(也称为原生小程序 Donut 多端)为开发人员提供了一种全新的跨平台开发方式。本文将介绍 Donut 多端的概念、特点以及如何开始使用它来开发跨平台小程序。
247 0
|
6月前
|
移动开发 前端开发 JavaScript
原生求生记:揭秘UniApp的原生能力限制
原生求生记:揭秘UniApp的原生能力限制
|
6月前
|
存储 安全 Linux
构建一个atf必须读点gic的原生文档
构建一个atf必须读点gic的原生文档
85 0
|
12月前
|
存储 安全 数据处理
原生云基础介绍
原生云是一种新的云计算模式,旨在充分利用云计算的优势,为企业提供高度自动化的、弹性的、可扩展的IT能力。它主张将应用程序及其依赖项直接部署在云平台上,以实现更高效、更灵活、更可扩展的IT资源管理和应用性能优化。原生云具有自动化、弹性、可扩展性、安全性和成本效益等优势,适用于各种行业和场景,包括互联网业务、金融行业、制造业、政府机构、教育行业和医疗行业等。
100 1
|
移动开发 小程序 开发工具
Donut 多端框架是支持使用小程序原生语法开发移动应用的框架
Donut 多端框架是支持使用小程序原生语法开发移动应用的框架,开发者可以一次编码,分别编译为小程序和 Android 以及 iOS 应用,实现多端开发
423 0
Donut 多端框架是支持使用小程序原生语法开发移动应用的框架
|
移动开发 缓存 JavaScript
构建高性能 React Native 跨端应用—引擎与渲染
介绍 React Native 跨端应用的渲染流程
|
自然语言处理 索引
一些kinbna原生操作
一些kinbna原生操作
|
Java
原生类
今天做笔试题时发现了一个概念,查阅了文档之后才明白,原生类的存在,慢慢学习慢慢进步吧! Java中,数据类型分为基本数据类型(或叫做原生类、内置类型)和引用数据类型。 Java不是纯的面向对象的语言,不纯的地方就是这些基本数据类型不是对象。当然初期Java的运行速度很慢,但是基本数据类型能在一定程度上改善性能。如果你想编写纯的面向对象的程序,用包装器类是取代基本数据类型就可以了。
98 0
|
Web App开发 前端开发 JavaScript
React Native 0.64版本发布,iOS开启支持Hermes引擎
React Native 0.64版本发布,iOS开启支持Hermes引擎
541 0