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

网络请求 Ajax 讲解

2024-08-11 20
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
土木林森
|
6月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术，允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式，而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果，提升了用户体验。掌握这些技术对前端开发者至关重要。
土木林森
68 0
路宇
|
JSON 前端开发 JavaScript
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
路宇
66 0
秋叶原的琴音
|
前端开发 API
uni-ajax网络请求库使用
uni-ajax网络请求库使用
秋叶原的琴音
147 0
祁符建
|
XML 前端开发 JavaScript
前端祖传三件套JavaScript的网络请求之Ajax
在前端开发中，Ajax（Asynchronous JavaScript and XML）是一种异步网络请求技术，可以实现无需刷新页面的数据交互。本文将介绍 Ajax 的基本原理和使用方法。
祁符建
110 0
技术小胖子
|
Web App开发 监控 前端开发
开发分布式网络监控分析之前端ajax展现那些事
技术小胖子
1189 0
吞吞吐吐的
|
JSON 前端开发 JavaScript
Web：AJAX的网络请求
吞吞吐吐的
1232 0
mrq4nk6ni2neg
|
4天前
|
存储 SQL 安全
网络安全与信息安全：关于网络安全漏洞、加密技术、安全意识等方面的知识分享
【10月更文挑战第39天】在数字化时代，网络安全和信息安全成为了我们生活中不可或缺的一部分。本文将介绍网络安全漏洞、加密技术和安全意识等方面的内容，帮助读者更好地了解网络安全的重要性，并提供一些实用的技巧和方法来保护自己的信息安全。
mrq4nk6ni2neg
14 2
aliyun8599273441-30642
|
5天前
|
安全 网络安全 数据安全/隐私保护
网络安全与信息安全：关于网络安全漏洞、加密技术、安全意识等方面的知识分享
【10月更文挑战第38天】本文将探讨网络安全与信息安全的重要性，包括网络安全漏洞、加密技术和安全意识等方面。我们将通过代码示例和实际操作来展示如何保护网络和信息安全。无论你是个人用户还是企业，都需要了解这些知识以保护自己的网络安全和信息安全。
aliyun8599273441-30642
51 28
游客qf4jmczx4xu2y
|
4天前
|
存储 安全 网络安全
云计算与网络安全：探索云服务中的信息安全策略
【10月更文挑战第39天】随着云计算的飞速发展，越来越多的企业和个人将数据和服务迁移到云端。然而，随之而来的网络安全问题也日益突出。本文将从云计算的基本概念出发，深入探讨在云服务中如何实施有效的网络安全和信息安全措施。我们将分析云服务模型（IaaS, PaaS, SaaS）的安全特性，并讨论如何在这些平台上部署安全策略。文章还将涉及最新的网络安全技术和实践，旨在为读者提供一套全面的云计算安全解决方案。
游客qf4jmczx4xu2y
19 5
aliyun8599273441-30642
|
4天前
|
存储 安全 网络安全
网络安全与信息安全：漏洞、加密技术与安全意识的交织
【10月更文挑战第39天】在数字化时代，网络安全与信息安全成为保护个人隐私和组织资产的重要屏障。本文将探讨网络安全中的常见漏洞、加密技术的应用以及提升安全意识的重要性。通过具体案例分析，我们将深入了解网络攻击的手段和防御策略，同时提供实用建议，以增强读者对网络安全的认识和防护能力。
aliyun8599273441-30642
13 4

热门文章

最新文章

  • 1
    ajax教程
  • 2
    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同
  • 3
    bboss mvc处理ajax get方法中文乱码方式纪实
  • 4
    Firefox AJAX请求readyState = 0，status = 0问题
  • 5
    由基础触类旁通--Ajax调用WebService的简单例子
  • 6
    ajax学习小结
  • 7
    GridViewAddUpdateDelete_Ajax with jquery.blockUI
  • 8
    【MVC】AJAX+PartialView实现商城首页的楼层加载
  • 9
    C#抓取AJAX页面的内容
  • 10
    ajax和json对象
  • 1
    探索机器学习中的神经网络：从基础到应用
    80
  • 2
    安利7个免费开源的网络监控工具，网络工程师速度收藏！
    310
  • 3
    云计算与网络安全：技术融合的未来
    47
  • 4
    网络安全的屏障与密钥：漏洞防御、加密技术与安全意识
    42
  • 5
    网络安全的守护者：漏洞、加密与意识的三维防御
    39
  • 6
    网络安全与信息安全：从漏洞到防护的全方位解析
    60
  • 7
    云计算与网络安全：技术进展与挑战
    48
  • 8
    `nmap`是一个开源的网络扫描工具，用于发现网络上的设备和服务。Python的`python-nmap`库允许我们在Python脚本中直接使用`nmap`的功能。
    153
  • 9
    图神经网络是一类用于处理图结构数据的神经网络。与传统的深度学习模型（如卷积神经网络CNN和循环神经网络RNN）不同，
    88
  • 10
    生成对抗网络（GAN）由两部分组成：生成器（Generator）和判别器（Discriminator）。
    395

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

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