ajax手动封装

什么是Ajax(Ajaj)? ajax(Asynchronous JavaScrip and XML 异步的javascript和xml)
可实现异步、局部的获取数据

XML格式 和 json格式: 虽然是说ajax，但是现在很少使用XML格式了，因为不方便操作，我们使用json格式，它和javascript语法很像，操作起来很方便。

json格式: 类似对象被大括号包围，并且键和值都都需要被双引号包裹(除了number值和boolean值);

json格式字符串: 这个和json格式唯一的区别仅仅是它是json格式的字符串,多了一对单引号。

JSON.parse(data) // json格式字符转json

JSON.stringify(data) // json转字符串

// 1. json格式
var data = {
    "name": "aimee",
    // number和booleam值可以不需要双引号
    "age": 18
}
JSON.parse(data)     // json格式字符转json
JSON.stringify(data) // json转字符串

// 2. XML格式
<name>aimee<name>
<age>18<age>

get请求: 通常用来获取数据
post请求: 通常用来上传数据

封装Ajax:
条件:

1. web浏览器
2. ajax对象
   xml = new XMLHttpRequest()
3. 初始化HTTP请求参数(请求方式,地址,同步异步)
   xml.open()
4. 发送请求
   xml.send()
5. 监听数据
   readyState发生改变的时候出发onreadystatechange事件
   readyState五种状态:
   0-(未初始化) 还没有调用send()方法
   1-(载入) 已调用send()方法,正在发送请求
   2-(载入完成) send()方法执行完成,已经接收到全部响应内容
   3-(交互) 正在解析响应内容
   4-(完成) 响应内容解析完成,可以在客户端调用了
6. 检查数据 使用
   xml.status
   HTTP状态码 xml.status
   100: 信息类,表示web浏览器请求,正在进一步处理中
   200: 成功,表示用户请求被正确接收正在进一步处理中 200 OK
   300: 表示没有请求成功,客户端必须采取进一步的动作
   400: 客户端错误,表示客户端提交的请求错误 列如:404 NOT Found
   500: 服务器错误 表示服务器不能完成对请求的处理,如:505

基础ajax.js文件之get示范
注意点:
XMLHttpRequest在IE7以上才出现，要做好以前浏览器的兼容处理；

function ajax() {
 // ajax对象兼容处理
 var xml = null;
 if(window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
 // new ajax对象
 // 火狐、谷歌及IE7以上等的浏览器才支持
    }else{
        xml = new ActiveXObject('Microsoft.XMLHttp');
 // IE6及以下支持的插件
    }
 // 第二步已完成

 xml.open('GET', './getNews.php', true)
 // 可选GET/POST/DELETE(通常用于删除)
 // 接口地址
 // true 异步; false 同步(不建议使用)
 // 第三步已完成

 xml.send();
 // 发送请求
 // 第四步已完成

 xml.onreadystatechange = function() {
  console.log(xml.readyState)
  if(xml.readyState == 4) {
  // 监听完成
  // 第五步已完成

   if(xml.status == 200) {
   // 请求成功
   // 第六步已完成,剩余的处理数据
    console.log(xml.responseText);
    // 回来的数据
    console.log(JSON.parse(xml.responseText));
    // json格式字符串转json格式(需要可选项)

    // 处理数据的回调函数
    cbs(xml.responseText)
            }
        }
    }
}

// 回调函数(处理数据拼接到DOM节点上)
function cbs(val) {
 var oUl = document.getElementsByClassName('box')[0];
 var data = JSON.parse(val);
 var str = '';
 data.forEach(function(ele, index) {
        str += `<li>${ele.date} ${ele.title}</li>`
 
    })
 oUl.innerHTML = str;
}

POST配置: 上传参数
传值格式: username=aimee&age=18
拼接的字符串在第四步xml.send(data)这里上传
比get多xml.setRequestHeader()这个参数,告诉服务器编码格式

document.getElementsByClassName('btn')[0].onclick = function() {
 dom()
}

function dom() {
 var input1 = document.getElementsByTagName('input')[0];
 var input2 = document.getElementsByTagName('input')[1];
 
 var value1 = input1.value;
 var value2 = input2.value;
 // 获取文本框数据

 // 传值格式: username=aimee&age=18
 var str = `username=${value1}&age=${value2}`;
 // 字符串拼接
 // 拼接这个的原因是为了传值
 ajax(str);
 // 把字符串传入ajax
}

function ajax(data) {
 var xml = null;
 if(window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    }else{
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }

 xml.open('POST', './post.php', true)

 xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
 // 设置请求头 告诉服务器使用什么编码
 xml.send(data);
 // 传进来的拼接字符串在这部发送出去

 xml.onreadystatechange = function() {
  console.log(xml.readyState)
  if(xml.readyState == 4) {
   if(xml.status == 200) {
    console.log(xml.responseText);
    cbs(xml.responseText)
            }
        }
    }
}

// 回调函数(处理数据)
function cbs(val) {
 console.log(val)
}

GET配置: 那GET也可以传参吗？

答案是: 可以的

注意点:

get请求传参拼接在url+?后方

function ajax(data) {
 var xml = null;
 if(window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    }else{
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }

 xml.open('GET', './getNews.php?'+data, true)
 // xml.open('GET', './getNews.php?page2&age=18', true)
 // get请求传参拼接在url+?后方
 
 xml.send();
 // 发送请求,在第三步操作即可,此步不需要传参
 
 xml.onreadystatechange = function() {
  console.log(xml.readyState)
  if(xml.readyState == 4) {
   if(xml.status == 200) {
    console.log(xml.responseText);
    console.log(JSON.parse(xml.responseText));
    cbs(xml.responseText)
            }
        }
    }
}

// 回调函数(处理数据)
function cbs(val) {
 var oUl = document.getElementsByClassName('box')[0];
 var data = JSON.parse(val);
 var str = '';
 data.forEach(function(ele, index) {
        str += `<li>${ele.date} ${ele.title}</li>`
 
    })
 oUl.innerHTML = str;
}

终极大招: 封装Ajax
注意点:

多次使用get请求同一个地址，会产生缓存,post请求不会产生缓存,解决办法: 使用随机数或时间戳(这个更适合)
防止有时候浏览器不认get、post的小写。兼容一下: method = method.toUpperCase();

document.getElementsByClassName('btn')[0].onclick = function() {
 // 提交(使用post请求)
 dom()
}
document.getElementsByTagName('button')[0].onclick = function() {
 // 获取新闻列表(使用get请求)
 ajax('GET', './getNews.php', getCbs, '', true)
 // 多次使用get请求同一个地址，会产生缓存
 // post请求不会产生缓存
}

// 封装的ajax主体
function ajax(method, url, callback, data, flag) {
 var xml = null;
 if(window.XMLHttpRequest) {
        xml = new XMLHttpRequest();
    }else{
        xml = new ActiveXObject('Microsoft.XMLHttp');
    }

 // ajax对象也new了，接下来判断是GIT还是POST请求
    method = method.toUpperCase();
 // 兼容大小写
 if(method == 'GET') {
 var date = new Date();
        timer = date.getTime();
 // 为了使内容实时刷新，我们加一个随机参数，其实时间戳更好
 xml.open(method, url+'?'+data+'&timer='+timer, true, flag);
 xml.send();
    }else if(method == 'POST') {
 xml.open(method, url, true, flag)
 xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 xml.send(data);
    }

 xml.onreadystatechange = function() {
 console.log(xml.readyState)
 if(xml.readyState == 4) {
 if(xml.status == 200) {
 callback(xml.responseText)
 console.log("B")
            }
        }
 
    }
}

function dom() {
 var input1 = document.getElementsByTagName('input')[0];
 var input2 = document.getElementsByTagName('input')[1];
 
 var value1 = input1.value;
 var value2 = input2.value;
 // 传值格式: username=aimee&age=18
 var str = `username=${value1}&age=${value2}`;
 ajax('POST', './post.php', postCbs, str, true);
 // 请求方式
 // 接口地址
 // 回调函数
 // 传拼接参数
 // 同步异步
 

}


// 回调函数
function getCbs(val) {
 var oUl = document.getElementsByClassName('box')[0];
 var data = JSON.parse(val);
 var str = '';
 data.forEach(function(ele, index) {
        str += `<li>${ele.date} ${ele.title}</li>`
 
    })
 oUl.innerHTML = str;
}
function postCbs(val) {
 console.log(val)
}

以下是html文件:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
    姓名: <input type="text">
    年龄: <input type="text">
    <input type="submit" class="btn">
    <button>获取新闻列表</button>
    <ul class="box"></ul>
 <!-- <script src="./ajax.js"></script> -->
 <!-- <script src="./ajax_post.js"></script> -->
    <script src="./ajax_package.js"></script>
    <script>
 // ajax();
    </script>
</body>
</html>