前端学习--Ajax部分

已于 2024-02-04 12:32:50 修改
阅读量443 收藏 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.
关注
前端篇—ajax
wolf的博客
10-16 597
文章目录前言 前言 什么是ajax？ AJAX（Asynchronous JavaScript and XML）：异步的 JavaScript 和 XML，即使用Javascript语言与服务器进行异步交互。 ajax还有一个最大的特点：当服务器响应时，不用刷新整个浏览器页面，而可以局部刷新。 与服务器异步交互 浏览器页面局部刷新 优缺点 优点： 使用js技术向服务器发送异步...
前端之AJAX
weixin_34364071的博客
07-03 239
JSON 是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象； json字符串就是js对象的一种表现形式(字符串的形式) var person = {"name":"alex", "sex":"men", "teacher":{ "name":"tiechui"
Ajax前端
weixin_45567738的博客
02-25 217
Ajax AJAX =Asynchronous JavaScript and XML （异步的JavaScript和XML） AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 AJAX不是一种新的语言，而是一种用于创建更好以及交互性更强的web应用程序的技术 传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务进行少量的数据交换，就可以实现局部异步更新。 使用ajax，用户可以创建接近本地桌面应用的直
前端Ajax
qq_36764457的博客
07-29 376
一、什么是Ajax Ajax(Asynchronous JavaScript And XML)异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术，能够向服务器请求额外的数据而无须卸载页面，对网页的某部分进行更新。Ajax不是一种新的编程语言，而是用于创建更快及交互性更强的web应用程序的技术。 二、XMLHttpRequest（Ajax技术的核心，简称XHR） 这是微软...
前端的Ajax
weixin_44279647的博客
07-27 378
.特点 局部刷新 异步访问 Ajax说明 说明: Ajax是实现前后端交互,最为常用的一种方式. 发展: 1. 原生的JS中包含了Ajax. 但是操作比较复杂. 20行左右 2. jQuery是JS的一种高级函数类库. 3. jQuery提供了一种高效的Ajax的请求的方式. 展望: 现阶段所使用的Ajax是由jQuery进行的动态的封装.,如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求. Ajax异步调用原理 同步: 用户发起请求时,要求第一时间服务器做出响应.在此期.
前端学习-ajax
weixin_45003922的博客
10-15 82
ajax的核心就是浏览器内置的XMLHttpRequest对象，用于向服务器发送请求获取数据。 1.XMLHttpRequest的属性： readyState: XMLHttpRequest对象目前的状态 status: 响应状态码 onreadystatechange:用于XMLHttpRequest对象状态改变调用函数 responseText：字符串形式的响应数据 responseXML：XML格式的响应数据 2.XMLHttpRequest的方法： open()：规定请求，参数有：method
【前端学习】ajax
SDUzzy的博客
07-26 150
基础 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。 一、发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); （感觉可以封装一个同步ajax库） 1、open与send方法 GET 还是
前端项目-fdaciuk-ajax.zip
09-02
【前端项目-fdaciuk-ajax.zip】是一个包含Ajax模块的前端项目，主要使用纯JavaScript（Vanilla JS）实现。在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个...
前端项目-jquery-ajax-localstorage-cache.zip
09-03
在前端开发中，数据的获取和管理是至关重要的部分，特别是在构建交互性强、用户体验良好的Web应用时。"前端项目-jquery-ajax-localstorage-cache"是一个基于jQuery的实践项目，旨在利用Ajax技术来获取服务器数据，并...
第34章 项目1-博客前端：封装库--引入Ajax1
08-03
在本章的学习中，我们将探讨如何在前端项目中封装并引入Ajax技术，以优化与服务器的交互，提高用户体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下更新...
攀枝花学院html-css-js-jQuery-ajax 前端实验
最新发布
07-13
在IT行业中，前端开发是构建Web应用程序不可或缺的一部分。攀枝花学院提供的这个“html-css-js-jQuery-ajax 前端实验”课程显然旨在教授学生掌握这些核心技术，以便创建交互式的网页和应用程序。以下是对这些技术的...
前端开源库-pouchdb-ajax
08-29
"pouchdb-ajax"是PouchDB库中的一个关键组成部分，它负责处理与服务器之间的通信。在PouchDB中，`ajax()`方法提供了自定义HTTP请求的能力，允许开发者在与CouchDB或其他支持CouchDB API的服务器交互时进行更精细的...
前端之 AJAX
fenglepeng的博客
08-06 357
AJAX参数详细列表 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。 type String (默认: "GET") 请求方式 ("POST" 、 "GET")。注意：其它 HTTP 请求方法，如 PUT 和 DELETE ，但仅部分浏览器支持。 timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 async Boolean (默认: true) 默认设置下，所有请求
前端-AJAX
a592381841的博客
12-18 380
AJAX（asynchronous JavaScript and xml） 服务器给客户端的响应一般是整 Ajax 工作原理： 相当于在用户和服务器·之间加上一个中间层，使得服务器和用户操作响应异步化，只有确认要从服务器得到新数据时！才由ajax引擎代服务器提交请求，响应后返回xml格式。再由ajax解析后交给浏览器。 （旧的交互式，每次返回请求都会返回整个html页面，而ajax只...
前端ajax
前端学习博客
01-11 1733
文章目录1.基本使用2.Get方式3.post方式4.解决ie缓存问题5.请求超时与网络异常6.取消请求7.重复请求问题 1.基本使用 1、XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。 2、ajax请求状态:xhr.readyState 0：请求未初始化，还没有调用 open()。 ​ 1：请求已经建立，但是还没有发送，还没有调用 send()。 ​ 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 ​ 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
十分钟带你了解Ajax
qq_42779387的博客
11-17 186
[autonomic learning] Ajax def(定义):客户端与服务器端异步的通信的技术 原理: 第一步：创建XMLHttpRequest 对象,xmlhttp=new XMLHttpRequest();（它有兼容性问题，在IE中用的是new ActiveXObject） 第二步：向服务器发送请求(GET/POST) xmlhttp.open('POST',url,tr...
前端之ajax
YeChao3的博客
09-27 171
ajax:阿加客思，前端后端交互 异步javascript和xml 两种键值对的数据格式:xml和json：webxml和聚合数据 xml html变形 xml:用户自定义的文档标签        &lt;book&gt;                        &lt;author&gt;三牧&lt;/author&gt;                        &lt...
前端学习之ajax
weixin_53105591的博客
07-20 499
学习前端之ajax
前端学习之Ajax
keep hungry keep foolish
08-21 321
原生Ajax 文章目录原生Ajax1.概念2.Ajax的工作原理3.创建 XMLHttpRequest 对象4.向服务器发送请求5.服务器响应6.onreadystatechange 事件7.实例： 1.概念 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 在这里提出一个概念：同步和异步 同步：例如当你提交一个表单时，会将前台获取的信息字符串的形式传...
前端学习---使用原生AJAX从本地txt文件中获取数据
HHH_LLL的博客
04-17 4041
进入正题 先给各位看一下我的整体结构：data和js文件夹下分别存放着index.txt待读取文本和编写了ajax的index.js文件 index.txt文本里的内容： HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值