Web前端Javascript笔记（8）Ajax前后端交互
认识Ajax
全名Asynchronous Javascript and XML（异步JavaScript和XML），节省用户操作时间，提高用户体验，减少数据请求，传输获取数据。Ajax相当于前后台数据交互的搬运工
xml数据传输格式：
优点:
1. 种类丰富
2. 传输量大
缺点：
1. 解析麻烦
2. 不太适合轻量级数据
json数据传输格式：（移动端）
优点：
1. 轻量级数据
2. 解析比较轻松
缺点：
1. 数据种类少
2. 传输数据量少
同步：阻塞，当前程序的运行，必须等前一个程序运行完以后，才能运行。
异步：当前程序的运行不用等待前一个程序
<script>
window.onload = function () {
let tag_btn = document.getElementById("btn1");
tag_btn.onclick = function () {
let ajax = null;
if(window.XMLHttpRequest) // 做浏览器兼容 IE8以下不兼容
{
ajax = new XMLHttpRequest(); // 创建一个Ajax对象
}
else
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
// 调用open(method, url, bool)方法
// 参数： method: 请求方式 post, get
// 参数： url: 请求的文件地址
// 参数： bool: true 异步 false: 同步
ajax.open("get", "../data/test.txt", true);
// 调用send()方法，发送请求
ajax.send();
// 等待数据响应
ajax.onreadystatechange = function () {
if (ajax.readyState === 4)
{
alert(ajax.responseText);
}
}
}
}
</script>新的ajax兼容方法：
try...catch{}
<script>
window.onload = function () {
let tag_btn = document.getElementById("btn1");
tag_btn.onclick = function () {
let ajax = null;
try // 做浏览器兼容 IE8以下不兼容
{
ajax = new XMLHttpRequest(); // 创建一个Ajax对象
// throw new Error("异常信息"); // 同时可以抛出异常
}
catch (e) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
// 调用open(method, url, bool)方法
// 参数： method: 请求方式 post, get
// 参数： url: 请求的文件地址
// 参数： bool: true 异步 false: 同步
ajax.open("get", "../data/test.txt", true);
// 调用send()方法，发送请求
ajax.send();
// 等待数据响应
ajax.onreadystatechange = function () {
if (ajax.readyState === 4)
{
alert(ajax.responseText);
}
}
}
}
</script>Ajax的onreadyStateExchange
在ajax中，onreadyStateExchange是一个事件，当readyState发生变化的时候，会触发这一事件，readyState一共有5个值，0~4
0：(初始化)还没有调用open()方法
1：（载入）已调用send()方法，正在发送请求
2： (载入完成)send()方法完成，已收全部响应内容
3：（解析）正在解析响应内容
4： （完成）响应内容解析完成，可以在客户端调用了
responseText: 以文本的格式返回数据
responseXML：以XML数据格式返回数据
status状态码：
200：下载成功
404：不存在
ajax中get与post请求：
get请求： 将数据拼接到url后面进行提交，参数通过查询字符串的方式传递，这样不安全，且地址栏的数据大小是有限的(最大2k),所以无法完成上传资源。
post请求：不把数据拼接到url后面，通过浏览器内进行提交，更加安全。理论上没有大小限制，适合完成上传任务。
ajax函数的封装
为了使得ajax能够适应各种请求，所以对ajax进行封装
// ajax请求进行封装
function $ajax({method, url, data}) {
let ajax = null;
try // 做浏览器兼容 IE8以下不兼容
{
ajax = new XMLHttpRequest(); // 创建一个Ajax对象
}
catch (e) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method === "get" && data)
{
url += "?" + data; // get方法需要将请求参数拼接到url上面
}
ajax.open(method, url, true);
if (method === "get")
{
ajax.send();
}
else
{
// post方法的话需要设置请求头
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send(data);
}
ajax.onreadystatechange = function () {
if (ajax.readyState === 4)
{
if (ajax.status === 200)
{
alert(ajax.responseText);
}
else
{
alert("Error: " + ajax.status);
}
}
};
}回调函数：
不同的下载需求，对于数据的处理是不同的，所以需要写一段专门处理数据的代码，这段代码可以称为回调函数，回调函数的作用就是将一段代码作为参数，传递到函数里面，在合适的地方进行调用。
// ajax请求进行封装
function $ajax({method, url, data, success, error}) {
let ajax = null;
try // 做浏览器兼容 IE8以下不兼容
{
ajax = new XMLHttpRequest(); // 创建一个Ajax对象
}
catch (e) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method === "get" && data)
{
url += "?" + data; // get方法需要将请求参数拼接到url上面
}
ajax.open(method, url, true);
if (method === "get")
{
ajax.send();
}
else
{
// post方法的话需要设置请求头
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
ajax.send(data);
}
ajax.onreadystatechange = function () {
if (ajax.readyState === 4)
{
if (ajax.status === 200)
{
if (success) // 判断如果传入了回调函数，则调用回调函数
{
success(ajax.responseText); // 执行下载成功的回调函数
}
}
else
{
if (error) // 判断是否传入了下载失败的回调函数
{
error(ajax.status); // 调用回调函数
}
}
}
};
}
JSON对象
数据在前端后端之间进行传输，需要将前端，后端中的数据结构，打包成一种传输效率更高的形式，即字符串。
系统提供了JSON对象，用于抓换JSON格式的数据
1. stringify()：用于将JSON格式的数据转化为JSON格式的字符串
2. parse()：用于将JSON格式的字符串转化为对应的格式
<script>
let arr = [1,2,3,"hello"];
let new_data = JSON.stringify(arr);
alert(typeof new_data);
let str = '[1,2,3,"hhh"]';
let new_arr = JSON.parse(str);
alert(new_arr);
let obj = {
name: "li",
age: 22,
sex: "female"
};
let new_arr1 = JSON.stringify(obj);
alert(new_arr1);
</script>
