Ajax学习条记（二）：jQuery 中的 AJAX、axios发送AJAX哀求、AJAX-jQuery通 ...

徐锦洪  金牌会员 | 2024-7-26 14:21:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 755|帖子 755|积分 2265

目次
一、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哀求：
  1. $('button').eq(0).click(function(){
  2.             $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  3.                 console.log(data);
  4.             },'json');
  5.         });
复制代码
三、post 哀求

$.post(url, [data], [callback], [type])
url:哀求的 URL 地址。
data:哀求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。
 
post哀求：
  1. $('button').eq(1).click(function(){
  2.             $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  3.                 console.log(data);
  4.             },'json');
  5.         });
复制代码
Server.js
  1. //jQuery 服务
  2. app.all('/jquery-server', (request, response) => {
  3.   //设置响应头
  4.   response.setHeader('Access-Control-Allow-Origin', '*')
  5.   //设置响应体
  6.   // response.send('Hello jQuery AJAX')
  7.   const data = { name: '尚硅谷' }
  8.   response.send(JSON.stringify(data))
  9. })
复制代码
四、AJAX-jQuery通用方法发送AJAX哀求：

  1. $('button')
  2.         .eq(2)
  3.         .click(function () {
  4.           $.ajax({
  5.             //url    给谁发
  6.             url: 'http://127.0.0.1:8000/jquery-server',
  7.             //参数
  8.             data: { a: 100, b: 200 },
  9.             //请求类型
  10.             type: 'GET',
  11.             //响应体结果
  12.             dataType: 'json',
  13.             //成功的回调
  14.             success: function (data) {
  15.               console.log(data)
  16.             },
  17.             //超时时间
  18.             timeout: 2000,
  19.             //失败的回调
  20.             error: function () {
  21.               console.log('出错啦!!')
  22.             },
  23.             //头信息
  24.             headers: {
  25.               c: 300,
  26.               d: 400
  27.             }
  28.           })
  29.         })
复制代码
  1. /jQuery 服务
  2. app.all('/jquery-server', (request, response) => {
  3.   //设置响应头
  4.   response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  5.   response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  6.   //设置响应体
  7.   // response.send('Hello jQuery AJAX')
  8.   const data = { name: '尚硅谷' }
  9.   response.send(JSON.stringify(data))
  10. })
复制代码
五、安装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哀求（重点）

先配置服务端
  1. //axios 服务
  2. app.all('/axios-server', (request, response) => {
  3.   //设置响应头
  4.   response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  5.   response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  6.   //设置响应体
  7.   // response.send('Hello jQuery AJAX')
  8.   const data = { name: '尚硅谷' }
  9.   response.send(JSON.stringify(data))
  10. })
复制代码
三个按钮
  1. <button>GET</button>
  2.     <button>POST</button>
  3.     <button>AJAX</button>
复制代码
各种哀求：
  1. <script>
  2.       const btns = document.querySelectorAll('button')
  3.       //配置 baseURL
  4.       axios.defaults.baseURL = 'http://127.0.0.1:8000'
  5.       //GET 请求
  6.       btns[0].onclick = function () {
  7.         //GET请求
  8.         axios
  9.           .get('/axios-server', {
  10.             //url 参数
  11.             params: {
  12.               id: 100,
  13.               vio: 7
  14.             },
  15.             //请求头信息
  16.             headers: {
  17.               name: 'atguigu',
  18.               age: 20
  19.             }
  20.           })
  21.           .then((value) => {
  22.             console.log(value)
  23.           })
  24.       }
  26.       //POST 请求
  27.       btns[1].onclick = function () {
  28.         axios.post(
  29.           '/axios-server',
  30.           {
  31.             //第二个参数对象里面写请求体
  32.             username: 'admin',
  33.             password: 'admin'
  34.           },
  35.           {
  36.             //第三个参数对象里写url参数和其他信息
  37.             //url 参数
  38.             params: {
  39.               id: 200,
  40.               vip: 9
  41.             },
  42.             //请求头参数
  43.             headers: {
  44.               height: 180,
  45.               weight: 180
  46.             }
  47.           }
  48.         )
  49.       }
  51.       //通用请求
  52.       btns[2].onclick = function () {
  53.         axios({
  54.           //请求方法
  55.           method: 'POST',
  56.           //url
  57.           url: '/axios-server',
  58.           //url 参数
  59.           params: {
  60.             vip: 10,
  61.             level: 30
  62.           },
  63.           //头信息
  64.           headers: {
  65.             zcx: 100,
  66.             age: 18
  67.           },
  68.           // 请求体参数
  69.           data: {
  70.             username: 'admin',
  71.             password: 'admin'
  72.           }
  73.         }).then((response) => {
  74.           console.log(response)
  75.           //响应状态码
  76.           console.log(response.status)
  77.           //响应状态字符串
  78.           console.log(response.statusText)
  79.           //响应头信息
  80.           console.log(response.headers)
  81.         })
  82.       }
  83.     </script>
复制代码
七、fetch发送AJAX哀求

服务端
  1. //fetch 服务
  2. app.all('/fetch-server', (request, response) => {
  3.   //设置响应头
  4.   response.setHeader('Access-Control-Allow-Origin', '*') //设置允许跨域
  5.   response.setHeader('Access-Control-Allow-Headers', '*') //接收自定义请求头字段
  6.   //设置响应体
  7.   // response.send('Hello jQuery AJAX')
  8.   const data = { name: '尚硅谷' }
  9.   response.send(JSON.stringify(data))
  10. })
复制代码
  1. <script>
  2.       const btn = document.querySelector('button')
  3.       btn.onclick = function () {
  4.         fetch('http://127.0.0.1:8000/fetch-server?zcx=18', {
  5.           //请求方法
  6.           method: 'POST',
  7.           //请求头
  8.           headers: {
  9.             name: 'atguigu'
  10.           },
  11.           //请求体
  12.           body: 'username=admin&password=admin'
  13.         })
  14.           .then((response) => {
  15.             return response.json() //把json字符串转换为js对象
  16.           })
  17.           .then((response) => {
  18.             // 第二个then处理上一个返回的正确结果
  19.             console.log(response)
  20.           })
  21.       }
  22.     </script>
复制代码
八、同源策略

同源： 协议、域名、端标语 必须完全类似，有一个不一样就是跨域。AJAX默认遵循同源策略
违背同源策略就是跨域。
 
服务端
  1. //1. 引入express
  2. const express = require('express')
  3. //2. 创建应用对象
  4. const app = express()
  5. //3. 创建路由规则
  6. // resquest 是对请求报文的封装
  7. // response 是对响应报文的封装
  8. app.get('/home', (request, response) => {
  9.   //响应一个页面
  10.   //从home进来后，响应一个页面
  11.   response.sendFile(__dirname + '\\index.html') //拼接的是路径不要加点
  12. })
  13. app.get('/data', (request, response) => {
  14.   response.send('用户数据')
  15. })
  16. //4. 监听端口启动服务
  17. app.listen(9000, () => {
  18.   console.log('服务器已启动...')
  19. })
复制代码
  1. btn.onclick = function () {
  2.         const xhr = new XMLHttpRequest()
  3.         //这里因为是满足同源策略的，所以 url 可以简写
  4.         xhr.open('GET', '/data')
  5.         //发送
  6.         xhr.send()
  7.         //
  8.         xhr.onreadystatechange = function () {
  9.           if (xhr.readyState === 4) {
  10.             if (xhr.status >= 200 && xhr.status < 300) {
  11.               console.log(xhr.response)
  12.             }
  13.           }
  14.         }
  15.       }
复制代码
九、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)+")");
});
 
 
原理实现
不是很懂，一脸懵逼呀，我的宝。
 
服务端
  1. //jsonp服务
  2. app.all('/jsonp-server', (request, response) => {
  3.   // response.send('console.log("hello jsonp-server");')
  4.   const data = {
  5.     name: '斯蒂芬库里'
  6.   }
  7.   //将数据转化为字符串
  8.   let str = JSON.stringify(data)
  9.   //返回结果
  10.   response.end(`handle(${str})`)
  11. })
复制代码
实现用户校验，服务端相应体是一个函数，先声明handle函数，然后创建script标签，使用src属性哀求数据
  1. <script>
  2.       // 处理数据
  3.       function handle(data) {
  4.         //获取 result 元素
  5.         const result = document.getElementById('result')
  6.         result.innerHTML = data.name
  7.       }
  8.     </script>
  9.     <script src="http://127.0.0.1:8000/jsonp-server"></script>
复制代码
1.原生jsonp

服务端
  1. //jsonp服务
  2. app.all('/check-username', (request, response) => {
  3.   const data = {
  4.     exist: 1,
  5.     msg: '用户名已经存在'
  6.   }
  7.   //将数据转化为字符串
  8.   let str = JSON.stringify(data)
  9.   //返回结果
  10.   response.end(`handle(${str})`)
  11. })
复制代码
  1. <body>
  2.     用户名：<input type="text" id="username" />
  3.     <p></p>
  4.     <script>
  5.       // 获取 input 元素
  6.       const input = document.querySelector('input')
  7.       const p = document.querySelector('p')
  8.       //声明 handle 函数
  9.       function handle(data) {
  10.         input.style.border = 'solid 1px #f00'
  11.         // 修改 p 标签的提示文本
  12.         p.innerHTML = data.msg
  13.       }
  14.       //绑定事件
  15.       input.onblur = function () {
  16.         //获取用户的输入值
  17.         let username = this.value
  18.         //向服务器发送请求  检查用户名是否存在
  19.         //1.创建 script标签
  20.         const script = document.createElement('script')
  21.         //2.设置标签的 src 属性
  22.         script.src = 'http://127.0.0.1:8000/check-username'
  23.         //3. 将 script 插入到文档中  把scripy插入到body标签最后
  24.         document.body.appendChild(script)
  25.       }
  26.     </script>
  27.   </body>
复制代码
2.jQuery发送jsonp哀求

先到bootcdn.cn把jQuery的标签复制过来
 
服务端
  1. //jsonp服务
  2. app.all('/jquery-jsonp-server', (request, response) => {
  3.   //响应一个数据
  4.   const data = {
  5.     name: '史蒂芬库里',
  6.     honour: ['MVP', 'FMVP', '历史三分王']
  7.   }
  8.   //将数据转化为字符串
  9.   let str = JSON.stringify(data)
  10.   //接收 callback 参数
  11.   let cb = request.query.callback
  12.   //返回结果 这个是callback就相当于是个函数名，相当于handle
  13.   response.end(`${cb}(${str})`)
  14. })
复制代码
  1. <body>
  2.     <button>点击发送 jsonp 请求</button>
  3.     <div id="result"></div>
  4.     <script>
  5.       $('button')
  6.         .eq(0)
  7.         .click(function () {
  8.           //使用jquery发送jsonp请求时url后面要加参数callback=?，这是一个固定写法
  9.           //Jquery中的getJSON,省去了jsonp中handle函数的定义，靠callback代替
  10.           //这个callback参数传过去，好像可以变成一个函数
  11.           $.getJSON(
  12.             'http://127.0.0.1:8000/jquery-jsonp-server?callback=?',
  13.             function (data) {
  14.               $('#result').html(`
  15.               名称：${data.name},<br>
  16.               荣誉：${data.honour}
  17.               `)
  18.             }
  19.           )
  20.         })
  21.     </script>
  22.   </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","*");


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

徐锦洪

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表