Ajax学习记录

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量384 收藏
点赞数
分类专栏： 前后端交互 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45093679/article/details/122197766
版权

Ajax

最大的特点：页面不刷新的情况下更新数据

异步的JS和XML，发送异步请求

XML

可扩展标记语言

用来传输和存储数据

和HTML相似，但是XML中没有预定义标签，全部都是自定义标签，用来表示一些数据

而HTML用来呈现数据

现在已经被JSON替换

AJAX特点

  • 优点
    • 不需要刷新页面就可以和服务器端进行通信，实现数据的交换
    • 允许根据用户事件更新部分页面内容，按需加载，提高用户体验
  • 缺点
    • 没有浏览历史，不能回退
    • 存在跨域问题（同源策略）
    • SEO不是很友好 搜索引擎优化 爬虫爬不到（源代码中没有对应的信息，都是AJAX异步请求的）

HTTP协议

约定、规则 服务器之间进行通信

请求报文和响应报文

  • 请求报文
    • 请求行
      • 请求类型 URL (参数) HTTP/1.1
    • 请求头
    • 空行
    • 请求体
  • 响应报文
    • 行
      • HTTP/1.1 状态码 状态字符串
    • 头
    • 空行
    • 响应体

Express

基于Node.js

  1. 安装express，先安全node，然后npm install express

  2. js文件中引入express

  3. 创建express应用对象

  4. 创建路由规则，传两个参数，一个是对请求报文的封装，一个是对响应报文的封装

  5. 监听端口启动服务

    // 1.引入express
const express = require("express");

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

// 3.创建路由规则
// request是对请求报文的封装  response是对响应报文的封装
app.get("/", (request, response) => {
  response.send("HELLO EXPRESS");
});

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

AJAX的基本操作

GET

html文件

<!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 GET 请求</title>
    <style>
      #result {
        height: 100px;
        width: 200px;
        border: 1px solid #90b;
      }
    </style>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
      // 获取button元素
      const btn = document.getElementsByTagName("button")[0];
      const result = document.getElementById("result");
      //   绑定事件
      btn.onclick = function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.设置请求的方法和url
        xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200");
        // 3.发送
        xhr.send();
        // 4.事件绑定，处理服务端返回的结果
        // on when 当...的时候
        // readystate xhr对象中的属性， 表示状态0 1 2 3 4
        // change 改变
        xhr.onreadystatechange = function () {
          // 判断(服务端返回了所有的结果)
          if (xhr.readyState == 4) {
            // 判断响应的状态码
            if (xhr.status >= 200 && xhr.status < 300) {
              // 处理结果 行  头  空行  体
              //1.响应行
              //   console.log(xhr.status); //状态码
              //   console.log(xhr.statusText); //状态字符串
              //   console.log(xhr.getAllResponseHeaders()); //所有响应头
              //   console.log(xhr.response); //响应体
              result.innerHTML = xhr.response;
            } else {
            }
          }
        };
      };
    </script>
  </body>
</html>

js文件

// 1.引入express
const express = require("express");

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

// 3.创建路由规则
// request是对请求报文的封装  response是对响应报文的封装
app.get("/server", (request, response) => {
  // 设置响应头
  //设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");

  // 设置响应体
  response.send("HELLO AJAX");
});

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

POST

html

<!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>POST</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid #903;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script>
      // 获取对象
      const result = document.getElementById("result");
      result.addEventListener("mouseover", function () {
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.设置请求的方法和url
        xhr.open("POST", "http://127.0.0.1:8000/server");
        // 3.发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              result.innerHTML = xhr.response;
            } else {
            }
          }
        };
      });
    </script>
  </body>
</html>

js

// 1.引入express
const express = require("express");

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

// 3.创建路由规则
// request是对请求报文的封装  response是对响应报文的封装
// post
app.post("/server", (request, response) => {
  // 设置响应头
  //设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");

  // 设置响应体
  response.send("HELLO AJAX POST");
});

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

JSON

html

<!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>JSON</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid #903;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script>
      const result = document.getElementById("result");
      // 绑定键盘按下事件
      window.onkeydown = function () {
        //   创建对象
        const xhr = new XMLHttpRequest();
        // 设置响应体数据的类型
        xhr.responseType = "json";
        // 设置请求的url和发送方式
        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);
              // 自动转换
              result.innerHTML = xhr.response.name;
            } else {
            }
          }
        };
      };
    </script>
  </body>
</html>

js

// 1.引入express
const express = require("express");

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

// 3.创建路由规则
// request是对请求报文的封装  response是对响应报文的封装
app.all("/json-server", (request, response) => {
  // 设置响应头
  //设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  // 响应一个数据
  const data = {
    name: "ycj",
  };
  // 对对象进行字符串转换
  let str = JSON.stringify(data);
  // 设置响应体
  response.send(str);
});

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

nodemon

自动重启

安装 npm install -g nodemon

启动项目 nodemon + 文件名称

IE浏览器有缓存

怎么做？

xhr.open("get", "http://127.0.0.1:8000/IE-server?t="+Date.now());

请求超时与网络异常

<!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>超时与网络异常</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid #903;
      }
    </style>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
      const btn = document.getElementsByTagName("button")[0];
      const result = document.getElementById("result");

      btn.addEventListener("click", function () {
        const xhr = new XMLHttpRequest();
        // 超时设置 2s 设置
        xhr.timeout = 2000;
        // 超时回调
        xhr.ontimeout = function () {
          alert("网络异常，请稍后重试");
        };
        // 网络异常回调
        xhr.onerror = function () {
          alert("你的网络似乎出了一些问题...");
        };
        xhr.open("get", "http://127.0.0.1:8000/delay");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              result.innerHTML = xhr.response;
            }
          }
        };
      });
    </script>
  </body>
</html>

// 1.引入express
const express = require("express");

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

// 3.创建路由规则
// request是对请求报文的封装  response是对响应报文的封装

// 延时
app.all("/delay", (request, response) => {
  // 设置响应头
  //设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  setTimeout(() => {
    // 设置响应体
    response.send("延迟响应");
  }, 3000);
});
// 4.监听端口启动服务
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中...");
});

手动取消请求

<!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>取消请求</title>
  </head>
  <body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
      //   获取元素按钮
      const btns = document.querySelectorAll("button");

      let x = null;
      btns[0].onclick = function () {
        x = new XMLHttpRequest();
        x.open("GET", "http://127.0.0.1:8000/delay");
        x.send();
      };
      // abort
      btns[1].onclick = function () {
        x.abort();
      };
    </script>
  </body>
</html>

请求重复发送请求

<!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>重复请求问题</title>
  </head>
  <body>
    <button>点击发送</button>
    <script>
      //   获取元素按钮
      const btn = document.querySelector("button");

      let x = null;
      // 标识变量
      let isSending = false; // 是否正在发送ajax请求

      btn.onclick = function () {
        // 判断标识变量
        if (isSending) x.abort(); //如果正在发送，则取消该请求，创建一个新的请求
        x = new XMLHttpRequest();
        // 修改标识变量的值
        isSending = true;
        x.open("GET", "http://127.0.0.1:8000/delay");
        x.send();
        x.onreadystatechange = function () {
          if (x.readyState == 4) {
            isSending = false;
          }
        };
      };
      // abort
      btns[1].onclick = function () {
        x.abort();
      };
    </script>
  </body>
</html>

axios

<!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>axois 发送 AJAX请求</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"
    ></script>
  </head>
  <body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
      const btns = document.querySelectorAll("button");

      btns[0].onclick = function () {
        //  GET请求
        axios.get("http://127.0.0.1:8000/axios-server", {
          // url参数
          params: {
            id: 100,
            vip: 7,
          },
          //请求头参数
          headers: {
            name: "ycj",
            age: 20,
          },
        });
      };
    </script>
  </body>
</html>

fetch函数

同源策略

浏览器的一种安全策略

解决跨域的方法：

  • JSONP

    • 只支持get请求
℡TypeError
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
Ajax学习笔记
2301_82244607的博客
04-28 961
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7957
史上最强Ajax学习笔记
ajax学习记录
weixin_45090728的博客
03-13 93
ajax学习
AJAX学习笔记
tangwenboy的博客
03-07 124
AJAX请求报文： 行： post /s?ie=utf-8 HTTP1.1 头： host：atguigu.com cookie:name=guigu 体： username=admin&password=admin 响应报文 行： HTTP/1.1 200 OK 体: html代码段 运用express工具 响应网页发送的GET或POST请求 AJAX使用 AJAX请求设置参数: url参数：/server?a=100..
Ajax 学习笔记
C__herry的博客
10-21 199
AJAX简单了解
ajax学习记录总结
GuardianMANGO的博客
04-14 868
Ajax学习记录 URL 地址组成：客户端与服务器之间的通信协议 存有该资源的服务器名称 资源在服务器上具体的存放位置 客户端与服务器通信过程 请求-处理-相应 资源的请求方式 get请求用于获取服务器端资源 post用于向服务器提交数据 什么是Ajax Ajax的全称为Asynchronous Javascript And XML（异步Javascript和XML） 在网页中使用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax ajax可以实现网页和服务器之间的数据交
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
快速入门了解Ajax
音符犹如代码的博客
07-25 869
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 80
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 432
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1312
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 266
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 224
【代码】vue el-select的下拉树形结构。
angular入门基础教程(四）动态属性与事件
峰会路转的博客
07-29 160
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值