AJAX 学习笔记

一心猿

于 2023-11-07 19:47:12 发布

阅读量328

点赞数

文章标签： ajax 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_41891244/article/details/134227545

版权

一、AJAX的初体验

1、准备一个html页面

我们在页面里准备一个button标签，然后在准备一个div标签，完成的功能是点击button，使用AJAX向服务端请求数据，将服务端返回的数据呈现在div标签里

在body定义一个button标签和一个div标签

<button>点击发送请求</button>
<div id="result"></div>

在给div附加简单的样式哈

<style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px blue;
    }
  </style>

在script标签里编写主要逻辑，首先获取button和div标签

const btn = document.querySelector('button')
const div = document.querySelector('#result')

然后给button绑定一个点击事件

btn.addEventListener("click", onCallback)

事件内容主要做两件事，向服务端发送请求，然后将响应内容呈现在div里

 const onCallback = function (event) {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://127.0.0.1:8080/server')
      xhr.send()
      /**
       * readyState是xhr对象的属性，
       * 0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回部分结果 4-服务端返回所有结构
       */
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            //处理成功响应结果
            div.innerHTML = xhr.response
          }
        }
      }
    }

2、采用nodejs和express框架搭建一个服务器

本地安装node，然后使用npm i express安装依赖，监听8080端口

const express = require('express')

const app = express()

app.get('/server', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.send('HELLO AJAX')
}
)

app.listen(8080, () => console.log('服务已经启动'))

采用node .\server.js启动服务，假设文件名是server.js

3、在浏览器点击按钮，可以收到响应结果

二、AJAX发送post请求

使用AJAX发生post请求，我们准备一个html页面，然后声明一个div标签，完成的功能主要是鼠标划过div标签，采用AJAX发送请求，将响应内容呈现在div里

声明一个标签

<div class="result"></div>

给div标签添加样式

 <style>
    .result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  </style>

在script标签里获得div对象，给div添加事件

    const div = document.querySelector('.result')
    div.addEventListener('mouseover', function () {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://127.0.0.1:8080/server')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            //处理成功响应结果
            div.innerHTML = xhr.response
          }
        }
      }
    })

此时不能立即发请求，还要在前面服务端案例定义post请求规则，并重启服务

app.post('/server', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.send('HELLO AJAX POST')
}
)

当鼠标划过，你会神奇地发现div里出现响应内容

如果你想在请求体里设置参数，可以在send方法里设置

const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://127.0.0.1:8080/server')
xhr.send('a=100&b=200')

如果你想设置请求头内容，可以使用setRequestHeader方法

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

如果你想设置自定义请求头，比如设置name=xxx那么你的nodejs服务器需要修改。

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

此时还是不能接收自定义请求头，前端还会发送一个options请求来校验这个请求头是否可用，此时可以将服务端的post请求改成all，可以接收任何请求

app.all('/server', (req, res) => {
  //设置跨域
  res.setHeader('Access-Control-Allow-Origin', '*')

  res.setHeader('Access-Control-Allow-Headers', '*')
  res.send('HELLO AJAX POST')
}
)

三、AJAX处理服务端的JSON数据

采用AJAX来处理json数据，只需要将AJAX的响应类型设置为json

xhr.responseType = 'json'

当然也可以不设置，采用手动处理将json转成对象

let data = JSON.parse(xhr.response)

另外后端在发生数据前要将对象转成json才行

const data = { name: 'xxx' }
res.send(JSON.stringify(data))

四、AJAX-IE缓存问题

为了解决IE浏览器的缓存问题，可以在请求路径加时间

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

五、设置AJAX网络超时

AJAX可以设置网络超时时间，以及超时后的回调

//两秒超时
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function () { alert('网络异常，请稍后尝试！！') }
//网络异常回调
xhr.onerror = function () { alert('请检查您的网络') }

六、手动取消AJAX请求

x.abort();

七、解决AJAX重复请求问题

其实就是定义一个标志，在请求发送之前先判断是否在发送请求，如果是则取消请求

  const btns = document.querySelectorAll('button')
    let x = null
    //标识变量
    let isSending = false //是否正在发送AJAX请求
    btns[0].onclick = function () {
      //正在发送请求
      if (isSending) x.abort() //正在发送，取消该请求
      x = new XMLHttpRequest()
      isSending = true
      x.open('GET', 'http://127.0.0.1:8080/delay')
      x.send()
      x.onreadystatechange = function () {
        if (x.readyState === 4) {
          //请求结束
          isSending = false
        }
      }
    }

八、使用jQuery发送AJAX请求

先引入jQuery依赖

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

定义三个按钮

<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法ajax</button>

在script定义内容，发送请求

        $('button').eq(2).click(function () {
            $.ajax({
                url: 'http://127.0.0.1:8080/json-server',
                //请求参数
                data: { a: 100, b: 100 },
                //请求类型
                type: 'GET',
                //响应体类型
                dataType: 'json',
                //成功的回调
                success: function (data) {
                    console.log(data)
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    console.log('出错啦！！')
                },
                //头信息
                headers: {
                    c: 300, d: 400
                }
            })
        })

九、AJAX-Axios发送AJAX请求

引入Axios依赖

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

使用Axios发送GET请求

//GET 请求
      axios.get('http://127.0.0.1:8080/axios-server', {
        //url参数
        params: {
          id: 100,
          vip: 7
        },
        //请求头信息
        headers: {
          name: 'xxx',
          age: 26
        }
      }).then(value => console.log(value))

使用Axios发送POST请求

      axios.post('http://127.0.0.1:8080/axios-server', {
        username: 'admin',
        password: 'admin'
      }, {
        //url参数
        params: {
          id: 100,
          vip: 7
        },
        //请求头信息
        headers: {
          name: 'xxx',
          age: 26
        }
      })

使用Axios的通用方法发送请求

axios({
        method: 'POST',
        url: 'http://127.0.0.1:8080/axios-server',
        params: { a: 100, b: 200 }, //url参数
        headers: { c: 100, d: 300 },
        data: { username: 'aaa', password: 'bbbb' } //请求体参数
      }).then(res => console.log(res))

十、使用AJAX-fetch发送请求

无需引入任何依赖，直接在script标签使用

fetch('http://127.0.0.1:8080/fetch-server?vip=10', {
        method: 'POST',
        headers: {
          name: 'xxx'
        },
        body: 'username=admin&password=admin'
      }).then(res => res.json())
        .then(res => console.log(res))