什么是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也可以传参吗?
答案是: 可以的
注意点:
1. 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>