axios怎么js

转载

数据科学探索者 2024-10-28 16:29:09

文章标签 axios怎么js ajax servlet java-ee XML 文章分类 iOS 移动开发

Ajax

Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

1. Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求。

2. 服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

XMLHttpRequest

XMLHttpRequest对象：发送请求到服务器并获得返回结果

所有现代浏览器都内建了 XMLHttpRequest 对象，通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。
new XMLHttpRequest();

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力。

常用方法

open(method,URL,async) 建立与服务器的连接
method参数指定请求的HTTP方法,典型的值是GET 或POST
URL参数指定请求的地址
async参数指定是否使用异步请求，其值为true或 false
send(content) 发送请求
content参数指定请求的参数
setRequestHeader(header,value) 设置请求的头信息

常用属性

onreadystatechange：事件，指定回调函数
readystate: XMLHttpRequest的状态信息
responseText：获得响应的文本内容

axios怎么js_axios怎么js

axios中的get方式和post方式

post方式

submit(){
				this.$http.post("admin/student", jsonToString(this.form)).then((resp)=>{
					if(resp.data.code==200){
						this.dialogFormVisible = false;//关闭窗口
						this.$message({
								message: resp.data.msg,
								type: 'success'
						});//弹出提示成功窗口
						this.$router.go();//刷新页面
					}else if(resp.data.code==201){
						
					}
				})
			}

get方式

mounted() {
			this.$http.get("admin/student?mark=major").then((resp) => {
				if (resp.data.code == 200) {
					this.majorList = resp.data.data;
				}
			})
		}

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

1. 数据在键值对中

2. 数据由逗号分隔

3. 大括号保存对象

4. 方括号保存数组

语法： JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

{"firstName": "John"}

{“name”:”value”,”sex”:”男”}

比较有趣的一点是，早期Java吧数据写入xml中，再传到前端，然后js解析数据。过程十分复杂，现在已经不再使用了。

异步

上面在讲解ajax中提到了很多个异步，那么异步是什么意思呢？

先举例说明一下何为同步，正常情况下，我们在登录界面，每一个步骤的请求，都不会影响其他请求的发送，如下图。

axios怎么js_XML_02

在验证邮箱账号能否注册时，别的按键不影响使用。

而同步则是如下图。

axios怎么js_servlet_03

axios怎么js_ajax_04

点击保存后，后端所传输过来的值，直接将html页面覆盖掉了，这就是同步。

由此栗子我们便可以知道，前后端同步请求，后端响应的内容，会把整个内容覆盖掉。打断了客户端的其他操作。

关系如下图。

axios怎么js_XML_05

而异步，字如其意就是不同步的意思。

前端发送请求：

使用js中提供了一个XMLHttpRequest对象，代理网页向后端发送了一个请求（异步的），

服务器所响应的内容也是由此对象接收的，最终在js中将接收的数据更新到网页的某个标签上。这样在前后端交互的过程中，不影响网页的其他操作，网页就不会出现刷新操作。

关系如下图。

axios怎么js_axios怎么js_06

跨域问题

首先什么是跨域？

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。

下表将举例说明何种触发跨域。

URL	说明	是否允许通信

http://www.a.com:80/a.js http://www.a.com:80/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com:443/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.a.com/b.js	不同域名	不允许

为什么浏览器要限制跨域访问呢？

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题：

1.用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器

2.用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com

这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。

3.如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。

为什么要跨域？

既然有安全问题，那为什么又要跨域呢？有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

怎么解决跨域问题

可以通过前端解决，也可以通过后端解决，这里我们主要讲解后端解决的方法。

跨域资源共享（CORS）

W3C 的 Web 工作组推荐了一种新的机制，即跨域资源共享（Cross-origin Resource Sharing），简称CORS。其实这个机制就是实现了跨站访问控制，使得安全地进行跨站数据传输成为可能。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许ajax进行跨域的访问。

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入设置，就可以实现跨域访问了！

创建过滤器实现后端设置允许跨域访问:

@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
        //允许携带Cookie时不能设置为* 否则前端报错
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie

        filterChain.doFilter(servletRequest, servletResponse);
    }
}

XML

什么是xml

XML 指可扩展标记语言（ Extensible Markup Language ）

XML 是一种标记语言，很类似 HTML

XML 的设计宗旨是传输 , 存储数据，而非显示数据

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

xml与html的主要差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计为存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

xml的优势在于它能对各种编程语言编写的数据进行管理，使得在任何平台下都能通过解析器来读取 XML 数据。

xml的语法

一个xml文件分为如下几部分内容：

1.文档声明

2.元素标签

3.属性

4.注释

文档声明

在编写 XML 文档时，需要先使用文档声明，声明 XML 文档的类型。

最简单的声明语法：

<?xml version="1.0" ?>

用 encoding 属性说明文档的字符编码：

<?xml version="1.0" encoding="GB2312" ?>

元素

元素是XML文档内容的基本单元。语法上，一个元素包括一个起始标记，一个结束标记以及标记之间的数据内容。

例如:<出版社>电子工业出版社</出版社>

元素中还可以嵌套别的元素。在XML文档中，仅有一个根元素，可以有多个子元素，允许出现空元素。

XML 命名规则

XML 元素必须遵循以下命名规则：

名称可以含字母、数字以及其他的字符

名称不能以数字或者标点符号开始

名称不能以字符 “ xml” （或者 XML 、 Xml ）开始

名称不能包含空格

可使用任何名称，没有保留的字词。

XML 的语法规则

所有 XML 元素都须有关闭标签

XML 标签对大小写敏感

3.XML 必须正确地嵌套

XML 文档必须有根元素

XML 的属性值须加引号

实体引用

在 XML 中，有 5 个预定义的实体引用：

& lt ; < 小于

& gt ;> 大于

&& 和号

& apos ; ‘ 单引号

""引号