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

一、初识 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 = "https://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(); //最后发送的数据为：https://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 = "https://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){} }); 

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