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

于 2024-04-09 10:00:00 发布
阅读量903 收藏 8
点赞数 8
文章标签： ajax 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62764364/article/details/137523732
版权

目录

一、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","*");

caixingzhang
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery发送AJAX请求
gcsyzy的博客
04-01 1400
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
主要给大家介绍了在Vue组件化中利用axios处理ajax请求的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
jquery ajax参数详解
冲出仁川，走出马德里，故事还会再继续
01-10 1305
Jquery中的AJAX参数 url,[settings] url:一个用来包含发送请求的URL字符串。 settings:AJAX 请求设置。所有选项都是可选的。 settings：选项 accepts type:Map 默认： 取决于数据类型。 内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。 async type:boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将
jQuery中实现AJAX请求
weixin_62922379的博客
05-18 786
以上是jQery对Ajax发送请求里面 可能涉及到jQuery,bootstrap,axios, 如果不想去下载 我们可以。type：设置返回内容格式，xml, html, script, json, text, _default。中找到对应的在线链接 我们使用的时候使用标签引入即可。callback：请求的载入成功时的回调函数。里面的参数与get请求一致。// 配置baseURL。url:请求的url地址。data:请求的参数。
jQuery（十一）json、ajax和jsonp（数据相关）
COOL66BOY的博客
03-14 1660
文章目录jsonajax异步和同步局部刷新和无刷新同源策略jQuery里使用ajax json json是JavaScript Object Notation 的首字母缩写，单词的意思是JavaScript对象表示法，这里说的json指的是类似于JavaScript对象的一种数据格式，目前这种数据格式比较流行，逐渐换掉了传统的xml数据模式。 JavaScript自定义对象 //javascript自定义对象 var oMan = {
jquery中的ajax方法怎样通过JSONP进行远程调用
04-12 1735
可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了。jsonp：表示传递的参数，默认为callback，我们也可以自定义，服务器段通过此参数，获取自定义的函数名称，服务器这样获取 Request.QueryString["callback"]jsonpCallback：表示传递的参数值，也就是回调的函数名称，这是自定义的名称。$.ajax({
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
在浏览器中，最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。】 优点： 1.不重新加载页面的情况下更新网页 2.在页面已加载后从服务器请求/...
关于前端ajax请求的优雅方案（http客户端为axios）
08-28
主要给大家介绍了关于前端ajax请求的优雅方案，本文http客户端为axios，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
jquery实现Ajax请求
qq_51635297的博客
11-09 7662
jquery实现Ajax请求
jquery中的ajax请求方式的写法 & 重要且常用参数的释义 & ajax返回值，return获取不到数据值
weixin_44867717的博客
12-03 2344
ajax
【AJAX 教程】Jquery 实现 AJAX 请求的三种方式
我的博客
05-23 3066
Jquery 实现 AJAX 请求的三种方式 目录 Jquery 实现 AJAX 请求的三种方式 简介 项目准备 $.get()方法 $.post()方法 $.ajax()方法 项目演示 相关文章【AJAX 教程】JS 原生 AJAX 请求 简介 JQuery 脚本库里所提供的 AJAX 提交的方法有很多，但主要的方法有 $.get(), $.post(), $.ajax()。其中 $.ajax() 是前两种方法的底层实现，可以提供比前两者更多的属性与参数设置，如果需要高级的...
JQuery发送Ajax请求的5种简单使用方式，一看就会~
冷芝士鸭的学习笔记
10-19 8144
JQuery发送Ajax请求的5种简单使用方式，一看就会~ 1、Ajax简介 1.1 什么是Ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在
JQuery中的Ajax请求方式
YCQNB_的博客
02-27 2083
1.了解jQuery中的Ajax 在浏览器中提供了XMLHttpRequest用法比较复杂，因此jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，降低了Ajax的使用难度，提高了工作中的工作效率 2.$.get()函数 1.jQuery中的$.get()函数专门用来发起get请求,从而将服务器上的资源请求到客服端进行使用 $.get()函数的语法格式 $.get(url,[data],[callback]) url：要请求的资源地址 data:请求资源期间要
原生js与JQuery的ajax请求
AK的博客
08-13 8381
原生js的ajax请求 1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); 2.准备发送请求 open() xhr.open('请求类型','url地址',是否异步); 参数 描述 请求类型 GET 或 POST url 文件在服务器上的地址 是否异步 true(异步) / false(同步) 3.发送请求数据 send() xhr.send(); 4.请求返回的回调函数 当页面的加载状态发生改变的时候readyState属
jquery的函数实现Ajax
兮遥
08-21 1047
1、$.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax( { name:value, name:value, ... } ) async ： 布尔值，表示请求是否异步处理。默认是 true (可以不写) contentType ：发送数据到服务器时所使用的内容类型。默认是"application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据，可...
jQuery Ajax 和 axios Ajax
qq_59612674的博客
11-06 2873
区别： axios是通过promise技术实现对ajax实现的一种封装，本身上来说axios就是ajax，但是ajax却不单单只是axios；jQuery也实现了对ajax技术的封装，但是jQuery主要是对原生JavaScript进行封装，封装了js三大核心要素：ECMAScript、DOM、BOM，所以说jQuery封装的ajax只是其中的一小部分，如果通过引用jQuery来进行ajax交互实在是显得有所浪费资源，因此vue中封装了axios来实现对ajax技术的单独封装。 什么是 jQuery ？
jQuery请求ajax
最新发布
m0_72929120的博客
09-02 48
【代码】jQuery请求ajax。
掌握在vue框架中使用Axios库发送Ajax请求的方法
06-10
好的，我可以回答你的问题。在Vue框架中使用Axios库发送Ajax请求的方法如下： 1. 首先，在Vue项目中安装Axios库。可以使用npm命令来安装Axios： ``` npm install axios --save ``` 2. 在Vue组件中引入Axios库： ``` import axios from 'axios'; ``` 3. 使用Axios发送Ajax请求。例如，发送一个GET请求： ``` axios.get('/api/user').then(function(response) { console.log(response.data); }).catch(function(error) { console.log(error); }); ``` 其中，'/api/user'是请求的URL地址，response.data是服务器返回的数据。如果请求失败，可以通过catch方法来处理错误。 4. 如果需要发送POST请求，可以使用Axios的post方法： ``` axios.post('/api/user', { name: 'John', age: 30 }).then(function(response) { console.log(response.data); }).catch(function(error) { console.log(error); }); ``` 其中，'/api/user'是请求的URL地址，{name: 'John', age: 30}是POST请求的数据，response.data是服务器返回的数据。 这就是在Vue框架中使用Axios库发送Ajax请求的方法。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值