AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)

简介: AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)

8. 发送POST请求

服务端:

// 导入express
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由对象
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 向客户端发送数据
  response.send('Hello AJAX')
})
app.post('/', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 向客户端发送数据
  response.send('Hello AJAX POST')
})
// 启动服务器进行监听
// 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求
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>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>发送POST请求</button>
    <div id="result"></div>
    <script>
      // 获取按钮
      const btn = document.querySelector('button')
      // 获取div
      const div = document.querySelector('div')
      // 绑定事件
      btn.addEventListener('click', function () {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化 设置请求的方法和url
        xhr.open('POST', 'http://127.0.0.1:8000/')
        // 发送请求
        xhr.send()
        // 处理返回的数据
        xhr.onreadystatechange = function () {
          // 服务端返回了所有的结果
          if (xhr.readyState === 4) {
            // 响应状态码 2xx 为成功
            if (xhr.status >= 200 && xhr.status < 300) {
              // 设置div中的文本
              div.innerHTML = xhr.response
            }
          }
        }
      })
    </script>
  </body>
</html>

8.1 POST设置请求体

在xhr.send()中设置,可以设置任意类型任意格式的数据

// 绑定事件
      btn.addEventListener('click', function () {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化 设置请求的方法和url
        xhr.open('POST', 'http://127.0.0.1:8000/')
        // 发送请求
        xhr.send('name=zs&age=12')
        ...
      })

8.2 设置请求头

在open方法后进行添加 xhr.setRequestHeader()进行设置

// 绑定事件
      btn.addEventListener('click', function () {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化 设置请求的方法和url
        xhr.open('POST', 'http://127.0.0.1:8000/')
        //设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 发送请求
        xhr.send('name=zs&age=12')
        ...
      })

9. 服务端响应JSON格式的数据

// 导入express
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由对象
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 向客户端发送数据
  response.send('Hello AJAX')
})
app.post('/', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 向客户端发送数据
  response.send('Hello AJAX POST')
})
app.get('/json', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  const data = {
    name: 'zs',
    age: 12
  }
  // 对对象进行字符串转换
  let str = JSON.stringify(data)
  // 向客户端发送数据
  response.send(str)
})
// 启动服务器进行监听
// 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求
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>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>发送GET请求JSON数据</button>
    <div id="result"></div>
    <script>
      // 获取按钮
      const btn = document.querySelector('button')
      // 获取div
      const div = document.querySelector('div')
      // 绑定事件
      btn.addEventListener('click', function () {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化 设置请求的方法和url
        xhr.open('GET', 'http://127.0.0.1:8000/json')
        // 发送请求
        xhr.send()
        // 处理返回的数据
        xhr.onreadystatechange = function () {
          // 服务端返回了所有的结果
          if (xhr.readyState === 4) {
            // 响应状态码 2xx 为成功
            if (xhr.status >= 200 && xhr.status < 300) {
              // 设置div中的文本
              div.innerHTML = xhr.response
              console.log(xhr.response)
              // 手动对数据进行转化
              console.log(JSON.parse(xhr.response))
            }
          }
        }
      })
    </script>
  </body>
</html>

9.1 服务端返回的JSON自动转化

设置:

// 设置响应体数据的类型
        xhr.responseType = 'json'
<!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>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>发送GET请求JSON数据</button>
    <div id="result"></div>
    <script>
      // 获取按钮
      const btn = document.querySelector('button')
      // 获取div
      const div = document.querySelector('div')
      // 绑定事件
      btn.addEventListener('click', function () {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 设置响应体数据的类型
        xhr.responseType = 'json'
        // 初始化 设置请求的方法和url
        xhr.open('GET', 'http://127.0.0.1:8000/json')
        // 发送请求
        xhr.send()
        // 处理返回的数据
        xhr.onreadystatechange = function () {
          // 服务端返回了所有的结果
          if (xhr.readyState === 4) {
            // 响应状态码 2xx 为成功
            if (xhr.status >= 200 && xhr.status < 300) {
              // 设置div中的文本
              div.innerHTML = xhr.response
              console.log(xhr.response)
              // 手动对数据进行转化
              // console.log(JSON.parse(xhr.response))
            }
          }
        }
      })
    </script>
  </body>
</html>

10. nodemon

【Express】

11. 解决 IE 缓存问题

在一些浏览器中(IE),由于缓存机制的存在,ajax 只会发送的第一次请求,剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式:

浏览器的缓存是根据 url 地址来记录的,所以我们只需要修改 url 地址 即可避免缓存问题。

在请求url后添加?t='+Date.now()

将原来的请求地址:

xhr.open( 'GET', 'http://127.0.0.1:8000/ie' )

修改为:

xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now())

由于每次的请求时间不一样,产生的时间戳不一样,所以每次发起的请求url都不同。

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ie?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>

相关文章
|
12天前
|
数据采集 Web App开发 前端开发
处理动态Token:Python爬虫应对AJAX授权请求的策略
处理动态Token:Python爬虫应对AJAX授权请求的策略
|
3月前
|
Docker 容器
Docker网关冲突导致容器启动网络异常解决方案
当执行`docker-compose up`命令时,服务器网络可能因Docker创建新网桥导致IP段冲突而中断。原因是Docker默认的docker0网卡(172.17.0.1/16)与宿主机网络地址段重叠,引发路由异常。解决方法为修改docker0地址段,通过配置`/etc/docker/daemon.json`调整为非冲突段(如192.168.200.1/24),并重启服务。同时,在`docker-compose.yml`中指定网络模式为`bridge`,最后通过检查docker0地址、网络接口列表及测试容器启动验证修复效果。
|
10月前
|
XML 前端开发 JavaScript
|
10月前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
555 61
|
9月前
|
运维 监控 安全
公司监控软件:SAS 数据分析引擎驱动网络异常精准检测
在数字化商业环境中,企业网络系统面临复杂威胁。SAS 数据分析引擎凭借高效处理能力,成为网络异常检测的关键技术。通过统计分析、时间序列分析等方法,SAS 帮助企业及时发现并处理异常流量,确保网络安全和业务连续性。
152 11
|
9月前
|
XML JSON 网络协议
【网络原理】——拥塞控制,延时/捎带应答,面向字节流,异常情况
拥塞控制,延时应答,捎带应答,面向字节流(粘包问题),异常情况(心跳包)
|
9月前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
147 0
|
10月前
|
安全 Java Linux
如何确定 Broken Pipe 异常是由网络问题还是其他原因引起的
Broken Pipe 异常可能由网络问题或其他原因引起。要确定具体原因,可以检查网络连接状态、防火墙设置和系统日志,同时分析异常发生时的上下文信息。
1363 5
|
12天前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
29 1
|
11月前
|
资源调度 JavaScript

热门文章

最新文章