Java基础面试题(二)

数据结构_串的匹配

  返回  

暑期实训第六天:项目与后端的数据交互

2021/7/20 21:36:03 浏览:

前言

今天开始尝试vue项目与后端的交互,主要是一些简单的从后端获取数据。

一、原生ajax请求

Ajax 的全称是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是一种用于 创建动态网页(与后端交互)的技术。 Ajax 技术 指的是脚本独立向服务器请求数据,拿到数据以后,进行处理并更新网页。整个过程 中,后端只是负责提供数据,其他事情都由前端处理,实现了 获取数据 → 处理数据 → 展示数据 的完整业务逻辑。

1.1  ajax请求的步骤:

首先,创建实例。实例化当前XMLHttpRequest异步请求的构造函数。

var xhr = new XMLHttpRequest();

1.2  监听状态码的改变:

readyState 属性是一个整数,它的值代表了不同的 HTTP 请求状态。

0:初始值,表示请求未初始化, open 方法尚未调用;

1:启动请求,open 方法已经调用,但尚未调用 send 方法;

2:请求发送,已经调用 send 方法,但尚未接收到响应;

3:接收响应,已经接受到 部分响应 数据,主要是响应头;

4:HTTP 响应完成,已经接收到全部响应数据,而且可以在客户端使用。

xhr.onreadystatechange = function () {
        // 请求成功时,执行以下代码
        if (this.readyState == 4) {
            console.log(this.response)
           }
       }
   }


1.3 设置响应头:

如果你的 HTTP 请求需要 设置请求头 ,那么调用 open 方法之后的 下个步骤 就是设置它,使用的 方法是: setRequestHeader

Content-Type 请求头的类型,一般情况有以下四种类型

text/html 表示提交xml类型的数据

application/x-www-form-urlencoded 表示常见的form表单提交/web提交

application/json 表示提交json格式的数据

mulltipart/form-data 表示文件提交    

1.4 设置请求方法和地址

创建 XMLHttpRequest 对象之后,发起 HTTP 请求的 下一步 是调用 XMLHttpRequest 对象的 open 方法,指定 HTTP 请求的两个必需部分:请求方法 和 URL。

xhr.open(method, url, async)

method: 第一个参数用于指定 HTTP 请求的方法,不区分大小写; 该参数可取的值包括:"GET"、"POST"、"HEAD"、"PUT"、"OPTIONS"、"DELETE", 其中,"GET" 和 "POST" 是得到广泛支持的请求方法;

url: 第二个参数用于指定 HTTP 请求的 URL 地址,可以是 绝对URL 或 相对URL;

绝对URL:需要满足 "同源策略"(服务器明确允许跨域请求的情况除外);

相对URL:即相对于文档的 URL;

async: 第三个参数是可选的,可用 布尔值 指定脚本是否以异步的方式调用此次 Ajax 请求; 该参数默认为 true,表示异步调用此次 Ajax 请求,不阻塞后续脚本的执行

1.5 发送http请求:
使用 XMLHttpRequest 发起 HTTP 请求 的 最后一步 是指定可选的请求主体、并向服务器发送它

xhr.send() xhr.send(`username=admin&password=123456`)

GET和POST的概念

HTTP协议中的两种发送请求的方法,通常用来对接后端接口进行接口数据的交互。 两者的区别 GET请求一般是用来获取数据的,POST请求一般是用来提交数据的 GET请求浏览器会把http header和data一并发送出去,服务器响应200(返回数据); POST请求浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响 应200 ok(返回数据)

 

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号