前端发送请求的几种方式

一.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-get
        getBtn.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-post
        postBtn.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 },
            // 注意这里是写数据类型，这里要么不写，要么写json
            dataType: "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-get

        axios.get("/login", {
            params: { name: userName.value, pswd: pswd.value }
        }).then((response) => {
            // then就相当于success
            console.log("axios-get", response);
        })
 
 
    // *****************axios-post
   
        // post请求  参数直接写{}   不需要外面那层params
        axios.post("/register", { 
            name: userName.value, psw: pswd.value 
        }).then((response) => {
            // then就相当于success
            console.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对象。