AJAX的使用及常见问题的处理（AJAX入门到熟练使用）

已于 2022-05-29 22:16:18 修改
阅读量751 收藏 3
点赞数 2
分类专栏： Ajax 文章标签： ajax javascript xml
于 2022-05-29 22:14:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44893902/article/details/125037160
版权

文章目录

一、基础知识

1.1AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 AJAX的特点

1.2.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。

  2. 允许你根据用户事件来更新部分页面内容。

1.2.2 AJAX 的缺点

  1. 没有浏览历史，不能回退

  2. 存在跨域问题(同源)

  3. SEO 不友好

1.3 XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，

全都是自定义标签，用来表示一些数据。

比如：

name = “孙悟空” ; age = 18 ; gender = “男” ;

用 XML 表示：

<?xml version="1.0" encoding="utf-8"?>

<student> 
  <name>孙悟空</name>  
  <age>18</age>  
  <gender>男</gender> 
</student>

现在开发中多数已经被 JSON 取代了。

用 JSON 表示：

{"name":"孙悟空","age":18,"gender":"男"}

1.4 HTTP简介

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的约定，规则。

1.4.1 请求报文

重点是格式与参数

行    POST  /s?ie=utf-8  HTTP/1.1 
头    Host: atguigu.com
​    Cookie: name=guigu
​    Content-type: application/x-www-form-urlencoded
​    User-Agent: chrome 83
空行
体    username=admin&password=admin

1.4.2 响应报文

TTP/1.1  200  OK
行    HTTP/1.1  200  OK
头    Content-Type: text/html;charset=utf-8
​    Content-length: 2048
​    Content-encoding: gzip
空行   
体    <html>
​      <head>
​      </head>
​      <body>
​        <h1>一级标题</h1>
​      </body>
​    </html>
​```

常用的状态码及含义：
404（未找到） 服务器找不到请求的网页。
403（禁止） 服务器拒绝请求。
401（未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
500（服务器内部错误） 服务器遇到错误，无法完成请求。
200（成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

二、express框架

后面我们使用express框架模拟后端响应操作。

Node.js中文网：http://nodejs.cn/

Express中文网：https://www.expressjs.com.cn/

2.1 AJAX-express框架介绍与基本使用

初始化命令：

npm init --yes

{
  "name": "administrator",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "antd": "^4.16.5",
    "hexo-generator-search": "^2.4.3",
    "hexo-generator-searchdb": "^1.4.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

安装express命令：

npm i express

启动服务：

// 引入express
const express = require('express')
// 创建应用对象
const app = express()

// 创建路由规则
app.get('/',(request , response)=>{
    response.send('hello world');
});
//  监听端口启用服务
app.listen(8000,()=>{
    console.log("服务已启动")
})

2.2 使用nodemon工具

用来监控你 node.js 源代码的任何变化和自动重启你的服务器。

以前，我们开发一个node后端服务时，每次更改文件，均需重启一下，服务才能生效。这使我们的开发效率降低了很多。nodemon的出现，可以随时监听文件的变更，自动重启服务，我们开发时只需关注代码即可，不再需要手动重启服务。

官方地址：https://www.npmjs.com/package/nodemon

安装命令：

npm install -g nodemon

三、原生AJAX请求的基本操作

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.1 get 请求方式的使用

在这里实现一个，点击发送请求按钮，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

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

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function () {
            //1. 创建HTTP请求对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 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) {
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

express模拟后端：

//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('HELLO AJAX GET');
});

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

使用参数的话在直接在链接后面跟上参数，如：

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

改为

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

3.2 post 请求方式的使用

在这里实现一个，当鼠标移入到页面上的div元素时，页面发送请求到服务器，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            //1. 创建HTTP请求对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            // 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) {
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 创建post路由规则
app.post('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
	
    //设置响应体
    response.send('HELLO AJAX POST');
});
//  监听端口启用服务
app.listen(8000, () => {
    console.log("服务已启动")
})

与get请求方式不同的是这里使用的是post请求，设置post请求的反应请求

// 创建路由规则
app.post('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    response.send('hello ajax');
});

使用参数方法例如：

// 设置请求头
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');// 其他形式
// xhr.send('1233211234567');// 可以是任意格式数据

也可以设置头信息

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'atguigu'); // 可以自定义请求头，非预定的

如果自定义请求头信息，服务端也需要相应的响应

// 设置响应头信息 
response.setHeader('Access-Control-Allow-Headers', '*') // 允许任何响应头

在这里插入图片描述

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// all可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');// 允许任何响应头
    //设置响应体
    response.send('HELLO AJAX POST');
});
//  监听端口启用服务
app.listen(8000, () => {
    console.log("服务已启动")
})

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            //1. 创建HTTP请求对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('name', 'atguigu');

            //3. 发送请求
            xhr.send('a=100&b=200&c=300');
            //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) {
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

3.3 服务器响应 JSON 数据

设置一个键盘事件，当在网页中按下任意键盘，网页向服务器发送数据，然后服务端响应，反馈一组JSON数据，页面接收到后在div中显示

前端代码：

<!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>JSON响应</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result')
    // 绑定按键按下事件
    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) {
            // 查看返回的数据
            // console.log(xhr.response)
            // result.innerHTML = xhr.response;
            // 1、手动对数据进行转化
            let data = JSON.parse(xhr.response)
            console.log(data)
            result.innerHTML = data.name
            ///2、自动对数据进行转化
            // console.log(xhr.response)
            // result.innerHTML = xhr.response.name;
          }
        }
      }
    }
  </script>
</body>

</html>

要把数据在div中显示，有两种转换的方式：

1、手动对数据进行转化

let data = JSON.parse(xhr.response)// 转换数据
result.innerHTML = data.name// 输出到页面

2、自动对数据进行转化

xhr.responseType = 'json';//设置响应体数据类型
result.innerHTML = xhr.response.name;// 转换数据
result.innerHTML = data.name// 输出到页面

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 设置all可以接收任意类型的请求 
app.all('/json-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //响应头
  response.setHeader('Access-Control-Allow-Headers', '*')
  //响应一个数据
  const data = {
    name: 'HELLO THIS JSON'
  }
  // send里面只能接收字符串和，所以对对象进行字符串转换
  let str = JSON.stringify(data)
  //设置响应体
  response.send(str);
});

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

3.4 IE浏览器缓存问题解决

前端代码：

<!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>IE浏览器缓存</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <button id="butt">点击</button>
  <div id="result"></div>
  <script>
    const result = document.querySelector('#result');
    const butt = document.getElementsByTagName('button')[0];
    butt.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;
            console.log('发送请求成功！')
          }
        }
      }
    })
  </script>
</body>

</html>

在发送请求时加上时间：

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

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 针对IE缓存问题
app.get('/ie', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  response.send('HELLO IE');
});

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

3.5 请求超时与网络异常处理

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求超时与网络异常</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>

<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/delay')
      xhr.send()
      // 超时 2s 设置
      xhr.timeout = 2000
      // 超时回调
      xhr.ontimeout = function () {
        alert("网络异常，请稍后重试！")
      }
      // 网络异常回调
      xhr.onerror = function () {
        alert("您的网络似乎出现了一些问题！")
      }
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response
          }
        }
      }
    })
  </script>
</body>

</html>

主要代码：

// 超时 2s 设置
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function () {
    alert("网络异常，请稍后重试！")
}
// 网络异常回调
xhr.onerror = function () {
    alert("您的网络似乎出现了一些问题！")
}

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 针对网络问题
app.get('/delay', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置延时响应
  setTimeout(() => {
    //设置响应体
    response.send('响应超时');
  }, 3000)
});
//  监听端口启用服务
app.listen(8000, () => {
  console.log("服务已启动")
})

3.6 AJAX请求取消操作

使用abort进行取消：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function () {
            x = new XMLHttpRequest();
            x.open("GET", 'http://127.0.0.1:8000/delay');
            x.send();
        }

        // 使用abort进行取消
        btns[1].onclick = function () {
            x.abort();
        }
    </script>
</body>

</html>

3.7 重复请求问题

创建一个变量，用于状态判断

<!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>取消重复请求</title>
</head>

<body>
  <button>点击请求</button>
  <button>点击取消</button>
  <script>
    // 获取元素对象
    const buttons = document.querySelectorAll('button')
    let x = null;
    // 设置变量标识
    let isSending = false;// 添加变量用于判断是否在发送AJAX请求，false为未发送
    buttons[0].onclick = function () {
      if (isSending) x.abort() //判断如果状态为 “正在发送” 则取消发送
      x = new XMLHttpRequest()
      isSending = true; // 设置状态为正在发送
      x.open('GET', 'http://127.0.0.1:8000/delay')
      x.send()
      x.onreadystatechange = function () {
        if (x.readyState == 4) {
          // 修改标识变量
          isSending = false; // 发送完毕设置状态为 “未发送”
        }
      }
    }
    // 使用abort取消
    buttons[1].onclick = function () {
      x.abort();
    }
  </script>
</body>

</html>

四、使用jQuery发送AJAX请求

4.1 get请求

$.get(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

4.2 post请求

$.post(url, [data], [callback], [type])

url:请求的 URL 地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式，xml, html, script, json, text, _default。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function () {
            $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json');
        });

        $('button').eq(1).click(function () {
            $.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            });
        });

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

    </script>
</body>

</html>

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// juery ajax请求处理
app.all('/jQuery-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*')
  //创建一个返回的数据
  const data = { name: 'ymj' }
  let str = JSON.stringify(data)
  response.send(str);
  // response.send('Hello jQuery AJAX');
});

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

使用JSON格式关键代码示例：

$('button').eq(0).click(function () {
      $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200, C: 300 }, function (data) {
        console.log(data)
      }, 'json')
    })
    $('button').eq(1).click(function () {
      $.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200, C: 300 }, function (data) {
        console.log(data)
      }, 'json')
    })

使用通用方法关键代码示例：

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

五、使用axios发送AJAX请求

axios是目前前端热门的AJAX工具包

前端示例代码：

<!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">
  <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
  <!-- crossorigin="anonymous" -->
  <title>axios 发送 AJAX请求</title>
</head>

<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>
  <script>
    // https://github.com/axios/axios
    const butt = document.querySelectorAll('button')
    // 配置 baseURL
    axios.defaults.baseURL = 'http://127.0.0.1:8000'

    butt[0].onclick = function () {
      // GET 请求
      axios.get('/axios-server', {
        // url参数
        params: {
          id: 100,
          vip: 7
        },
        // 请求头信息
        headers: {
          name: 'ymj',
          age: 20
        }
      }).then(value => {
        console.log(value)
      })
    }
    butt[1].onclick = function () {
      // POST 请求
      axios.post('/axios-server', {
        username: 'ymj',
        password: '123456'
      }, {
        // url参数
        params: {
          id: 200,
          vip: 8
        },
        // 请求头参数
        headers: {
          weight: 200,
          height: 200
        }
      })
    }
    butt[2].onclick = function () {
      axios({
        // 请求方法
        method: 'POST',
        // 请求链接
        url: '/axios-server',
        // url 参数
        params: {
          vip: 33,
          level: 39
        },
        // 请求体参数
        data: {
          username: 'admin',
          password: 'admin'
        },
        // 请求头信息
        headers: {
          a: 100,
          b: 200
        }
      }).then(response => {
        // 响应状态码
        console.log(response.status);
        // 响应状态字符串
        console.log(response.statusText);
        // 响应头信息
        console.log(response.headers);
        // 响应体
        console.log(response.data);
      })
    }
  </script>
</body>

</html>

express模拟后端：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// axios 请求处理
app.all('/axios-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*')
  //创建一个返回的数据
  const data = { name: 'ymj' }
  let str = JSON.stringify(data)
  response.send(str);
  // response.send('Hello axios AJAX');
});

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

六、使用fetch发送AJAX请求

前端示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

express模拟后端：

// fetch 请求处理
app.all('/fetch-server', (request, response) => {
  //设置响应头  设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*')
  //创建一个返回的数据
  const data = { name: 'ymj' }
  let str = JSON.stringify(data)
  response.send(str);
  // response.send('Hello axios AJAX');
});

七、跨域问题

1、同源策略概念

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源： 协议、域名、端口号 必须完全相同。

违背同源策略就是跨域。

2、如何解决跨域？

① 使用 JSONP

1) JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明

才智开发出来，只支持 get 请求。

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。

JSONP 就是利用 script 标签的跨域能力来发送请求的。

3) JSONP 的使用

1.动态的创建一个 script 标签

var script = document.createElement("script")

2.设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
    alert(data.name); 
};

3.将 script 添加到 body 中

document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) { 
    console.log("收到请求"); 
    var callback = req.query.callback; 
    var obj = { 
        name:"孙悟空", 
        age:18 
    }
    res.send(callback+"("+JSON.stringify(obj)+")"); 
});

模拟页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            const x = new XMLHttpRequest();
            //这里因为是满足同源策略的, 所以 url 可以简写
            x.open("GET",'/data');
            //发送
            x.send();
            //
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>
</html>

模拟后台代码：

const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

jQuery 中的 JSONP

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body> <button id="btn">按钮</button>
  <ul id="list"></ul>
  <script type="text/javascript" src="./jquery-1.12.3.js"></script>
  <script type="text/javascript"> window.onload = function () {
      var btn = document.getElementById('btn') btn.onclick = function () {
        $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?", function (data) {
          console.log(data); //获取所有的电影的条目 var subjects = data.subjects; //遍历电影条目
          for (var i = 0; i < subjects.length; i++) {
            $("#list").append("<li>" + subjects[i].title + "<br />" + "<img src=\"" + subjects[i].images.large + "\" >" + "</li>");
          }
        });
      }
    } </script>
</body>

</html>

② 使用CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1) CORS 是什么？

​ CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2) CORS 怎么工作的？

​ CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

3) CORS 的使用

主要是服务器端的设置：

router.get("/testAJAX", function (req, res) {
    //通过 res 来设置响应头，来允许跨域请求 
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
    res.set("Access-Control-Allow-Origin", "*");
    res.send("testAJAX 返回的响应");
});
明金同学
关注
专栏目录
AJAX常见面试问题
04-25
AJAX常见面试问题 AJAX常见面试问题 AJAX常见面试问题 AJAX常见面试问题 AJAX常见面试问题
5002.Ajax从入门到精通
12-03
总结来说，"5002.Ajax从入门到精通"涵盖了Ajax的基础知识、应用场景、数据格式选择、以及解决跨域问题的方法。通过学习，开发者能够熟练运用Ajax提升Web应用的用户体验和性能。无论你是前端新手还是经验丰富的开发者...
ajax常见问题总结
showbo的专栏
07-02 1496
来源：http://www.w3dev.cn/article/20090702/ajax-summary-of-issues.aspx 在看文章前，先指定一个通用的变量xhr，xhr代码ajax对象。 测试浏览器：ie为ie6，firefox为2，其他的未测试。统称ie6为ie，firefox2为ff。 基本的 1，最经典的就是ie下的缓存问题了。 如果使用的是ge
FastAdmin后台开发框架 lang 任意文件读取漏洞复现
最新发布
luckly_move的博客
06-24 334
FastAdmin后台开发框架 lang 任意文件读取漏洞复现
使用jQuery Ajax功能的时候需要注意的一个问题
weixin_30500289的博客
05-25 111
最近发现jQuery越来越火，用它的人也越来越多。jQuery最强大的亮点莫过于它的CSS3 selector和极其简单的Ajax请求调用。最近一哥们在做一个Ajax长连接的项目，页面需要和服务器保持长连接，而且在连接超时后需要重新请求连接，过程中他问我要用到什么，我也是想都没想就告诉他用jQuery。jQuery不是有ajaxSuccessajaxError这些对象吗，在请求完成或者请求失...
ajax常见问题
u014207158的博客
09-27 435
这里主要记录用ajax时遇到的问题。
使用Ajax技术可能面临的一些问题
碧荷故乡_胡奇的专栏
06-23 1242
Ajax确实能给客户甚至开发者带来很棒的体验，但在某些情况下，Ajax所表现出来的特性很可能成为了它的弱点、甚至缺陷。那么，谈谈使用Ajax技术可能面临的一些问题：XMLHttpRequest 的可用性Ajax 开发人员面临的一个最大问题是：在没有XMLHttpRequest 可用时该如何响应？虽然主要的现代浏览器都支持XMLHttpRequest，但仍然有少数用户的浏览器不支持，或者
《ajax入门经典》源代码
11-18
**Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...
AjaxJquery入门
01-11
**Ajax和jQuery简介** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。...通过深入学习《AjaxJquery入门》，你将能够熟练地运用这些技术来提升你的Web开发技能。
Ajax 入门精通 Ajax 入门精通
01-10
本文将深入探讨Ajax的基础知识，包括其原理、工作流程、应用实例以及常见问题。 1. **Ajax 原理** - **异步通信**：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器交换数据，而不会干扰用户与...
Ajax从入门到精通课件
03-22
本课程“Ajax从入门到精通”旨在帮助初学者快速掌握Ajax的核心概念和技术，通过1-19章节的PPT讲解，结合丰富的实例代码，使学习者深入理解并熟练运用Ajax。 首先，我们要了解Ajax的工作原理。它利用JavaScript创建...
ajax post提交数据_Ajax使用中的常见问题
weixin_39963744的博客
11-22 415
阅读本文约需要5分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了快速上手Ajax的知识，今天跟大家分享下Ajax常见问题的知识。0 前言ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层ajax实现。简单易用的高层实现见 $.get, $.post 等。$.ajax()返回其创建...
Ajax问题集锦
weixin_48610566的博客
08-21 221
面试系列
Ajax常见问题
m0_46680765的博客
07-05 2476
Ajax常见问题 5.1.https和http区别 一、HTTP和HTTPS的基本概念 HTTP：一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,减少网络传输,使浏览器更加高效。 HTTPS： 以安全为目标的HTTP通道,是HTTP的安全版,HTTP下加入SSL层,加密的详细内容就需要SSL。 HTTPS协议主要分为两种：一种是建立一个信息安全通道,保证数据传输的安全;另一种是确认网站的真实性。 二、HTTP和HTTPS有什么区别 HTTP协议传输的数据都
ajax的常见问题
weixin_56548455的博客
06-09 137
http是一种无状态的网络协议响应行参考： 点一下响应码大全ajax是一项综合技术，全程Async Javascipt And Xml 异步的javascipt 和 xml 核心是使用XML HttpRereust与服务器异步交换数据，通过js动态操作dom实现页面无刷新更新视图javascipt默认是从上向下执行代码，上一行执行完才会执行下一行，称为同步异步执行代码，实现方式：优点缺点 post请求 JQuery中的ajax .load 方法 语法 解释 把url的内容通过 ajax加载到 el内部
Ajax常见问题整理
从零开始
04-08 1109
jquery里的缓存问题如何解决？AJAX面试题 如果直接用jQuery里的$.ajax()方法的话，去除缓存很简单，只需要配置一下缓存属性cache为false，但如果想要简单写法getJSON()，去除缓存就不能通过配置来解决了。因为getJSON根本没有这个缓存属性让你来配置。因为如果其调用的地址URL和之前的一样的话，回调函数会直接在缓存里面读取数据，而不是进后台调用相应的方法。 解决
使用Ajax常犯的10个错误
RainyLin-SunnyLin的专栏
08-16 981
上个月我发现许多Web2.0网站大量运用了ajax，但是其中有些很奇怪，因为他们的速度比起前慢了，并且有时候不起作用（在移动设备上），我总结了十条用Ajax的错误（平台无关）1、 不要通过把整个页面都放在UpdatePanel中更新整个页面。在你运行网页时需要节省时间，不要更新那些可以用javascript and DHTML (DOM)的部分。2、 要始终记得有这么几种访问者，他们不能用Java
Ajax常见问题汇总
javazhuanzai的专栏
02-01 274
====================================================== 注：本文源代码点此下载 ====================================================== 公告 昵称:林声歌 园龄:3年3个月 粉丝:0 关注:0 2012年1月 > 日一二三四五六 25 26 27 28
ajax常见问题（部分）
weixin_30394669的博客
05-20 79
ajax常见问题 1、 ajax缓存问题 给服务器端加上header消息头 让浏览器不缓存： header(“Cache-Control: must-revalidate”); 2、 乱码 尽量要让js和html编码一致 注意：当前后代码都一致为GBK的时候，发送请求时还是有可能出现乱码，之歌时候就需要加上一个header(“Content-Type:text/...
AJAX入门指南：打造现代Web应用
5. 学习使用JavaScript库，如jQuery，它们提供了方便的API来简化AJAX操作和其他常见的Web开发任务。 通过不断地实践和学习，新手可以逐渐克服学习曲线的陡峭，最终成为一名熟练的AJAX开发者，创造出更加先进、用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明金同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值