前端中发送数据的方式原生Ajax，axios，fetch

Ajax

什么是AJAX？

AJAX（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），中文名：阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

为什么要使用AJAX？

更自然、流畅的用户体验，对用户的操作即时响应
在不中断用户操作的情况下与Web服务器进行通信
更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果
通过局部更新页面降低网络流量，提高网络的使用效率

同步和异步

由于js代码执行的过程是单线程的所以

同步:可以理解为在执行一个函数方法之后，一直等待系统的返回值，这时是处于阻塞的，只有接收到返回消息时才会继续往下执行

异步：执行完函数方法后,不必阻塞的等待返回消息，只需要委托一个异步过程。那么当系统接收到返回消息时，系统就会自动的触发委托的过程，从而完成一个完整的流程

console.log(1);
setTimeout(function(){console.log(2);},0);
setTimeout(function(){console.log(3);},0);
setTimeout(function(){console.log(4);},0);
console.log(5);

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务； //执行栈

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕， //任务队列

"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

XMLHttpRequest 对象

XMLHttpRequest的理解：

Ajax的核心对象是XMLHttpRequest,即Ajax的异步操作，和服务器交互主要依赖该对象.

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力

以前浏览器负责显示和发送请求接收响应。两件事情同一时刻只能做一件，没法同时进行。这样会让用户感觉不好(友好性不好)，

使用XMLHttpRequest对象，可以把浏览器解脱出来，可以让浏览器只负责显示，而完成请求的事情由XMLHttpRequest对象负责。

这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白。

AJax（get）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
<!-- 		<form action="1.php" method="get">
			用户名:<input type="text">
			密码：<input type="text">
			<input type="submit" />
		</form> -->
	</body>
</html>
<script>
	//ajax (Asychronous JavaScript and Xml)  异步的JavaScript和XML中文名阿贾克斯
	// 是一种创建异步式网页应用的网页开发技术
	//是一种无需重新加载整个网页的情况下能够更新部分网页的技术
	
	//1.创建XMLHttpRequest
	let xhr = new  XMLHttpRequest();
	//2. 设置请求参数
	//open方法有三个参数("发送方式"，"发送的目标"，"是否为异步")
	xhr.open("get","http://www.mei.com/appapi/ninenew/operational/v1?credential=485461278f8fd06ce3fe82d44f7ade2bb0f088ca80fce65fb67905ed89d0eacc44a7abedc40524cea6abdd407ff5b35d94beeca4bf11316e679df37aa78d0f42d837296f6d898fd86fa52e5ecc5f2a4951e677229f72a2fca882717e2df14dbb6d119cfee16c011fe825e3ca40c3df732402a39f03082269522dd9d9c860c580586a214d6fd1c3cfcab54c8e033aee58",true);

	//3.设置回调函数

	xhr.onreadystatechange = function(){
		if(xhr.status == 200 && xhr.readyState == 4 ){
				// 5.返回来的数据
				//console.log(xhr.responseText);
                //我去上面怎么返回字符串
                console.log(JSON.parse(xhr.responseText));
		}
	}

	//4.发送
	xhr.send();
	
</script>

如果需要向后端放送东西的话可以直接字符串拼接如果是多个的话用&连接也可以用字符串模板拼接

 xhr.open("GET","isUserExist.php?username="+t1.value,"true");

xhr.open("GET",`isUserExist.php?username=${t1.value}`,"true");

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="username" id="t1" /><span id="s"></span></br>
        <input type="text" name="pwd" />
    </body>
</html>
<script>    
    let t1 = document.getElementById("t1");
    let s = document.getElementById("s");
    t1.onblur = function() {
        //1.创建对象
        let xhr = new XMLHttpRequest();
        //2.设置连接地址   get方式发送响应
        xhr.open("POST", "isUserExistPost.php", "true");
        //这句话必须抄 post的请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //3.设置响应事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5.获取响应字符串
                if (xhr.responseText == "1") {
                    s.innerHTML = "用户名已存在，请重新注册";
                } else {
                    s.innerHTML = "恭喜注册成功";
                }
            }
        }

        //4.发送  通过send传递参数
        //多个参数依然用&组装 "user_name="+ userName +"&user_age="+ userAge ;
        xhr.send("username=" + t1.value);
    }
</script>

ajax-post

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名<input type="text" id="op">
    密码 <input type="text" id="ob">
    <button class="bt">Ajax-post</button>
</body>

</html>
<script>
    let op = document.getElementById("op");
    let obt = document.querySelector(".bt");
    let ob = document.getElementById("ob");

    obt.onclick = function () {
        let xhr = new XMLHttpRequest();

        xhr.open("post", "http://localhost:3000/post", "true");

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        }

        xhr.send(`uname=${op.value}&uid=${ob.value}`);
    }






</script>

fetch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/axios.js"></script>
</head>

<body>
    <button onclick="handclick()">fetch请求</button>
</body>

</html>
<script>

    //get
    function handclick() {
        fetch("json/text.json?uname=xiaoming&uid=2").then(res => res.json()).then(res => {
            console.log(res);
        })
    }

    //post--------------------------------------------------------------------------
    // json 格式向后端传参
    fetch("json/test.json", {
        method: "post",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            name: "kerwin",
            age: 100
        }) //请求体
    }).then(res => res.json()).then(res => {
        console.log(res)
    })

    //from 

    fetch("json.text.josn",{
        method:"post",
        headers:{
            "Content-type":"application/x‐www‐form‐urlencoded"
        },
        body:"uname=xiaoming&uid=1"
    }).then(res=>res.json()).then(res=>{
        console.log(res)
    })


</script>