Ajax编程基础

最新推荐文章于 2024-09-29 20:25:59 发布
最新推荐文章于 2024-09-29 20:25:59 发布
阅读量120 收藏
点赞数 1
分类专栏： Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47085255/article/details/107740968
版权

Ajax基础

1. 传统网站中存在的问题
  • 网速慢的情况下, 页面加载时间长, 用户只能等待
  • 表单提交后, 如果一项内容不合格, 需要重新填写所有表单内容
  • 页面跳转, 重新加载页面, 造成资源浪费, 增加用户等待时间
2. Ajax概述

它是浏览器提供的一套方法, 可以实现页面无刷新更新数据, 提高用户浏览网站应用体验

3. Ajax的应用场景
  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表
4. Ajax 的运行环境

Ajax技术需要运行在网站环境中才能生效, 可以使用Node创建服务器作为网站服务器。

Ajax 运行原理及实现

1. Ajax 运行原理

Ajax相当于浏览器发送请求与接收响应的代理人, 以实现在不影响用户浏览页面的情况下, 局部更新页面数据, 从而提高用户体验。
在这里插入图片描述

2. Ajax 的实现步骤
  • 创建 Ajax 对象
var xhr = new XMLHttpRequest();
  • 告诉Ajax请求地址以及请求方式
xhr.open('get', 'http://www.example.com')
  • 发送请求
xhr.send()
  • 获取服务器端与客户端的响应数据
xhr.onload = function () {
	console.log(xhr.responseText)
}

服务端代码

const express = require('express')

const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.get('/first', (req, res) => {
  res.send('hello ajax')
})

app.listen(3000, () => console.log('服务器启动成功'))

ajax代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 创建ajax对象
    const xhr = new XMLHttpRequest()
    // 2. 告诉ajax对象要向哪发送请求, 以什么方式发送请求
    // 1) 请求方式 2)请求地址
    xhr.open('get', 'http://localhost:3000/first')
    // 3. 发送请求
    xhr.send()
    // 4. 获取服务器端响应到客户端的数据
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
  </script>
</body>
</html>

运行结果
在这里插入图片描述

3. 服务器端响应的数据格式

在真实的项目中, 服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

  • ajax代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://localhost:3000/responseData')
    xhr.send()
    xhr.onload = function () {
      console.log(xhr.responseText)
      console.log(typeof xhr.responseText)
    }
  </script>
</body>
</html>
  • 服务端代码
const express = require('express')

const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.get('/first', (req, res) => {
  res.send('hello ajax')
})

app.get('/responseData', (req, res) => {
  res.send({"name": "zhangsan"})
})

app.listen(3000, () => console.log('服务器启动成功'))
  • 运行结果
    在这里插入图片描述

在 http 请求与响应的过程中, 无论是请求参数还是响应内容, 如果是对象对象类型, 最终都会被转换为对象字符串进行传输。
JSON.psrse() // 将json字符串转换为json对象

  • ajax代码
const xhr = new XMLHttpRequest()
    xhr.open('get', 'http://localhost:3000/responseData')
    xhr.send()
    xhr.onload = function () {
    // 将JSON字符串转换为JSON对象
      let responseText = JSON.parse(xhr.responseText)
      console.log(responseText)
      var str = '<h2>' + responseText.name + '</h2>'
      document.body.innerHTML = str
    }
  • 服务端代码和上面的一样
  • 运行结果
    在这里插入图片描述
4. 请求参数传递
4.1. get请求参数
  • ajax代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    <input type="text" id="username">
  </p>
  <p>
    <input type="text" id="age">
  </p>
  <p>
    <input type="button" value="提交" id="btn">
  </p>
  <script>
    var btn = document.getElementById('btn')
    var username = document.getElementById('username')
    var age = document.getElementById('age')

    btn.onclick = function () {
      // 创建ajax对象
      const xhr = new XMLHttpRequest()
      // 获取用户在文本框中的数据值
      var nameValue = username.value
      var ageValue = age.value
      // 拼接请求参数
      var params = 'username=' + nameValue + '&age=' + ageValue

      // 配置ajax对象
      xhr.open('get', 'http://localhost:3000/get?' + params)
      // 发送请求
      xhr.send()
      // 获取服务器端的响应数据
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    }
  </script>
</body>
</html>
  • js代码
const express = require('express')

const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.get('/first', (req, res) => {
  res.send('hello ajax')
})

app.get('/responseData', (req, res) => {
  res.send({"name": "zhangsan"})
})

app.get('/get', (req, res) => {
  res.send(req.query)
})

app.listen(3000, () => console.log('服务器启动成功'))
4.2. post请求
  • ajax代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    <input type="text" id="username">
  </p>
  <p>
    <input type="text" id="age">
  </p>
  <p>
    <input type="button" value="提交" id="btn">
  </p>
  <script>
    var btn = document.getElementById('btn')
    var username = document.getElementById('username')
    var age = document.getElementById('age')

    btn.onclick = function () {
      // 创建ajax对象
      const xhr = new XMLHttpRequest()
      // 获取用户在文本框中的数据值
      var nameValue = username.value
      var ageValue = age.value
      // 拼接请求参数
      var params = 'username=' + nameValue + '&age=' + ageValue

      // 配置ajax对象
      xhr.open('post', 'http://localhost:3000/post')
      // 设置请求参数格式的类型, post请求必须设置
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      // 发送请求
      xhr.send(params)
      // 获取服务器端的响应数据
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    }
  </script>
</body>
</html>
  • 服务端代码
const express = require('express')
const bodyParser = require('body-parser')

const path = require('path')

const app = express()

app.use(bodyParser.urlencoded({ extended: false }))

app.use(express.static(path.join(__dirname, 'public')))

app.get('/first', (req, res) => {
  res.send('hello ajax')
})

app.get('/responseData', (req, res) => {
  res.send({"name": "zhangsan"})
})

app.get('/get', (req, res) => {
  res.send(req.query)
})

app.post('/post', (req, res) => {
  res.send(req.body)
})

app.listen(3000, () => console.log('服务器启动成功'))
  • 运行结果
    在这里插入图片描述
4.3. 请求报文
  • 在HTTP请求和响应过程中传递的数据块就叫报文, 包括要传递的数据和一些附加信息, 这些数据和信息要遵守规定好的格式
    在这里插入图片描述
5.请求参数的格式
  1. application/x-www-form-urlencoded

name=zhangsan&age=20

  1. application/json

{ name: ‘zhangsan’, age: ‘20’ }

  1. 在请求头中指定 Content-Type 属性的值是 application/json, 告诉服务器端挡墙请求参数的格式是json

JSON.stringify() // 将json对象转换为json字符串

  • ajax代码
// 创建ajax对象
    const xhr = new XMLHttpRequest()
    // 配置ajax对象
    xhr.open('post', 'http://localhost:3000/json')
    xhr.setRequestHeader('Content-Type', 'application/json')
    // 发送请求
    xhr.send(JSON.stringify({name: 'lisi', age: 50}))
    // 获取服务器端的响应数据
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
  • 服务端代码
const express = require('express')
const bodyParser = require('body-parser')

const path = require('path')

const app = express()

app.use(bodyParser.json())

app.use(express.static(path.join(__dirname, 'public')))

app.post('/json', (req, res) => {
  res.send(req.body)
})

app.listen(3000, () => console.log('服务器启动成功'))

注意: get请求是不能提交json对象数据格式的, 传统网站的表单提交验配师不支持json对象数据格式的

6. 获取服务器端的响应
6.1 Ajax状态码

  • 在创建ajax对象, 配置ajax对象, 发送请求, 以及接受完服务器端响应数据, 这个过程中的每一个步骤都会对应一个数值, 这个数值就是ajax状态码

    0: 请求未初始化(还没有调用open())
    1: 请求已经建立, 但是还没有发送(还没有调用send())
    2: 请求已经发送
    3: 请求正在处理中, 通常响应中已经有部分数据可以用了
    4: 响应已经完成, 可以获取并使用服务器的响应了
    xhr.readyState // 获取ajax状态码

  • onreadystatechange 事件

    当ajax状态码发生变化时将自动触发该事件。
    在事件处理函数中可以获取 Ajax状态码并对其进行判断, 当状态码为 4 时就可以通过 xhr.responseText 获取服务器端响应的数据了

  • ajax代码

var xhr = new XMLHttpRequest()
    // 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
    console.log(xhr.readyState)
    xhr.open('get', 'http://localhost:3000/readystate')
    // 1 已经对ajax对象进行配置, 但是会还没有发送请求
    console.log(xhr.readyState)    
    // 当ajax状态码发生变化的时候触发
    xhr.onreadystatechange = function () {
      // 2 请求已经发送了
      // 3 已经接收到服务器端的部分数据了
      // 4 服务器端的响应数据已经接受完成
      console.log(xhr.readyState)
      // 对ajax状态码进行判断 如果状态码的值为 4 就代表数据已经接受完成了
      if (xhr.readyState === 4) {
        console.log(xhr.responseText)
      }
    }
    xhr.send()
  • 服务器端代码
const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')

const app = express()

app.use(bodyParser.json())

app.use(express.static(path.join(__dirname, 'public')))

app.get('/readystate', (req, res) => {
  res.send('ok')
})

app.listen(3000, () => console.log('服务器启动成功'))
6.2 两种获取服务器端响应方式的区别

在这里插入图片描述

7. Ajax 错误处理

  1. 网络通畅, 服务器端能接收到请求, 服务器端返回的结果不是预期结果

    可以判断服务器端返回的状态码, 分别进行处理, xhr.status获取http状态码

  • ajax代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">发送Ajax请求</button>
  <script>
    var btn = document.getElementById('btn')

    btn.onclick = function () {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:3000/error')
      xhr.send()
      xhr.onload = function () {
        // xhr.status 获取http状态码
        console.log(xhr.responseText)
        if (xhr.status === 400) {
          alert('请求出错')
        }
      }
    }
  </script>
</body>
</html>
  • 服务器端代码
const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')

const app = express()

app.use(bodyParser.json())

app.use(express.static(path.join(__dirname, 'public')))

app.post('/post', (req, res) => {
  res.send(req.body)


app.get('/error', (req, res) => {
  res.status(400).send('not ok')
})

app.listen(3000, () => console.log('服务器启动成功'))

  1. 网络通畅, 服务器端没有接受到请求, 返回 404 状态码

    检查请求地址是否错误

  2. 网络畅通, 服务器端能接受到请求, 服务器端返回 500 状态码

    服务器端错误

  3. 网络中断, 请求无法发送到服务器端

    会触发xhr对象下面的error事件, 在onerror事件处理函数中对错误进行处理

<button id="btn">发送Ajax请求</button>
  <script>
    var btn = document.getElementById('btn')

    btn.onclick = function () {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:3000/error')
      xhr.send()
      xhr.onload = function () {
        // xhr.status 获取http状态码
        console.log(xhr.responseText)
        if (xhr.status === 400) {
          alert('请求出错')
        }
      }
      // 当网络中断时会触发onerror事件
      xhr.onerror = function () {
        alert('网络中断, 无法发送ajax请求')
      }
    }
  </script>

8. 低版本 IE 浏览器的缓存问题

问题: 在低版本的IE浏览器中, Ajax请求有严重的缓存问题, 即在请求地址不发生变化的情况下, 只有第一次请求会真正发送到服务器端, 后续的请求都会从浏览器的缓存中获取结果, 即使服务器端的数据更新了, 客户端依然拿到的是缓存中的旧数据。

  • ajax 代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">发送Ajax请求</button>
  <script>
    var btn = document.getElementById('btn')

    btn.onclick = function () {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:3000/cache')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          alert(xhr.responseText)
        }
      }
      // 当网络中断时会触发onerror事件
      xhr.onerror = function () {
        alert('网络中断, 无法发送ajax请求')
      }
    }
  </script>
</body>
</html>
  • 服务端代码
const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')
const fs = require('fs')

const app = express()

app.use(bodyParser.json())

app.use(express.static(path.join(__dirname, 'public')))

app.get('/cache', (req, res) => {
  fs.readFile('./test.txt', (err, result) => {
    res.send(result)
  })
})

app.listen(3000, () => console.log('服务器启动成功'))
  • test.txt文件

hello

运行结果(这里用的是IE 8)
在这里插入图片描述

  • 更改test.txt文件里面的内容为 hello 123
    到浏览器中运行, 结果还是和上面的一样

解决方案
在请求地址的后面加请求参数, 保证每一次请求中的请求参数的值不同

xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random())

运行结果(浏览器是IE 8)
在这里插入图片描述

MichstaBe Stars
关注
专栏目录
ajax编程步骤
07-26
### AJAX编程步骤详解 在现代Web开发中，异步JavaScript和XML（Asynchronous JavaScript and XML，简称AJAX）是一种在无需重新加载整个网页的情况下就能更新部分网页的技术。它通过在后台与服务器进行少量数据交换...
AJAX基础教程及实例
03-06
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过AJAX，您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的JavaScript可...
JavaScript Ajax编程 应用篇
10-22
JavaScript Ajax编程应用篇涵盖的知识点可以分为以下几部分： 1. Ajax基础概念 Ajax代表Asynchronous JavaScript and XML，是一种在无需重新加载整个页面的情况下，能够实现页面局部更新的技术。它基于...
ajax入门基础教程
09-01
在学习AJAX的过程中，新手需要从基础开始，逐步了解如何通过JavaScript创建XMLHttpRequest对象，并用它发起请求、接收响应。同时，新手还要学习如何处理服务器返回的数据，这通常涉及解析XML或JSON格式的数据。 ...
AJAX技术基础介绍
08-11
1. JavaScript：在AJAX中，JavaScript是核心编程语言，负责处理用户的交互事件，发送异步请求，以及接收和处理服务器返回的数据。JavaScript通过XMLHttpRequest对象与服务器进行通信，动态更新DOM（Document Object ...
VUE 开发——AJAX学习（一）
weixin_74113429的博客
09-25 859
异步的javascript和XML，就是使用XMLHttp Request对象与服务器通信，浏览器和服务器进行数据交换的技术。语法：http://xxxx.com/xxx/xxx?1.请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容，可以在网络中查看。3.URL查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。1.定义：统一资源定位符，简称网址，用于访问网络上的资源。URL：协议://域名/资源路径。
Ajax开发技术
Liuxu 的博客
09-29 447
【代码】Ajax开发技术。
AJAX(简介以及一些用法)
m0_63233901的博客
09-24 787
对象和服务器进行数据交互的方式就是。，它可以帮助我们轻松实现网页与服。）我们可以理解为：在网页中。务器之间的数据交互。
详解Ajax与axios的区别
weixin_56187723的博客
09-22 1022
Ajax与Axios在Web开发中都是用于发送HTTP请求的技术，但它们在多个方面存在显著的差异。
VUE 开发——AJAX学习（二）
weixin_74113429的博客
09-26 341
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数；Promise：用于表示一个异步操作的最终完成（或失败）及其结果值。Promise对象一旦被兑现/拒绝，就是已敲定，状态无法再被改变。待定（pending）：初始状态，既没有被兑现，也没有被拒绝。同步代码：逐行执行，需原地等待结果后，才继续向下执行。成功调用：resolve（值）触发then（）执行。失败调用：reject（值）触发catch（）执行。功能：不离开当前页面，显示单独内容，供用户操作。
VUE 开发——AJAX学习（三）
weixin_74113429的博客
09-26 428
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。在async函数内，使用await关键字，获取Promise对象“成功状态”结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制。概念：合并多个Promise对象，等待所有同时完成完成（或某一个失败），做后续逻辑。概念：事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。先执行同步代码，再是微任务，最后是宏任务。
基于asp.net的房地产管理系统设计与实现.docx
09-29
基于asp.net的房地产管理系统设计与实现.docx
基于asp.net的小型企业办公耗材库存管理系统设计与实现.docx
09-29
基于asp.net的小型企业办公耗材库存管理系统设计与实现.docx
基于Vue和Element的电脑配件管理系统设计源码
09-29
该项目为基于Vue和Element UI框架构建的电脑配件管理系统源码，包含89个文件，涉及32个JavaScript文件、20个Vue组件文件、12个SVG图标文件、6个SCSS样式文件、3个PNG图片文件、2个YAML配置文件、2个Markdown文件、2个JPG图片文件、1个EditorConfig配置文件以及1个开发相关文件。该系统主要使用JavaScript和Vue进行开发，辅以HTML和SVG技术，旨在提供一套高效便捷的电脑配件管理解决方案。
非标自动化设备【B81】.zip
09-29
非标自动化设备【B81】.zip
网络安全 - JWT 密钥爆破 - CrackingJWTKeys.py
09-29
JWT（JSON Web Token）是一种广泛用于身份验证和信息交换的开放标准。然而，JWT的安全性在很大程度上依赖于其签名的有效性，而签名的有效性又依赖于密钥的保密性。因此，保护JWT密钥不被破解至关重要。`CrackingJWTKeys.py`是一个用于破解JWT密钥的工具，它可以帮助安全专家评估JWT实现的安全性。 ### 什么是JWT密钥爆破？ JWT密钥爆破是一种尝试通过尝试多种可能的密钥来破解JWT签名的方法。如果攻击者能够破解密钥，他们就可以伪造令牌，从而冒充其他用户或访问受限资源。这通常涉及到尝试使用一个预先定义的单词列表（字典攻击）或者使用暴力破解方法来猜测密钥。 ### `CrackingJWTKeys.py`的作用 `CrackingJWTKeys.py`工具旨在帮助安全研究人员和渗透测试人员识别JWT实现中的弱点。它可以通过以下方式帮助识别这些弱点： 1. **字典攻击**：使用一个预先定义的密码列表尝试破解密钥。 2. **暴力破解**：尝试所有可能的密钥组合直到找到正确的一个。 3. **密钥混淆攻击**：尝试利用已知的漏洞，如CVE-2016-
绿色环保助手app开发
最新发布
09-29
Android app 大学生 环保助手app开发
非标自动化设备【B64】.zip
09-29
非标自动化设备【B64】.zip
CBNData-中国新消费品牌3月观察报告-29页
09-29
CBNData-中国新消费品牌3月观察报告-29页.
AJAX编程基础：创建请求与响应处理
本文将详细介绍Ajax编程的基本步骤，以便于理解和实现异步数据交互在Web应用中的应用。Ajax全称为Asynchronous JavaScript and XML，它允许网页在无需刷新整个页面的情况下与服务器进行数据交换，从而提高用户体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值