前端发送请求的几种方式

几种方式"/>

前端发送请求的几种方式

一.form表单提交

<h1>form表单的get</h1>
<form action="/adress" method="get"><input type="text" name="name"><input type="text" name="pswd"><input type="submit" value="get"></form><h1>form表单的post</h1><form action="/adress" method="post"><input type="text" name="name"><input type="text" name="pswd"><input type="submit" value="post"></form>

form表单把表单中的内容提交给后台,如输入框,单选框,复选框,文本域等

• form表单提交,在后台可通过对应的name属性获取相应的值
• action属性是用来设置提交的服务器地址
• method属性是用来设置form表单的提交方式get或post 默认值是get

表单提交的特点:

• form表单提交后会新建一个页面
• 每次提交都会刷新页面,没有办法做到页面局部的刷新
• form表单时浏览器自带的,就算将浏览器的js支持关掉,也可以提交表单

二.原生ajax

简介(来自MDN)

Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的 AJAX 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管 X 在 Ajax 中代表 XML，但由于JSON的许多优势，比如更加轻量以及作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 Ajax 模型中打包信息。

简单总结

ajax并不是一种新的技术,是几种技术的结合,ajax无需加载整个页面,就能够更新部分的网页,可以使程序更快回应到用户

示例

    <h1>原生ajax</h1><input type="text" id="userName" value="hehe"><button id="getbtn">ajax--get</button><input type="text" id="pswd"><button id="postbtn"></button><script>let getBtn = document.querySelector('#getbtn');let postBtn = document.querySelector('#postbtn');let userName = document.querySelector('#userName');let pswd = document.querySelector('#pswd');// 原生ajax-getgetBtn.onclick = function () {// 1.创建请求对象let xhr = new XMLHttpRequest();// 2.创立链接xhr.open("get", `/login?name=${userName.value}&pswd=${pswd.value}`, true)// 3.发送请求xhr.send();// 4.监听请求状态xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log("ajax-get", xhr.responseText);}}}// 原生ajax-postpostBtn.onclick = function () {// 1.创建请求对象let xhr = new XMLHttpRequest();// 2.创立链接xhr.open("post", "/register", true)// 3.发送请求xhr.send(`name=${userName.value}&pswd=${pswd.value}`);// 4.监听请求状态xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log("ajax-post", xhr.responseText);}}}</script>

ajax请求的优点

• ajax在提交,请求,接收时是异步进行的,不会影响页面的其他部分,提升了用户体验

ajax请求的缺点

• 使用起来步骤繁琐
• 不支持浏览器back按钮
• ajax暴露了与服务器交互的细节

三jQuery的ajax

为什么说是jQuery的ajax,jQuery只是将原生ajax封装起来,不必每次重复去写原生ajax,方便了程序员使用,

 $('#getbtn').click(() => {$.ajax({type: "get",url: "/login",data: { name: userName.value, pswd: pswd.value },// 注意这里是写数据类型，这里要么不写，要么写jsondataType: "dataType",success(response) {console.log("get:", response);}});})$('#postbtn').click(() => {$.ajax({type: "post",url: "/register",data: { name: userName.value, pswd: pswd.value },success(response) {console.log("post:", response);}});})

jQuery的ajax参数

• type:请求方式
• url:请求地址
• data:发送到服务器的数据
• dataType:服务器响应的数据类型
• success(response,status,xhr):成功时候的回调

注意需要引入jQuery使用

四:axios

简介(来自Axios官网)

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

示例

   // *****************axios-getaxios.get("/login", {params: { name: userName.value, pswd: pswd.value }}).then((response) => {// then就相当于successconsole.log("axios-get", response);})// *****************axios-post// post请求  参数直接写{}   不需要外面那层paramsaxios.post("/register", { name: userName.value, psw: pswd.value }).then((response) => {// then就相当于successconsole.log("axios-post", response);}

vue框架的创建者尤雨溪推荐使用axios替换jQuery

• 原生ajax的配置和调用方式都很繁琐，实现异步请求比较麻烦
• jQuery的ajax相对于原生ajax是非常好用的，但是没有必须要因为ajax异步网络来引用整个jQuery框架

axios本质上也是对原生ajax的封装，但是他是Promise的实现版本，相较于原生ajax或jQuery的ajax，程序员省去创建Promise对象的过程，符合最新的ES规范，它有以下特征：

• 同时支持浏览器端和服务端请求
• 支持promise API
• 提供了一些并发请求的接口
• 转换请求返回数据，自动转换为JSON格式

五.fetch

简介（来自MDN）

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

示例

//发起get请求
fetch(url).then(function(response) {//response.status表示响应的http状态码if(response.status === 200){//json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了return response.json();}else{return {}}
});//fetch post请求
fetch(url, {method: 'post',body: JSON.stringify(base),headers: {'Content-Type': 'application/json'}}).then(function(data) {})

fetch号称是ajax替代品，是ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。