AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

网络请求 Ajax 讲解

2024-08-11 28
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： AJAX（异步JavaScript与XML）允许浏览器向服务器发起异步请求，无需刷新页面即可获取数据，改善用户体验。XML是一种可扩展标记语言，用于传输和存储数据，与HTML不同，XML使用自定义标签。如今JSON已取代XML成为数据交换的标准格式。AJAX的关键优势包括与服务器后台通信时不需刷新页面及基于用户事件更新页面内容。然而，它也存在如无浏览历史记录、跨域问题及不利于搜索引擎优化等局限性。HTTP请求通过请求报文发送至服务器，服务器以响应报文形式回复，其中包含状态码、响应头及响应体。常见的请求方法包括GET（查询）、POST（新增）、PUT（修改）和DELETE（删除）。

1.1 AJAX 简介

  1. AJAX 全称为 (Asynchronous JavaScript And XML)，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求
  1. 最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 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":"男"}

1.3 AJAX 的特点

1.3.1 AJAX 的优点

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

1.3.2 AJAX 的缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • seo不友好

2. HTTP相关问题

2.1 MDN 文档

Http概述:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

2.2 HTTP 请求交互的基本过程

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

  1. 请求行 method url GET /product_detail?id=2 POST /login
  2. 多个请求头
  • Host: www.baidu.com
  • Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
  • Content-Type: application/x-www-form-urlencoded 或者application/json
  1. 请求体 username=tom&pwd=123 {"username": "tom", "pwd": 123}

2.4 HTTP 响应报文

1.响应状态行:

status statusText

2.多个响应头:

Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/

3.响应体:

html 文本/json 文本/js/css/图片...

2.5 post 请求体参数格式

  1. Content-Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接, 参数之间用&连接 例如: name=%E5%B0%8F%E6%98%8E&age=12
  2. Content-Type: application/json;charset=utf-8 用于 json 字符串参数 例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
  3. Content-Type: multipart/form-data 用于文件上传请求

2.6 常见的响应状态码

  1. 200 OK 请求成功。 一般用于GET 与POST 请求
  2. 201 Created 已创建。 成功请求并创建了新的资源
  3. 401 Unauthorized 未授权/请求要求用户的身份认证
  4. 404 Not Found 服务器无法根据客户端的请求找到资源
  5. 500 Internal Server Error 服务器内部错误，无法完成请求
// 判断(服务端返回了所有的结果)

        if (xhr.readyState === 4) {
   

         //判断响应码 200 404 403 401 500

          //2xx 成功

          if (xhr.status >= 200 && xhr.status < 300) {
   

            // 处理结果 行 头 空格 体

            // // 1/响应行

            // console.log(xhr.status);//状态码

            // console.log(xhr.statusText);//状态字符串

            // console.log( xhr.getAllResponseHeaders);//所有响应头

2.7 不同类型的请求及其作用

  • GET: 从服务器端读取数据（查）
  • POST: 向服务器端添加新数据 （增）
  • PUT: 更新服务器端已经数据 （改）
  • DELETE: 删除服务器端数据 （删）

2.8 区别 一般http请求 与 ajax请求

  1. ajax请求 是一种特别的 http请求
  2. 对服务器端来说, 没有任何区别, 区别在浏览器端
  3. 浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
  4. 浏览器端接收到响应

3. 原生AJAX 的基本使用 XHR

3.0 准备工作

3.0.1 安装node.js

node.js 官网: http://nodejs.cn/

3.0.2 安装express（服务端框架）

安装express(服务端框架)

  1. 初始化环境
npm init --yes

2.下载express包

npm install express --save

  1. 编写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('孙飞')
 })

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

    4.运行js程序

    ​ 右击文件,在集成终端打开

    ​ node .\01express使用.js

    3.0.3安装nodemon自动重启工具

    文件内容有修改自动重新启动服务

    https://www.npmjs.com/package/nodemon

1.安装

npm install -g nodemon

2.启动服务

nodemon server.js

3.问题:

 如果显示无法加载文件 C:\Program Files\nodejs\node_global\nodemon.ps1，因为在此系统上禁止运行脚本。
 在启动的时候 指令前面加上npx

3.1 理解

  1. 使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得Web 页面可以只更新页面的局部，而不影响用户的操作。

​ https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
​ XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

3.2 核心对象使用步骤

3.2.1 创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

3.2.2 设置请求信息（请求方法和url）

// 请求方式
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.2.3 发送请求

xhr.send(body) *//get请求不传 body 参数，只有post请求使用*

3.2.4 接收响应（事件绑定，处理服务端返回的结果）

//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){
   
    // readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4
    if(xhr.readyState == 4 && xhr.status == 200){
   
        var text = xhr.responseText;
        console.log(text);
    }
}

3.3 使用案例

使用AJAX_get发送请求

3.3.1前端html网页

<!DOCTYPE html>

<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>
        #box {
    
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
        }
    </style>
</head>
<body>
    <button>点我发送请求</button>


```html
<div id="box"></div>
<script>
    var btn = document.querySelector('button');
    var box = document.querySelector('#box');
    btn.addEventListener('click', function () {
        //1,创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置请求方法和url
        xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
        // 3.发送
        xhr.send();
        // 4.事件绑定 处理服务端法律来的数据
        //on : when 当...的时候
        //readystate  : 是xhr对象中的数据,表示状态 0 1 2 3 4
        // change : 改变
        xhr.onreadystatechange = function () {
            // 判断(服务端返回了所有的结果)
            if (xhr.readyState === 4) {
                //判断响应码 200 404 403 401 500
                //2xx 成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果 行 头 空格 体
                    // // 1/响应行
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符串
                    // console.log( xhr.getAllResponseHeaders);//所有响应头
                    console.log(xhr.response);//响应体
                    box.innerHTML = xhr.response;//吧响应体的内容给div盒子
                }
            }
        }
    })

3.3.2服务端server.js

```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('孙飞')
})

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

3.4 AJAX_发送POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

服务端设置

app.post('/server', (request, response) => {
   

 // 设置响应头,设置为允许跨域
 response.setHeader('Access-Control-Allow-Origin', '*');

 // 设置响应
 response.send('寒夜 月光 微弱 ')

})

与之对应的html部分

// 1,创建对象

       // 1. 创建对象      
     const xhr = new **XMLHttpRequest**();
     // 2.初始化 设置请求方法和url
     xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

效果展示:

绑定的是鼠标进入事件(mouseenter)触发

3.5 AJAX_设置请求头的信息

js部分

 // 1,创建对象

      const xhr = new XMLHttpRequest();

     // 2.初始化 设置请求方法和url

      xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

      // 设置请求头信息

      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

      xhr.setRequestHeader('name','sunfei');

与之对应的服务端代码

 // all:表示可以接受任意类型的请求 get post 
 app.all('/server', (request, response) => {
   

 // 设置响应头,设置为允许跨域
 response.setHeader('Access-Control-Allow-Origin', '*');

 // 响应头  

 // *:表示所有的类型都可以接收
 response.setHeader('Access-Control-Allow-Headers','*');

结果展示:

3.4 json数据请求

html部分

    // 获取div元素
    const div = document.querySelector('#box')
    //绑定键盘按下事件
    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) {
   
                    // 手动对后端服务器传来的对象数据进行手动处理
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // const a = div.innerHTML = data.name;
                        // div.innerHTML = a;
                    //自动数据类型转化
                    console.log(xhr.response);
                    div.innerHTML = xhr.response.name;
                }
            }
        }
    }

后端服务器部分

// 3.创建路由规则

// all:表示可以接受任意类型的请求 get post 

app.**all**('/json-server', (request, response) => {
   

 // 设置响应头,设置为允许跨域

 response.setHeader('Access-Control-Allow-Origin', '*');

 // 响应头  
 // *:表示所有的类型都可以接收

 response.setHeader('Access-Control-Allow-Headers', '*');

 const data = {
   

  name: "孙兴飞",

  sex: "男"

 }
 //  因为send方法只能接收字符串的数据,所以要传入对象数据,首先要进行的字符串的转化
 let str = JSON.stringify(data);
 // 设置响应
 // send方法 只能接收字符串 和八份
 response.send(str);
})

效果展示:

绑定的键盘事件:window.onkeydown = function () {}

控制台打印结果:

3.5 请求超时与网络异常

       const xhr = new XMLHttpRequest();

      // 超时设置  超过指定时间,自动取消请求
      xhr.timeout = 2000;//如果超过2s服务器还没有响应

      //超时回调函数  超时回调函数 ,超时之后的逻辑处理
      xhr.ontimeout = function(){
   
       alert('连接超时,请稍后重试!!!')
      }

      // 网络异常  没有网络的时候执行提示
      xhr.onerror =function(){
   
        alert('您的网络似乎走神了!!!')
      }

  // 路由规则:延迟响应
  app.get('/delay', (request, response) => {
   
  // 设置响应头,设置为允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  const data = {
   
    name: "延时响应",
    sex: ""
  }

  //  因为send方法只能接收字符串的数据,所以要传入对象数据,首先要进行的字符串的转化
  let str = JSON.**stringify**(data);

    //定时器
  setTimeout(() => {
   
   // 3秒之后将数据返回给前端
   response.send(str);
  }, 3000);

})

效果展示:

3.6 取消请求

// 手动取消
xhr.abort()

3.7 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

3.8 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

  • 0: 表示XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
  • 1: 表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息
  • 2: 表示send()方法已经执行，并且头信息和状态码已经收到
  • 3: 表示正在接收服务器传来的body 部分的数据
  • 4: 表示服务器数据已经完全接收，或者本次接收已经失败了

3.10 API总结

XMLHttpRequest()：创建 XHR 对象的构造函数
status：响应状态码值，如 200、404
statusText：响应状态文本，如 ’ok‘、‘not found’
readyState：标识请求状态的只读属性 0-1-2-3-4
onreadystatechange：绑定 readyState 改变的监听
responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
respons：响应体数据，类型取决于 responseType 的指定
timeout：指定请求超时时间，默认为 0 代表没有限制
ontimeout：绑定超时的监听
onerror：绑定请求网络错误的监听
open()：初始化一个请求，参数为：(method, url[, async])
send(data)：发送请求
abort()：中断请求 （发出到返回之间）
getResponseHeader(name)：获取指定名称的响应头值
getAllResponseHeaders()：获取所有响应头组成的字符串
setRequestHeader(name, value)：设置请求头

(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

文章标签：
前端开发
数据格式
XML
JavaScript
JSON
关键词：
网络请求ajax
网络ajax
孙飞i
目录
相关文章
土木林森
|
7月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术，允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式，而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果，提升了用户体验。掌握这些技术对前端开发者至关重要。
土木林森
74 0
路宇
|
JSON 前端开发 JavaScript
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
路宇
70 0
秋叶原的琴音
|
前端开发 API
uni-ajax网络请求库使用
uni-ajax网络请求库使用
秋叶原的琴音
159 0
祁符建
|
XML 前端开发 JavaScript
前端祖传三件套JavaScript的网络请求之Ajax
在前端开发中，Ajax（Asynchronous JavaScript and XML）是一种异步网络请求技术，可以实现无需刷新页面的数据交互。本文将介绍 Ajax 的基本原理和使用方法。
祁符建
118 0
技术小胖子
|
Web App开发 监控 前端开发
开发分布式网络监控分析之前端ajax展现那些事
技术小胖子
1192 0
吞吞吐吐的
|
JSON 前端开发 JavaScript
Web：AJAX的网络请求
吞吞吐吐的
1239 0
丰宝宝
|
6天前
|
SQL 安全 网络安全
网络安全与信息安全：知识分享####
【10月更文挑战第21天】 随着数字化时代的快速发展，网络安全和信息安全已成为个人和企业不可忽视的关键问题。本文将探讨网络安全漏洞、加密技术以及安全意识的重要性，并提供一些实用的建议，帮助读者提高自身的网络安全防护能力。 ####
丰宝宝
43 17
历年考试不作弊
|
16天前
|
存储 SQL 安全
网络安全与信息安全：关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及，网络安全问题日益突出。本文将介绍网络安全的重要性，分析常见的网络安全漏洞及其危害，探讨加密技术在保障网络安全中的作用，并强调提高安全意识的必要性。通过本文的学习，读者将了解网络安全的基本概念和应对策略，提升个人和组织的网络安全防护能力。
历年考试不作弊
77 9
技术混子
|
17天前
|
SQL 安全 网络安全
网络安全与信息安全：关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及，网络安全问题日益突出。本文将从网络安全漏洞、加密技术和安全意识三个方面进行探讨，旨在提高读者对网络安全的认识和防范能力。通过分析常见的网络安全漏洞，介绍加密技术的基本原理和应用，以及强调安全意识的重要性，帮助读者更好地保护自己的网络信息安全。
技术混子
40 10
mrq4nk6ni2neg
|
19天前
|
SQL 安全 网络安全
网络安全与信息安全：关于网络安全漏洞、加密技术、安全意识等方面的知识分享
在数字化时代，网络安全和信息安全已成为我们生活中不可或缺的一部分。本文将介绍网络安全漏洞、加密技术和安全意识等方面的内容，并提供一些实用的代码示例。通过阅读本文，您将了解到如何保护自己的网络安全，以及如何提高自己的信息安全意识。
mrq4nk6ni2neg
46 10

热门文章

最新文章

  • 1
    【深度神经网络 One-shot Learning】孪生网络少样本精准分类
  • 2
    访问windows 共享提示&quot;找不到网络路径&quot; 排查过程
  • 3
    指数退避（Exponential backoff）在网络请求中的应用
  • 4
    基于C++(QT框架)设计的网络摄像头项目(支持跨平台运行)
  • 5
    DL之ANN/DNN： 人工神经网络ANN/DNN深度神经网络算法的简介、应用、经典案例之详细攻略
  • 6
    第二章--（第七单元）--访问网络文件共享服务
  • 7
    Linux 2.4 NAT （网络地址转换） HOWTO（四）
  • 8
    网络硬盘使用技巧
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    Cisco3750在多VLAN网络环境下DHCP的实现
  • 1
    ASP.NET AJAX使用方法概述（三）
    56
  • 2
    Ajax – JSON入门指南
    64
  • 3
    安装ASP.NET AJAX (一安装)
    113
  • 4
    CSR（客户端渲染）和AJAX在Web开发中各自扮演不同的角色
    69
  • 5
    AJAX和CSR（客户端渲染）是Web开发中常用的两种技术
    64
  • 6
    ajax Fileupload多文件上传实现
    74
  • 7
    学习Ajax使用异步对象发送请求
    72
  • 8
    【专栏：HTML 进阶篇】HTML 表单验证与 AJAX 交互
    56
  • 9
    【JavaScript技术专栏】JavaScript网络请求与Ajax技术
    75
  • 10
    【PHP开发专栏】jQuery与PHP实现Ajax通信
    134

    • 相关课程

    更多
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • Ajax 前端开发入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • 网络管理者必知-2分钟了解新出台的《网络安全法》
  • Ajax入门

    • 相关电子书

    更多
  • Session：更加安全、可靠的数据中心网络产品更新
  • Session：极简易用的全球化网络产品更新
  • Session：弹性、高可用、可观测的应用交付网络产品更新

    • 相关实验场景

    更多
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
    • 下一篇
    DataWorks