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>

相关文章
|
13天前
|
XML 前端开发 JavaScript
|
30天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
15天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
30天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
30天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
67 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
68 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
148 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
45 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]