2021-06-08 Ajax

最新推荐文章于 2024-10-18 19:02:29 发布
最新推荐文章于 2024-10-18 19:02:29 发布
阅读量577 收藏
点赞数
文章标签： ajax jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43552533/article/details/117741426
版权

AJAX学习

1. 原生AJAX

1.1 AJAX 简介

  • AJAX（Asynchronous JavaScript And XML）= 异步JS和XML
  • 通过AJAX可以在浏览器中不刷新页面的同时向服务器发送异步请求，可以提高网页的加载速度。
  • AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 XML 简介

  • xml 可扩展标记语言。
  • xml 用来传输和存储数据。
  • xml 和html 类似，不同的是html中都是预定义标签，而xml中没有预定义标签，全都是自定义标签，用来表示一些数据。
    // XML自定义标签表现形式：
	<student>
		<name>xxx</name>
		<age>18</age>
		<gender>男</gender>
	</student>`

1.3 AJAX的特点

1.3.1 AJAX的优点

  • 无需刷新页面而向服务器进行通信请求
  • 允许根据用户事件来更新部分页面内容。

1.3.2 AJAX的缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)：不能在不同域中发送请求
  • SEO不友好：爬虫爬取不到页面数据

1.4 AJAX的使用 (编码见原生AJAX文件)

1.4.1 核心对象

（1）**HTTP (hypertext transport protocol) 协议[超文本传输协议]**，详细规定了浏览器和万维网服务器之间互相通信的规则。

// 请求报文
行     GET(请求方式)/url请求参数/HTTP/1.1(协议版本)
头     Host: xxx.com
       Cookie: name=xxx
       Content-type: application/x-www-form-urlencodes
       User-Agent: chrome 83
空行
体     POST请求时可不为空（username==admin&password==admin）,GET请求为空



// 响应报文
行     HTTP/1.1(协议版本)  200（响应状态值）  OK（状态字符串）
头     Content-type: text/html;charset=utf-8
       Content-length: 2048
	   Content-encodind: gzip
空行
体     <html>
       	 <head>
       	 </head>
         <body>
           <h1>今天你努力了吗</h1>
         </body>
       </html>

2. Jquery中的AJAX请求

2.1 get请求

$.get(url,[data],[callback],[type])
  url: 请求的URL地址
  data: 请求携带的参数
  callback: 载入成功时回调函数
  type: 设置返回内容格式,xml,html,script,json,text,_default

在这里插入图片描述

2.2 post请求

$.post(url,[data],[callback],[type])
  url: 请求的URL地址
  data: 请求携带的参数
  callback: 载入成功时回调函数
  type: 设置返回内容格式,xml,html,script,json,text,_default

post请求

2.3 通用方式请求

在这里插入图片描述

3. Axios 发送 AJAX请求

3.1 安装或引入

（1）npm方式

// 终端输入
npm install axios --save

（2）script标签引用

// 源于BootCDN
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

3.2 GET 请求

 			// 配置baseUrl
            axios.defaults.baseURL = 'http://127.0.0.1:8000';
            // GET 请求
            axios.get('/axios-server'
                {
                    // url 参数
                    params: {
                        id: 100,
                        vip: 7
                    },
                    // 请求头信息
                    headers: {

                    }
                }).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })

3.3 POST 请求

 			// 配置baseUrl
            axios.defaults.baseURL = 'http://127.0.0.1:8000';
            // POST 请求
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            },
                {
                    // url 参数
                    params: {
                        id: 100,
                        vip: 7
                    },
                    // 请求头信息
                    headers: {

                    }
                }).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })

3.4 通用方式请求

			// 通用方式请求
            axios({
                // 请求方法
                method: 'POST',
                // url
                url: '/axios-server',
                // url参数
                params: {
                    name: 'xz'
                },
                // 头信息
                headers: {

                },
                // 请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            })

4. fetch 函数发送 AJAX 请求

			fetch('http://127.0.0.1:8000/fetch-server', {
                // 请求方式
                method: 'POST',
                // 请求头
                headers: {
                    name: 'xz'
                },
                // 请求体
                body: 'username=admin&password=admin'
            }).then(res => {
                return res.json()
            }).then(res => {
                console.log(res)
            })

5. 跨域

5.1 同源策略

  • 同源策略(Same-Origin-Policy)最早是由Netscape公司提出，是浏览器的一种安全策略。
  • 同源：即协议、域名、端口号 必须完全相同。
  • 跨越：违背同源策略就是跨域。
  • AJAX默认遵循同源策略

5.2 跨域问题解决

5.2.1 JSONP

（1）什么是JSONP？

	**JSONP**(JSON with Padding)，是一个非官方的跨域解决方案，只支持get请求。

（2）JSONP 工作机制？

  • 在网页中有一些标签天生具有跨域能力，如：img link iframe script
  • JSONP就是利用script标签的跨域能力来发送请求的。

（3）JSONP的使用

  • 动态的创建一个script标签
var script = document.createElement("script");
  • 设置script的src，设置回调函数
script.src = "http://localhost:8000/testAJAX?callback=abc";

5.2.2 CORS

在这里插入图片描述

MDISLXT
关注
2021-06-08vue中级面经
ai_feng123的博客
06-08 360
vue中级面经
linux系统错误代码1627,致远OA ajax.do登录绕过 任意文件上传 CNVD-2021-01627
weixin_27743991的博客
05-12 1630
import requestsimport sysfrom requests.packages.urllib3.exceptions import InsecureRequestWarningdef title():print('+------------------------------------------')print('+ 33[34mPOC_Des: http://wiki.pei...
2021-08-06--Vue
weixin_TB20160103的博客
08-07 100
1.联系人界面不显示数据！！！--》单词拼写错误，导致未执行created 2.404，此路径无！！！--》需要将提交按钮 改为普通按钮button 表示点击提交按钮发送ajax请求。 3.数据和视图双向绑定没有输入！！！--》重新添加 v-model 4.提交数据为空，且页面不跳转！！！--》单词拼写错误 flag 5.语法错误！！！--》判断不见了，直接ctrl+d就没了下一步。 ...
2021-06-08
qq_43702747的博客
06-08 129
使用ajax写一个用户注册小界面 步骤 创建注册界面 -->创建数据库 --> 在jsp页面进行跳转servlet界面–>servlet界面获取将jsp页面的输入的数据 -->在dao下进行check用户名信息 -->在daoimpl下进行关于用户名查找的具体的实现 -->转到servlet界面获取查找数据库里面的是否具有用户输入的数据进行反馈到jsp页面 代码部分 <%@ page language="java" contentType="text/html;
2021-06-08 购物车
GAARA
06-08 1015
效果: 在商品选购列表中选中的商品可以在购物车页面中同步看到,购物车有添加增减商品数量和删除商品功能 思路: 代码:   商品列表页:list.html     html: 在这里插入代码片     css: 在这里插入代码片     js: 引入 good.js文件 class List{ constructor(){ this.cont=document.
2021-08-06
zhoutx的博客
09-10 142
VUE3.0使用ElementPlus开发数据查询界面1 官网2 新建项目3 安装插件4 修改代码4.1 main.js 修改4.2 src/components下增加Table.vue4.3 修改src/router/index.js4.4 修改App.vue增加内容Table.vue到主页5 增加后台处理6 运行测试 1 官网 https://element-plus.org/#/zh-CN/component/quickstart https://element-plus.gitee.io/#/zh
2021-06-14
liyujiederizhi的博客
06-14 1147
/*! jQuery JavaScript Library v3.6.0 https://jquery.com/ Includes Sizzle.js https://sizzlejs.com/ Copyright OpenJS Foundation and other contributors Released under the MIT license https://jquery.org/license Date: 2021-03-02T17:08Z */ ( f
2021-08-31
JiangHuFengZi的博客
08-31 121
11、Ajax技术 11.1、简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Goog
2021-07-08用jqGrid 插件动态展示Table 列 (行转列) + echarts生成图表，并导出为excel的过程
zxc25379639的博客
07-08 823
@2021-07-08用jqGrid 插件动态展示Table 列 echarts生成图表，并导出为excel的过程 欢迎来到一只老菜鸟 你好！ 这是你第一次写文章，项目所用技术都是老技术，此前没有写文章的习惯，这也是从业几年来首次编写，望大家多多指教，互相观摩学习 本次项目为c#语言编写，本人也只干了几年的c#，技术方面请各位大佬指导。 问题描述：需要将日期、总数、合格数、良率 列转行 ，生成一个月度统计表，上面是数据，下面是数据形成的日趋势图 合并导出到excel 要求效果如下 这是整理后的原始数据
2021-11-03大数据学习日志——数据埋点+网络爬虫——后端开发入门
tingbaobaoo的博客
11-03 1472
01_mini-web 本章节学习目标 能够知道Web开发流程 能够知道使用web应用程序处理客户端的动态资源请求操作 能够知道路由列表的实现 能够知道装饰器方式的添加路由 能够知道logging日志的使用 本章节常用单词 request英 [rɪ'kwest] 请求；需要 response英 [rɪ'spɒns] 响应；反应； route英 [ruːt] 按某路线发送 ; 路由 template英 ['templeɪt; -plɪt] 模板，样板 source英 [sɔːs...
2021年最新java面试题--视频讲解(内部培训84个知识点超详细).rar
04-16
Java面试题06.装箱和拆箱 Java面试题07.==和equals的区别 Java面试题08.String Java面试题09.讲一下java中的集合 Java面试题10.ArrayList 和LinkedList的区别 Java面试题11.HashMap和HashTable的区别 Java面试题12....
Ajax：跨域、防抖和节流、HTTP协议
chaosweet的博客
10-18 1019
在善意的“双向奔赴”中，每个普通人都如星辰，微小但释放着自己的光芒，交织成灿烂的星河
【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式
m0_66584716的博客
10-17 1219
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 原生创建 Ajax 的步骤：1. 创建 Ajax 对象；2. 连接到服务器；3. 发送请求；4. 接收返回值。
10 django管理系统 - 管理员管理 - 新建管理员（通过模态框和ajax实现）
小心菜鸟出没
10-18 1606
在文章“04 django管理系统 - 部门管理 - 新增部门”中，我们通过传统的新增页面来实现部门的添加。在本文中，我们通过模态框和ajax来实现管理员的新增。
第四章 使用jQuery处理Ajax
weixin_62008675的博客
10-16 968
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。产生跨域的原因：由浏览器的同源策略造成的（同域名，同端口，同协议）通过 HTTP POST 请求从服务器上请求数据。从服务器加载数据，并把返回的数据放入被选元素中。跨域，指的是浏览器不能执行其他网站的脚本。open(方法，文件名，同步异步)三个不同的域名，但是主域名是相同的。$().load()方法。
JavaScript 第13章：Ajax 与异步请求
hummhumm的专栏
10-15 1347
在Web开发中，异步请求是一种非常重要的技术，它可以让网页在不重新加载的情况下与服务器交互。和Fetch API，以及它们如何用于处理JSON数据交换，并通过一个实战案例——获取天气信息来加深理解。
ajax地址参数与data参数运用
又是重名了
10-15 538
因为项目在进行安全准入检查，也是代码安全的一种处理方式吧，然后我们在进行行加密以及模块加密，就是因为行信息中存在行id可以通过更换行id进行查询其他行的信息，模块也是一样，可能会出现垂直越权以及水平越权，所以为了处理这个问题，我们增加了行加密以及模块加密，对于行id和模块名进行加密，后台增加处理，如果行id和模块名无法匹配则无法进行。因为具体的加密字段在接口后面用？上面是前提，但是遇到一个蛮尴尬的问题，加密的字符串是通过ajax传递的参数类似。
知识图谱-基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目-附项目源码+流程教程-优质项目实战
10-20
知识图谱_基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目_附项目源码+流程教程_优质项目实战
资产管理系统-使用Python+CSS开发的资产配置管理系统-附完整流程教程-优质项目.zip
最新发布
10-20
资产管理系统_使用Python+CSS开发的资产配置管理系统_附完整流程教程_优质项目
Php-Ajax应用程序架构详解
AJAX（Asynchronous JavaScript and XML）允许页面在不重新加载整个页面的情况下与服务器进行通信，提升了用户体验。而PHP则是一种广泛使用的服务器端脚本语言，常用于处理数据和生成动态网页内容。 **浏览器端框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值