ajax笔记_01_原生ajax

最新推荐文章于 2024-08-03 17:33:50 发布
最新推荐文章于 2024-08-03 17:33:50 发布
阅读量82 收藏
点赞数
分类专栏： ajax笔记 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51896272/article/details/122695117
版权

ajax笔记_01_原生ajax

第一章 原生AJAX

AJAX简介

  • AJAX全称为(Asynchronous JavaScript And XML)，就是异步请求的JS和XML。

  • 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

  • AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML简介

  • XML可扩展标记语言

  • XML被设计用来传输和存储数据

  • XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

    比如我有一个学生是数据：name:"孙悟空"; age=18; gender="男"

    用XML表示

    <student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

  • 现在已经被JSON取代了

    用JSON表示

    {
    "name":"孙悟空",
    "age":18,
    "gender":"男"
}

AJAX的特点

AJAX的有点

  1. 可以无需刷新页面而与服务端进行通信
  2. 允许你根据用户事件来更新部分页面内容

AJAX的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题
  3. SEO（搜索引擎优化，也就是不能被爬虫到）不友好

HTTP协议

HTTP

(hypertext transport protocol)协议【超文本传输协议】，该协议详细规定了浏览器和万维网服务器之间相互通信的规则

约定，规则

请求报文

重点是格式和参数

请求报文有四部分：

  1. 行
  2. 头
  3. 空行
  4. 体
部分详情
行请求方式，路径，协议版本POST /s?ie=utf-8 HTTP/1.1
头HOST:value Cookie:value Content-type:value User-Agent:value
空行固定的，必须得有
体GET请求时请求体为空，POST请求时请求体可以不为空

响应报文

响应报文也有四部分：

  1. 行
  2. 头
  3. 空行
  4. 体
部分详情
行协议版本 响应状态码 响应状态字符串HTTP/1.1 200 OK
头和请求报文的请求头一样
空行固定的，必须得有
体从服务端返回的结果

express的安装与基本使用

安装（需要node环境）

初始化项目：npm init --yes

安装express框架：npm i express

基本使用

// 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请求

服务器：

// 引入express
const express = require('express')

// 创建对象
const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

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

// 启动监听
app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。','GET请求')
})

页面以及AJAX的请求发送：

<!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 {
      width: 200px;
      height: 100px;
      border: solid 1px #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 当什么的时候
      // readystate 是xhr对象中的属性，表示状态0 1 2 3 4
      // change 改变的意思
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          // 判断响应状态码200 404 403 401 500
          // 2开头的都是成功的
          if (xhr.status >= 200 && xhr.status < 300) {
            // 处理结果 行 头 空行 体
            // 响应
            console.log(xhr.status) // 状态码
            console.log(xhr.statusText) // 状态字符串
            console.log(xhr.getAllResponseHeaders()) // 所有响应头
            console.log(xhr.response) // 响应体

            // 设置result的文本
            result.innerHTML = xhr.response
          }
        }
      }
    }
  </script>
</body>

</html>

POST请求

服务器：

// 引入express
const express = require('express')

// 创建对象
const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

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

app.post('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 设置为所有的响应头我都能接受
  response.setHeader('Sccess-Control-Allow-Headers', '*')
  
  // 设置响应体
  response.send('HELLO AJAX')
})

// 启动监听
app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。','POST请求')
})

页面以及AJAX的请求发送：

<!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 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')
      // 设置请求头
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
      
      // 3.发送（携带参数）
      xhr.send('a=100&b=200')
      // 4.事件绑定
      xhr.onreadystatechange = function() {
        // 判断
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // 处理服务端返回的结果
            result.innerHTML = xhr.response
          }
        }
      }
    })
  </script>
</body>
</html>

JSON响应

服务器：

const express = require('express')

const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 响应一个数据
  let data = {
    name:'Soli',
    age:17
  }
  // 对对象进行字符串转换
  let strData = JSON.stringify(data)
  // 设置响应体
  response.send(strData)
})


app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。','JSON响应')
})

页面以及AJAX的请求发送：

<!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 {
      width: 200px;
      height: 100px;
      border: solid 1px #90b; 
    }
  </style>
</head>

<body>
  <div id="result"></div>

  <script>
    const result = document.getElementById('result')

    // 绑定键盘按下事件
    window.onkeydown = function() {
      const xhr = new XMLHttpRequest()

      // 设置响应体数据的类型
      // 如果设置为json，就不用把服务器的数据进行手动转换了
      xhr.responseType = 'json'

      xhr.open('GET', 'http://127.0.0.1:8000/server')
      xhr.send()
      // 事件绑定
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // 1.手动对数据转化
            // let data = JSON.parse(xhr.response)
            // result.innerHTML = data.name + data.age

            // 2.自动对数据转换
            result.innerHTML = xhr.response
          }
        }
      }
    }
  </script>
</body>

</html>

IE缓存问题

服务器：

// 引入express
const express = require('express')

// 创建对象
const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

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

// 启动监听
app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。','IE缓存问题')
})

页面以及AJAX的请求发送：

<!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>IE缓存问题</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>

<body>
  <div id="result"></div>

  <script>
    const result = document.getElementById('result')

    result.addEventListener('click', function() {
      const xhr = new XMLHttpRequest()

      // 解决IE的缓存问题，只需要在请求的时候加上一个时间戳就可以了
      xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now())
      xhr.send()
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response
          }
        }
      }
    })
  </script>
</body>

</html>

请求超时和网络异常处理

服务器：

// 引入express
const express = require('express')

// 创建对象
const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 设置响应体
  // response.send('HELLO AJAX')

  // 延时2s发送响应体
  setInterval(()=>{
    response.send('HELLO AJAX')
  }, 3000)
})

// 启动监听
app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。', '请求超时和网络异常处理')
})

页面以及AJAX的请求发送：

<!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: solid 1px #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() {
      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/server?a=100&b=200')
      xhr.send()
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response
          }
        }
      }
    }
  </script>
</body>

</html>

取消请求

服务器：

// 引入express
const express = require('express')

// 创建对象
const app = new express()

// 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')

  // 延迟响应
  setTimeout(() => {
    response.send('HELLO AJAX')
  }, 3000);
})

// 启动监听
app.listen(8000, () => {
  console.log('服务器已经启动，8000端口监听中。。。', '取消请求')
})

页面以及AJAX的请求发送：

<!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>
    // 获取button元素
    const btns = document.querySelectorAll('button')

    // 将对象定义在两个函数的外面
    let xhr = null

    // 点击发送请求
    btns[0].onclick = function() {
      xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://127.0.0.1:8000/server')
      xhr.send()
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && status < 300) {
            console.log(xhr.response)
            console.log('请求成功')
          }
        }
      }
    }

    // 点击取消发送请求
    btns[1].onclick = function() {
      xhr.abort()
      console.log('取消请求的发送');
    }
  </script>
</body>

</html>

AJAX请求重复发送问题

服务器：

const express = require('express')

const app = new express()

app.get('/server', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*') // 允许跨域
  setTimeout(()=>{
    response.send('HELLO AJAX')
  }, 3000)
})

app.listen(8000, () => {
  console.log('服务器启动成功，端口号8000','')
})

页面以及AJAX的请求发送：

<!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>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: 1px solid #903;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    // 获取元素
    const result = document.querySelector("#result")
    const xhr = null

    // 标识变量
    // 表示此时是否在发送请求
    let isSending = false
    result.addEventListener('click', function() {
      // 判断表示变量
      if (isSending) { // 如果正在发送。则取消该请求，创建一个新的请求
        xhr.abort()
      }
      
      xhr = new XMLHttpRequest()

      isSending = true // 修改标识变量
      xhr.open('GET', 'http://127.0.0.1:8000/server')
      xhr.send()
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          // 修改标识变量
          // 状态码为4就可以修改了，因为此次请求有可能是一个失败的请求
          isSending = false

          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response
          }
        }
      }
    })
  </script>
</body>
</html>
绒毛鸭鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
（免费）菜狗学前端之原生Ajax笔记
04-14
### 原生Ajax知识点详解 #### 一、原生Ajax概述 原生Ajax是一种使用JavaScript与服务器异步交互的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。实现这一功能的核心是`...
JavaScript原生Ajax笔记.doc
12-09
JavaScript原生Ajax技术是Web开发中的重要组成部分，它允许网页在不刷新整个页面的情况下与服务器进行数据交换，提升了用户体验。本文将深入探讨Ajax的核心概念、使用方法及其在处理不同类型数据时的应用。 一、...
ajax源码笔记
09-27
1. **原生 JavaScript**：使用 XMLHttpRequest 对象手动编写代码实现Ajax通信。 2. **jQuery**：jQuery 提供了简化的 $.ajax() 和 $.get()、$.post() 方法，使Ajax操作更加便捷。 3. **Fetch API**：现代浏览器支持 ...
那些年，我还在学习Ajax 学习笔记
10-28
总的来说，Ajax是现代Web开发中提升用户体验的关键技术，无论是通过原生的XMLHttpRequest对象，还是利用jQuery等库提供的便捷方法，都能帮助我们实现高效的异步数据交互，从而创造出更加流畅、响应迅速的网页应用。
Day17_1--AJAX学习之GET/POST传参
gitee_nanzhi66的博客
08-03 283
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其实AJAX就可以理解为就是JS。
ajax图书管理项目
E___V___E的博客
08-03 267
不离开当前页面，显示单独内容，让用户操作功能：不离开当前页面，显示单独内容，供用户操作步骤：1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构3.通过自定义属性，控制弹框的显示和隐藏。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1492
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 404
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
最新发布
weixin_67239318的博客
08-03 348
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 919
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 432
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
【前端面试】五、框架
weixin_49015558的博客
07-31 541
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 399
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
前端 axios 封装
清云
07-29 513
前端 axios 封装
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2500
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
@Fonden
07-30 385
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 744
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
原生Ajax基础教程：创建与发送Ajax请求详解
原生Ajax是前端开发中实现异步数据交互的一种核心技术，它允许Web应用程序在不刷新整个页面的情况下与服务器进行通信。这篇笔记主要介绍了如何使用JavaScript的原生XMLHttpRequest对象来构建AJAX请求的四个关键步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绒毛鸭鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值