前后端数据交互ajax ，包括原生js的ajax,以及jquery中的ajax的使用(一)
170 浏览量
2021-01-08
11:18:54
上传
评论
收藏 70KB PDF 举报
前后端数据交互前后端数据交互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}&`;
}
资源评论
