菜单 搜索
首页 前端知识 Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS

Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS

2024-05-05 12:05:37 前端知识 前端哥 499 807 我要收藏

目录

一、jQuery 中的 AJAX

1.引进jQuery文件资源

二、get 请求

三、post 请求

四、AJAX-jQuery通用方法发送AJAX请求：

五、安装axios

六、axios发送AJAX请求（重点）

七、fetch发送AJAX请求

八、同源策略

九、JSONP

1.原生jsonp

2.jQuery发送jsonp请求

十、CORS

一、jQuery 中的 AJAX

1.引进jQuery文件资源

百度搜索bootcdn,再搜索jquery,复制一下标签，放置到<head></head>

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

crossorigin="anonymous"     这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的cookie

二、get 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

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

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

 

get请求：

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

三、post 请求

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

url:请求的 URL 地址。

data:请求携带的参数。

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

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

 

post请求：

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

Server.js

//jQuery 服务
app.all('/jquery-server', (request, response) => {
  //设置响应头
  response.setHeader('Access-Control-Allow-Origin', '*')
  //设置响应体
  // response.send('Hello jQuery AJAX')
  const data = { name: '尚硅谷' }
  response.send(JSON.stringify(data))
})

四、AJAX-jQuery通用方法发送AJAX请求：

$('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
            }
          })
        })

/jQuery 服务
app.all('/jquery-server', (request, response) => {
  //设置响应头
  response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  //设置响应体
  // response.send('Hello jQuery AJAX')
  const data = { name: '尚硅谷' }
  response.send(JSON.stringify(data))
})

五、安装axios

1.方法一：速度慢

npm installaxios -g

2.方法二：速度快

cnpm installaxios -g

参数说明：

-g：表示全局安装，将会安装在你配置的：C:\Users\XinLiu\nodejs\node_global目录下。如果不指定则为当前文件夹所在目录（局部）；

3.无需安装，直接使用cdn

<scriptsrc="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

 

六、axios发送AJAX请求（重点）

先配置服务端

//axios 服务
app.all('/axios-server', (request, response) => {
  //设置响应头
  response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  //设置响应体
  // response.send('Hello jQuery AJAX')
  const data = { name: '尚硅谷' }
  response.send(JSON.stringify(data))
})

三个按钮

<button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

各种请求：

<script>
      const btns = document.querySelectorAll('button')
      //配置 baseURL
      axios.defaults.baseURL = 'http://127.0.0.1:8000'
      //GET 请求
      btns[0].onclick = function () {
        //GET请求
        axios
          .get('/axios-server', {
            //url 参数
            params: {
              id: 100,
              vio: 7
            },
            //请求头信息
            headers: {
              name: 'atguigu',
              age: 20
            }
          })
          .then((value) => {
            console.log(value)
          })
      }

      //POST 请求
      btns[1].onclick = function () {
        axios.post(
          '/axios-server',
          {
            //第二个参数对象里面写请求体
            username: 'admin',
            password: 'admin'
          },
          {
            //第三个参数对象里写url参数和其他信息
            //url 参数
            params: {
              id: 200,
              vip: 9
            },
            //请求头参数
            headers: {
              height: 180,
              weight: 180
            }
          }
        )
      }

      //通用请求
      btns[2].onclick = function () {
        axios({
          //请求方法
          method: 'POST',
          //url
          url: '/axios-server',
          //url 参数
          params: {
            vip: 10,
            level: 30
          },
          //头信息
          headers: {
            zcx: 100,
            age: 18
          },
          // 请求体参数
          data: {
            username: 'admin',
            password: 'admin'
          }
        }).then((response) => {
          console.log(response)
          //响应状态码
          console.log(response.status)
          //响应状态字符串
          console.log(response.statusText)
          //响应头信息
          console.log(response.headers)
        })
      }
    </script>

七、fetch发送AJAX请求

服务端

//fetch 服务
app.all('/fetch-server', (request, response) => {
  //设置响应头
  response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  //设置响应体
  // response.send('Hello jQuery AJAX')
  const data = { name: '尚硅谷' }
  response.send(JSON.stringify(data))
})

 <script>
      const btn = document.querySelector('button')
      btn.onclick = function () {
        fetch('http://127.0.0.1:8000/fetch-server?zcx=18', {
          //请求方法
          method: 'POST',
          //请求头
          headers: {
            name: 'atguigu'
          },
          //请求体
          body: 'username=admin&password=admin'
        })
          .then((response) => {
            return response.json() //把json字符串转换为js对象
          })
          .then((response) => {
            // 第二个then处理上一个返回的正确结果
            console.log(response)
          })
      }
    </script>

八、同源策略

同源： 协议、域名、端口号 必须完全相同，有一个不一样就是跨域。AJAX默认遵循同源策略

违背同源策略就是跨域。

 

服务端

//1. 引入express
const express = require('express')
//2. 创建应用对象
const app = express()
//3. 创建路由规则
// resquest 是对请求报文的封装
// response 是对响应报文的封装
app.get('/home', (request, response) => {
  //响应一个页面
  //从home进来后，响应一个页面
  response.sendFile(__dirname + '\\index.html') //拼接的是路径不要加点
})
app.get('/data', (request, response) => {
  response.send('用户数据')
})
//4. 监听端口启动服务
app.listen(9000, () => {
  console.log('服务器已启动...')
})

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

九、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)+")");

});

 

 

原理实现

不是很懂，一脸懵逼呀，我的宝。

 

服务端

//jsonp服务
app.all('/jsonp-server', (request, response) => {
  // response.send('console.log("hello jsonp-server");')
  const data = {
    name: '斯蒂芬库里'
  }
  //将数据转化为字符串
  let str = JSON.stringify(data)
  //返回结果
  response.end(`handle(${str})`)
})

实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据

<script>
      // 处理数据
      function handle(data) {
        //获取 result 元素
        const result = document.getElementById('result')
        result.innerHTML = data.name
      }
    </script>
    <script src="http://127.0.0.1:8000/jsonp-server"></script>

1.原生jsonp

服务端

//jsonp服务
app.all('/check-username', (request, response) => {
  const data = {
    exist: 1,
    msg: '用户名已经存在'
  }
  //将数据转化为字符串
  let str = JSON.stringify(data)
  //返回结果
  response.end(`handle(${str})`)
})

<body>
    用户名：<input type="text" id="username" />
    <p></p>
    <script>
      // 获取 input 元素
      const input = document.querySelector('input')
      const p = document.querySelector('p')
      //声明 handle 函数
      function handle(data) {
        input.style.border = 'solid 1px #f00'
        // 修改 p 标签的提示文本
        p.innerHTML = data.msg
      }
      //绑定事件
      input.onblur = function () {
        //获取用户的输入值
        let username = this.value
        //向服务器发送请求  检查用户名是否存在
        //1.创建 script标签
        const script = document.createElement('script')
        //2.设置标签的 src 属性
        script.src = 'http://127.0.0.1:8000/check-username'
        //3. 将 script 插入到文档中  把scripy插入到body标签最后
        document.body.appendChild(script)
      }
    </script>
  </body>

2.jQuery发送jsonp请求

先到bootcdn.cn把jQuery的标签复制过来

 

服务端

//jsonp服务
app.all('/jquery-jsonp-server', (request, response) => {
  //响应一个数据
  const data = {
    name: '史蒂芬库里',
    honour: ['MVP', 'FMVP', '历史三分王']
  }
  //将数据转化为字符串
  let str = JSON.stringify(data)
  //接收 callback 参数
  let cb = request.query.callback
  //返回结果 这个是callback就相当于是个函数名，相当于handle
  response.end(`${cb}(${str})`)
})
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result"></div>
    <script>
      $('button')
        .eq(0)
        .click(function () {
          //使用jquery发送jsonp请求时url后面要加参数callback=?，这是一个固定写法
          //Jquery中的getJSON,省去了jsonp中handle函数的定义，靠callback代替
          //这个callback参数传过去，好像可以变成一个函数
          $.getJSON(
            'http://127.0.0.1:8000/jquery-jsonp-server?callback=?',
            function (data) {
              $('#result').html(`
              名称：${data.name},<br>
              荣誉：${data.honour}
              `)
            }
          )
        })
    </script>
  </body>

十、CORS

跨源资源共享（CORS） - HTTP | MDN

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 返回的响应");

});

 

 

HTTP响应首部字段，响应头

跨域资源共享，都是服务端设置的东西

//设置响应头  设置允许跨域

    response.setHeader("Access-Control-Allow-Origin","*");

    //任意头部信息

    response.setHeader("Access-Control-Allow-Headers","*");

    //预请求结果缓存

    response.setHeader("Access-Control-Max-Age","delta-seconds");

    //跨域请求时是否携带验证信息

    response.setHeader("Access-Control-Allow-Credentials","true");

    //设置请求允许的方法 

    response.setHeader("Access-Control-Allow-Methods","*");

    //暴露头部信息

    response.setHeader("Access-Control-Expose-Headers","*");

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6920.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！