前端学习--Ajax部分

已于 2024-02-04 12:32:50 修改
阅读量383 收藏 9
点赞数 10
文章标签： 前端 学习 ajax
于 2024-01-12 16:08:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43423833/article/details/135555493
版权

文章目录

前端学习–Ajax部分

1.ajax简介

  1. ajax的全名是Asynchronous JavaScript And XML，就是异步的js和XML。

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

  3. 我们可以通过ajax在浏览器中向服务器发送异步请求，它最大的优势是无刷新获取数据。

  4. ajax在网页中的实际应用，例如：网页搜索下拉框中的联想搜索内容。

2.XML简介

  1. XML是可扩展标记语言。

  2. 它被设计用来传输和存储数据。

  3. XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，来表示一些数据。

  4. 现在被json取代了

3.ajax特点

  1. 优点

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

  • 允许根据用户事件来更新部分页面内容

    注：这里的用户事件指的是鼠标事件、键盘事件等。

  1. 缺点
  • 没有浏览历史，不能回退
  • 存在跨域问题（同源）
  • SEO（搜索引擎优化）不友好（爬取数据）

4.HTTP协议

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

  1. 请求报文（此处重点讲解的是格式与参数）

    行	POST（或者写get） /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 
	 注：如果是get请求，请求体是空的

  2. 响应报文

    行    HTTP/1.1  200  OK
头    Content-Type:text/html;charset=utf-8
      Content-length:2048
      Content-encoding:gzip 
空行   
体     <html>
			<head>
   			</head>
   			<body>
   					<h1>xxx</h1>
   			</body>
	   </html> 
响应状态码有：404 403 401 500 200
常见的响应状态码：
    200 OK 请求成功。一般用于GET 与POST 请求。
    201 Created 已创建。成功请求并创建了新的资源。
    401 Unauthorized 未授权/请求要求用户的身份认证。
    404 Not Found 服务器无法根据客户端的请求找到资源。
    500 Internal Server Error 服务器内部错误，无法完成请求。
注：空格是必须有的。

5.查看通信报文

在谷歌浏览器中按F12键点击Network进行查看。

重点看Header和Response ，在header中重点看Response headers 和Request headers。在Query String Parameter看参数，以后经常使用。

响应看Response headers 和 Response 。

请求看Request headers 和 From Data。

6.Node.js的安装

请您务必以及肯定要将它安装到C盘默认路径下。

7.express框架

它是基于Node.js的框架 。

具体操作步骤：

  1. 需要在vs终端中输入npm init --yes安装npm

  2. 输入npm i express安装express。

  3. 输入node 文件名运行程序。

  4. 在浏览器中输入http://127.0.0.1:8000/查看运行结果。

  5. 在vs终端输入Ctrl+c结束此次运行，释放端口。

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

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

// 3.创建理由
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/', (request, response) => {
  // 设置响应
  response.send('Hello express')
})

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

8.通过原生js进行AJax操作

前言

不同类型的请求及其作用：
    1.GET: 从服务器端读取数据（查）
    2.POST: 向服务器端添加新数据 （增）
    3.PUT: 更新服务器端已经数据 （改）
    4.DELETE: 删除服务器端数据 （删）

8.1get请求

由于设置的是/server，所以在查看server.js运行结果，要在浏览器中输入http://127.0.0.1:8000/server。

<!-- GET.html文件 GET请求 -->
<!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 pink;
    }
  </style>
</head>

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

    const btn = document.querySelector("button");
    const result = document.getElementById("result");

    btn.onclick = function () {
      //1.创建对象 
      // 看到xhr要想到是Ajax
      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 对象中的属性
      //change 改变

      /* readyState的表示状态：
            0 表示未初始化  
            1 表示open方法调用完毕 
            2 表示send方法已经调用完毕 
            3 表示服务端返回部分结果 
            4 表示服务端返回了所有结果 */
      xhr.onreadystatechange = function () {
        //判断
        if (xhr.readyState == 4) {
          //判断响应状态码 200 404 403 401 500
          //200到300（不包含300）的状态码都表示成功
          if (xhr.status >= 200 && xhr.status < 300) {
            //处理结果 行 头 空行 体
            //1.响应行
            console.log(xhr.status); //状态码
            console.log(xhr.statusText); //状态字符串
            console.log(xhr.getAllResponseHeaders()); //所有响应头
            console.log(xhr.response); //响应体

            // 设置div文本
            result.innerHTML = xhr.response;
          }
        }
      }
    }
  </script>
</body>

</html>

// server.js文件
// server.js文件发生改动，要在终端重新运行

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

app.get('/server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send('Hello Ajax');
  //1.send方法内部会检测响应内容的类型
  //2.send方法会自动设置http状态码
  //3.send方法会自动设置响应的内容类型及编码
});
//监听端口
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中。。。")
})

8.2post请求

此部分包含设置自定义请求头。

<!-- POST.html文件 -->
<!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 pink;
    }
  </style>
</head>

<body>
  <!-- <button>点击发送请求</button> -->
  <div id="result"></div>
  <script>
    // 获取元素对象
    const result = document.getElementById("result");
    // 绑定事件
    result.addEventListener('mouseover', function () {
      // 1.创建对象
      const xhr = new XMLHttpRequest()
      // 2.初始化 设置类型与URL
      xhr.open('POST', 'http://127.0.0.1:8000/server')
      // 设置请求头
      // Content-type：设置请求体内容的类型
      // application/x-www-form-urlencoded：设置参数查询字符串的固定类型
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
      // 设置自定义请求头
      xhr.setRequestHeader('name', 'School')
      // 3.发送  post设置请求体
      xhr.send('a=100&b=200&c=300') //虽然写什么都可，但是常用这种写法。
      // xhr.send('a:100&b:200&c:300')
      // 4.事件绑定
      xhr.onreadystatechange = function () {
        //判断
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      }
    })

  </script>
</body>

</html>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

//把get改为all，可以接收任意类型的请求
app.all('/server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应头，所有类型的响应头都可以接受（支持自定义请求头）
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置响应体
  response.send('Hello Ajax Post');
  //1.send方法内部会检测响应内容的类型
  //2.send方法会自动设置http状态码
  //3.send方法会自动设置响应的内容类型及编码
});
app.post('/server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send('Hello Ajax Post');
});
//监听端口
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中。。。")
})

8.3服务端响应JSON数据

先了解一下JSON的两种方法：

  • 将对象转化为JSON字符串：JSON.stringify()
  • 将JSON字符串转化为对象：JSON.parse()
<!-- JSON.html文件 -->
<!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 pink;
    }
  </style>
</head>

<body>
  <!-- <button>点击发送请求</button> -->
  <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>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

// 由于在此处设置是/server，所以在查看的时候要输入在浏览器中输入http://127.0.0.1:8000/server
//把get改为all，可以接收任意类型的请求
app.all('/server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应头，所有类型的响应头都可以接受（支持自定义请求头）
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置响应体
  response.send('Hello Ajax Post');
  //1.send方法内部会检测响应内容的类型
  //2.send方法会自动设置http状态码
  //3.send方法会自动设置响应的内容类型及编码
});

app.all('/json-server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应头，所有类型的响应头都可以接受（支持自定义请求头）
  response.setHeader('Access-Control-Allow-Headers', '*')
  //响应一个数据
  const data = {
    name: 'shenyang'
  }
  //将对象进行字符串转换
  let str = JSON.stringify(data)
  // 设置响应体
  response.send(str);

});

app.post('/server', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send('Hello Ajax Post');
});
//监听端口
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中。。。")
})

8.4nodemon自动重启工具

安装这个工具之后，我们只需保存server.js文件，服务端就可以有相应的更新，不用像之前那样有些许改动server.js文件内容就需重启。

使用步骤：

  1. 在vs终端输入npm uninstall -g nodemon进行全局安装。

  2. 在终端输入nodemon server.js运行程序（大概率出现报错）。

    解决方法：

    • 输入npx nodemon server.js运行程序（我是运行这个成功的）

    • 输入nodemon.cmd server.js运行程序

      注：二选一输入解决方法中的代码即可，一个没成功试试另一个。

成功运行效果图展示：

在这里插入图片描述

8.5IE浏览器缓存问题

在实际学习中最好用谷歌浏览器，IE浏览器方方面面都在搞特殊。此部分了解即可。

在这里插入图片描述

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

测试网络异常问题的效果时，要把浏览器的网络状态调成离线。

在这里插入图片描述

8.7手动取消请求

利用abort方法，该方法的作用是当程序出现关键错误或异常情况时,可以使用abort方法中止程序的继续执行。

在这里插入图片描述

8.8解决重复请求问题

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

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

<body>
  <button>点击发送请求</button>
</body>
<script>

  const btn = document.querySelector("button");
  let x = null
  // 标识变量
  let isSending = false//是否正在发送ajax请求

  btn.onclick = function () {

    while (!isSending) {
      x = new XMLHttpRequest()
      isSending = true
      x.open('GET', 'http://127.0.0.1:8000/delay')
      x.send()
      x.onreadystatechange = function () {
        if (x.readyState === 4) {
          return alert('请勿重复请求')
        }
      }
    }
  }
</script>

</html>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();
app.get('/delay', (request, response) => {
  //设置响应头，设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  setTimeout(() => {
    // 设置响应体
    response.send('Hello Ajax');
  }, 3000);
});
//监听端口
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中。。。")
})

9.通过jQuery进行AJAX操作

get请求：$get(url,data,callback,type)

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 http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 最好是自己下载 -->
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <button class="btn btn-primary">GET</button>
  <button class="btn btn-danger">POST</button>
  <button class="btn btn-info">通用方法ajax</button>
  <script>
    $('button').eq(0).click(() => {
      // 1、get方法
      $.get('http://localhost:8000/jQ-server', {
        a: 100,
        b: 200
      }, data => {
        //参数data是响应体 
        console.log(data);
      }, 'json')
    })
    $('button').eq(1).click(() => {
      // 2、post方法
      $.post('http://localhost:8000/jQ-server', {
        a: 100,
        b: 200
      }, data => {
        //参数data是响应体 
        console.log(data);
      })
    })
  </script>
</body>

</html>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

//jQuery服务
app.all('/jQ-server', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  const data = {
    name: 'tom',
    age: 5
  }
  res.send(JSON.stringify(data));
  // res.send(data);

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

10.通过axios进行AJAX操作

下载axios：

  1. 进入GitHub网站：https://github.com/axios/axios
  2. 直接下载压缩包：在这里插入图片描述
  3. 在dist文件夹中找到需要的对应文件。我自己使用的是axios.min.js文件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/axios.min.js"></script>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
  <button class="btn btn-primary">GET</button>
  <button class="btn btn-danger">POST</button>
  <button class="btn btn-info">AJAX</button>
</body>
<script>
  const btn = document.querySelectorAll('button');
  //配置baseURL 作用：下面不用重复写网址
  axios.defaults.baseURL = "http://localhost:8000";
  btn[0].onclick = function () {
    //get请求
    axios.get('/axios-server', {
      //url参数
      params: {
        id: 100,
        vip: 7
      },
      Headers: {
        name: "at",
        age: 20
      }
    }).then(value => {
      console.log(value);
    })
  }

  btn[1].onclick = function () {
    //post请求 请求体和请求头可以一起设置 很方便
    //post请求
    axios.post('/axios-server', {
      // 请求体
      user: "admin",
      password: "admin"
    }, {
      //url参数
      params: {
        id: 100,
        vip: 7
      },
      // 请求头
      Headers: {
        name: "at",
        age: 20
      }
    }).then(value => {
      console.log(value);
    })
  }

  btn[2].onclick = function () {
    axios({
      //请求方法 默认是get
      method: 'POST',
      //url
      url: '/axios-server',
      //url参数
      params: {
        vip: 10,
        level: 30
      },
      //头信息
      headers: {
        a: 100,
        b: 200
      },
      //请求体参数
      data: {
        user: 'admin',
        pass: 'admin'
      }
    }).then(res => {
      // console.log(res)
      // 响应状态码
      console.log(res.status)
      // 响应状态字符串
      console.log(res.statusText)
      // 响应头信息
      console.log(res.headers)
      // 响应体
      console.log(res.data)

    })
  }
</script>

</html>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

axios服务
app.all('/axios-server', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*')
  const data = {
    name: 'tom',
    age: 5
  }
  res.send(JSON.stringify(data));
  // res.send('Hello axios Ajax')

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

11.使用fetch()函数进行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">
  <title>Document</title>
</head>

<body>
  <button>AJAX</button>
  <script>
    const btn = document.querySelector("button");
    btn.onclick = function () {
      fetch('http://localhost:8000/fetch-server', {
        //请求方法
        method: 'POST',

        //url参数
        params: {
          vip: 10,
          level: 30
        },
        //头信息
        headers: {
          a: 100,
          b: 200
        },
        //请求体参数
        data: {
          user: 'admin',
          pass: 'admin'
        }
      }).then(value => {
        console.log(value);
      })
    }
  </script>
</body>

</html>

// server.js文件

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

//fetch服务
app.all('/fetch-server', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*')
  const data = {
    name: 'tom',
    age: 5
  }
  res.send(JSON.stringify(data));
  // res.send('Hello axios Ajax')

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

12.同源策略

什么是同源策略？

同源策略是浏览器的一种安全策略，它要求协议、域名、端口号完全相同，ajax请求默认遵循同源策略。

什么是跨域？

跨域（Cross-Origin）是指在Web开发中，当一个网页尝试从一个**不同域名（或者不同协议、不同端口）**的服务器请求资源时，会引发跨域问题，它违背同源策略。不过这是出于安全考虑的限制，以防止恶意网站访问其他网站的数据。

同源策略案例：

  1. 一定要保证html文件的名字为index.html，不然运行时识别不到文件。
  2. 一定要手动输入网址：http://127.0.0.1:9000/home，不要用vs生成。
<!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>
</head>

<body>
  <h1>首页</h1>
  <button>data</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 { request } = require('express');
const express = require('express');

const app = express();

app.get('/home', (request, response) => {
  //响应一个页面
  response.sendFile(__dirname + '/index.html');
});
app.all('/data', (request, response) => {
  response.send("用户数据");
});
app.listen(9000, () => {
  console.log("服务器启动成功");
});

13.解决跨域问题

13.1通过JSONP解决（不常用）

  • JSONP（JSON with Padding）是一个非官方的跨域解决方案，它只支持get请求。
  • JSONP的工作原理是，在网页中有一些标签天生具有跨域能力，比如：img link iframe script等。JSONP就是利用script标签的跨域能力来发送请求。
<!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>
</head>
<style>
  #result {
    width: 300px;
    height: 100px;
    border: solid 1px pink;
  }
</style>

<body>
  <div id="result"></div>
  <script>
    // 一定要提前声明响应函数
    function handle(data) {
      //获取result元素
      const result = document.getElementById('result');
      result.innerHTML = data.name;
    }
  </script>
  <!-- 通过script引入外部资源不受同源策略限制 -->
  <script src="http://127.0.0.1:8000/jsonp-server">
  </script>
</body>

</html>

const { request } = require('express');
const express = require('express');

const app = express();

app.all('/jsonp-server', (request, response) => {
  const data = {
    name: 'tom'
  };
  //将数据转化为json字符串
  let str = JSON.stringify(data);
  // 通过响应函数的调用来处理服务器端的数据
  // 函数的参数就是想给客户端的数据
  response.send(`handle(${str});`);

});
app.listen(8000, () => {
  console.log("服务器启动成功");
});

13.2通过CORS解决

CORS（Cross-Origin-Resource-Sharing），跨域资源共享。CORS是官方的跨域解决方案。

特点：不需要在客户端做任何特殊的操作，完全在服务器端中处理，支持get和post请求。跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

工作原理：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应放行。

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

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

<body>
  <button>发送请求</button>
  <div id="result"></div>
  <script>
    const btn = document.querySelector('button')

    btn.onclick = function () {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://127.0.0.1:8000/cors-server')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response)
            const result = document.getElementById('result')
            result.innerHTML = xhr.response
          }
        }
      }
    }
  </script>
</body>

</html>

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

app.all('/cors-server', (request, response) => {
  // 设置响应头 这就是CORS 星号表示所有网站都适配 
  // 这三个常用
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  response.setHeader('Access-Control-Allow-Method', '*')

  response.send('Hello CORS');
});
//监听端口
app.listen(8000, () => {
  console.log("服务已经启动，8000端口监听中。。。")
})

注：如果想知道更多响应头，请去https://developer.mozilla.org/zh-CN/。

AGW.
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端 ajax
05-17
web前端
前端学习之Ajax
qq_38652677的博客
11-03 315
就是接口的说明文档，是我们调用接口的一句。好的接口文档包含了对接口url,参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用以及接口如何进行调用。使用Ajax请求数据时，被请求的URL地址，就叫做数据接口，同时，每个接口必须有请求方式。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。客户端要请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为。上网的过程中，负责存放和对外提供资源的电脑，叫做服务器。上网过程中，负责获取和消费资源的电脑，叫做客户端。
【JAVA企业级开发】浅谈关于在WEB大前端已然降临的时代中,你是否还是在学习jsp、freemarker、velocity、themleaf等模板引擎么?
liuchunhang的博客
06-05 764
一在java领域，表现层技术主要有四种：jsp、freemarker、velocity,themleaf 1jsp是大家最熟悉的技术 优点： 1、功能强大，可以写java代码 2、支持jsp标签（jsp tag） 3、支持表达式语言（el） 4、官方标准，用户群广，丰富的第三方jsp标签库 5、性能良好。jsp编译成class文件执行，有很好的性能表现 缺点： jsp没有明显缺点，非要挑点骨头那就是，由于可以编写java代码，如使用不当容易破坏mvc结构。 2velocity是较早出现的用于代替jsp的模板
ajex请求后台报错400，但是后台返回给前端值，并且在前端弹出
静风落叶的博客
11-09 1764
        今天遇到一个问题，当前端请求我的后是时候，当请求报错的时候，后台报错400，但是我的后台同时返回的是有个数据的，后台返回到前端的数据，         前端接收数据并显示 最后在err函数里面讲信息打印出来...
【Web前端】Ajax超详解
将冲破艾迪i的博客
04-22 1948
本文共计两万四千字，详细的介绍了前后端交互的内容，以及Ajax的实现方式，包括XHR、Fetch和Axios。
什么是Ajax, Ajax工作原理讲解（史上最全）
wuxiaopengnihao1的博客
09-07 1822
本文章向大家介绍什么是Ajax？全面了解？，主要内容包括1.什么是Ajax？、2.Ajex的优点、3.Ajax工作原理、4.基本语法、5.数据编码格式、6.ajax携带文件数据、7.回调函数、基本概念、基础应用、原理机制和需要注意的事项等，并结合实例形式分析了其使用技巧，希望通过本文能帮助到大家理解应用这部分内容。
前端进阶 - 认识和使用Ajax
zhqi9277的博客
05-09 813
异步 JavaScript 和 XML，或 Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。尽管ajax中x代表的是xml，但是由于json优越的综合性能，更多的时候我们经常用的是jsonXMLHttpRequest 对象的 responseType 属性可以被设置来改变服务器的预期响应类型。
前端学习之ajax
weixin_53105591的博客
07-20 394
学习前端之ajax
Ajax知识点及前端发送请求
weixin_43850458的博客
06-10 353
前端发送请求和后端进行数据交互的几种方法介绍。
前端必看之AJAX功能原理详解篇
洛阳泰山的博客
08-08 4871
AJAX AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。 它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户 体验。 一．Ajax概述 Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是...
前端的ajax你知多少？ajax完全指南奉上
奇想派
09-27 1987
异步 JavaScript 和 XML（）是一种与服务器交换数据并更新网页的某些部分的技术，而无需重新加载整个网页。换句话说，允许通过与幕后服务器交换少量数据来异步更新网页。如果应用未使用 AJAX，则必须在用户提出的每个请求上重新加载网页。在本面向初学者的ajax 教程中，我将介绍在开发基于 ajax 的应用之前，您应该了解的所有基本和重要事实，以充分利用 ajax 的功能。
02-妙味机构前端视频教程
07-22
妙味原创js视频教程资源目录：00：2015WEB前端开发学习方法简介（零基础必看）01：html css基础部分02：javaｓｃｒｉｐｔ初级03：javaｓｃｒｉｐｔ中级04：javaｓｃｒｉｐｔ高级（面向对象，正则……）05：AJax课程...
Ajax-MicroServicesPython.zip
09-17
Ajax-MicroServicesPython.zip,使用flask、python和前端react ajax学习api设计的演示项目。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中...
Ajax-webAppNotes.zip
09-17
Ajax-webAppNotes.zip,系统学习网络前端过程,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
Ajax-Web-NoteBook.zip
09-17
Ajax-Web-NoteBook.zip,前端各种学习笔记杂烩,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
毕设前端部分毕设前端部分.rar
06-26
第一，HTML HTML是超文本标记语言，是前端页面的基础语言，用于创建网页...同时，JavaScript可以处理表单验证、动画效果、浏览器事件、AJAX请求等问题，提高用户体验。因此，JavaScript是前端开发的不可或缺的技能。
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 476
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 630
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 678
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
Ajax学习笔记pink老师
07-29
对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值