前后端数据交互ajax ，包括原生js的ajax,以及jquery中的ajax的使用(一)

一、初识 ajax

ajax 是Asynchronous Javascript And XML四个单词的简写，粗略翻译为：异步的Javascript 和 XML.
1.异步：代表的是前端向后台发起请求，让后端处理完成，然后再返回一段数据，前端拿到返回的数据后需要做一系列的处理，前端处理这些数据就是异步的行为。（那一瞬间你没有数据，等后端处理完成才能回头处理你的事件）
2.javascript: 这就不多说了，你懂的。
3.XML:标记语言，写法和html还很类似，但XML名字可以随便取。XML用来存放数据，前端用XML的格式发送数据给后端，后端也发送XML格式数据给前端，前段也好处理（相当于中介，用于数据交互的文件格式）。但是现在，我们大部分用Json数据格式(前后端数据交互的手段)，前端发送字符串，后端拿上，处理成对象的形式。
Json格式如下：

//类似写对象的键值对写法，属性名必须为用双引号引起来的字符串
let arr = '[{"name" : "xioakonglong","age" : 22},{"name" : "lanbai","age" : 20},{"name" : "Tony","age" : 24}]'

还有一种用于前后端数据交互的手段是用的 form表单 ，与ajax不同的是，form表单提交后会跳转到提交地址，ajax是不会影响当前页面的显示的，不会刷新，不会跳转，是在javascript中完成数据的发送与接收（好处就是，在不刷新页面的情况下可以局部更新某一块）。
ajax最典型的应用是：你注册一个百度账号，在填写手机号的时候，你的数据会被ajax（前端）提交到后端，然后从数据库中发现你已经注册过了，后端发送对应的数据给前端，前端就给你个弹窗，该手机号已注册，可以通过快捷方式登陆（页面没有跳转）。

二、原生 js 发送ajax请求

//1.创建xhr对象,用来发送ajax请求和接收数据
let xhr =  new XMLHttpRequest();
/*
2.创建请求对应的各种信息
	参数一：请求的类型： get / post (后端大大说了算，get会把连接放在后面，post不会放在后面)
	参数二：请求的地址
	参数三：是否异步(99%为true，需要异步)
*/
xhr.open("get",“http://www.lanbai.fun”,true);
/*
3.发送请求
	需要处理一下数据格式
	发送请求
*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//固定写法，处理数据格式
xhr.send();

下面模拟一下发送（get）：

let sendData = {
name : "lanbai",
age : 18
};
let xhr =  new XMLHttpRequest();
let url = "http://www.lanbai.fun";
url += "?";
for(let [key,value] of Object.entries(sendData)){
url += `${key}=${value}&`;
}
xhr.open("get",url,true);
//固定写法，处理数据格式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send();

//最后发送的数据为：http://www.lanbai.fun？name=lanbai&age=18&"

下面模拟一下发送（post）：

let sendData = {
name : "lanbai",
age : 18
};
let xhr =  new XMLHttpRequest();
xhr.open("post",url,true);
let url = "http://www.lanbai.fun";
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
let d = "";
for(let [key,value] of Object.entries(sendData)){
d += `${key}=${value}&`;
}
xhr.send(d);

readyState:
0：请求未初始化
1：请求已经建立（open）
2：请求已经发送（send）
3：请求正在后端处理
4：请求已经处理完 成，并且响应结束（我们最关心的状态，数据给你前端了，你要继续执行了）

//监听状态
xhr.onreadystatechange = function(){
if(this.readyState !== 4 && xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) return;
//能够获取数据了
console.log(this.responseText);//后端返回的数据
}

三、jq的ajax（使用）

1.什么时候需要使用ajax?
前端传数据给后端，后端传输给前端（前后端数据交互时）使用。
2.建立ajax
上面原生js发送ajax
原生的极其难用，get与post不一样，还要判断很多，大家都使用的jquery封装好的ajax（也可以进行封装）.
ajax使用：

//引用jq
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
//$为变量名，自己就不要用&命名了
//传一个对象格式，写键值对格式
$.ajax({
	//请求类型
	type : "GET",
	//请求的地址
	url : "https://xxxxxxxx",
	//请求的数据
	data : {
		keywords : "xxx"
	},
	//返回的数据格式预处理
	//dataType : "json",
	//成功的回调函数，第一个形参代表返回的数据
	success : function(msg){},
	error : function(err){}
});

未完待续。。。
小编刚开始学习写博客，有错误欢迎各位大大指出哦 ^_^...