前后端交互 - 10分钟了解 ajax

10分钟了解 ajax

前后端交互是一个大的概念，并不是说 ajax 等同于客户端交互。

什么是ajax

Ajax ：Asynchronous Javascript And XML （异步 JavaScript 和 XML）
XML：和JSON一样是目前主流的两种返还格式
ajax 是客户端交互的其中一种主流方式，其实质上就是一个封装起来的小工具。

特点

• 不需要全页面刷新（局部更新）即可实现数据传递更新
• 节省网络带宽网络资源（减少数据库使用量）

---

基本使用

• 实例化 ajax对象

	let xhr = new XMLHttpRequest(); 

• 创建请求并配置参数
  参数1：请求方式 get / post
  参数2：提交地址 自定义路由（可以传参，并在后端中进行审核等操作）
  参数3：异步 / 同步 true表示异步

	xhr.open( "get", `/checkeUserName?username=叮当&password=20`, true);

• 接受后端的数据 并处理

	xhr.onload = function () {
        // 返回的数据
        console.log(xhr.responseText);
        // xhr.responseText 的数据类型是字符串 需要转换数据类型
        let obj = JSON.parse(xhr.responseText);
      }

• 发起 必写（类似于 函数 必须调用才能生效）

	xhr.send();

---

数据传递方式

get

• 传参方式一 ：
  路由？属性名=属性值

	// 前端页面
	xhr.open("get", `/checkeUserName?username=${this.value}&age=20`, true);
---------------------------------------------------------------------------
	// 后端服务器
	router.get("/checkeUserName",(ctx,next)=>{
	    // 获取页面传递的数据 ctx.query
	    console.log(ctx.query);
	    // [Object null prototype] 是个对象但没有原型 
	})

• 传参方式二 ：
  页面部分写法： 路由 / 属性值
  后端服务器部分写法：

	xhr.open("get","/get/18",true);
---------------------------------------------------------------------------
	router.get("/get/:age",async ctx =>{
    	//  获取页面传递的数据 转变为 ctx.params
    	console.log(ctx.params)
    	ctx.body = {
        	status: 1,
        	info: "请求收到"
    	}
	});

post

使用post传参，是需要设置头部信息

• 第一种头部信息 默认值

	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

• 第二种头部信息 二进制 图片及文件上传

	xhr.setRequestHeader("content-type","multipart/form-data")

• 第三种头部信息 json格式 与第一种 差别不大

	xhr.setRequestHeader("content-type","application/json")

传递参数

• 方式一：

	//            /post?name='shen'
	xhr.open("post", "/post", true);
	// 但是在实际测操作中，并不推荐使用

• 方式二：

	let data = JSON.stringify({
		username:"我很难受",
		ps:"各种神奇的Bug"
	})
    // 传递的数据
    xhr.send(data)

get 和 post 区别

• get 效率更高点 | post数据量大
• get 是明文传参(头部) | post是密文传参（正文区域）

---

体验同步 异步

为了更好的实现异步效果，建议修改设置

• 后端服务器代码

	router.get("/get/:age",async ctx =>{
	    // 获取方式转变
	    console.log(ctx.params)
	    ctx.body = {
	        status: 1,
	        info: "请求收到"
	    }
	});

• 前端js代码

	<!-- 页面简单布局 -->
	<button>请求1</button>
    <button>请求2</button>

	<script>
        // 调整   加载速度
        // Network --> Online --> Slow 3G
        let btns = document.querySelectorAll("button");

        btns[0].onclick = function () {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "/get/18", true);
            xhr.onload = function () {
                console.log(xhr.responseText);
            }
            xhr.send();
        }

        btns[1].onclick = function () {
            console.log("按钮2");
        }
        
    </script>