首页 前端知识 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 前端知识 前端哥 489 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
标签
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!