关于ajax
1. 基础知识
- 网络协议： 通讯的标准
- 应用层协议： http, https, ftp, ...
http: 协议分两种 //无状态协议
- 请求行
- 请求头
- 请求体
- 请求方法： get/post(delete put...)
- get: //没有请求体
- 给服务器传递数据是把数据附加在url中来进行传递
- 传送是数据在url地址栏可以看到
- post: //有请求体
- 把给服务器传递的数据放在请求体中，不会在地址看到
- 一般是传送查询参数的时候使用get，传送表单数据的使用post
- 响应协议
- 响应行：
- 响应码：
- 200 ok
- 304 还在加载中。
- 404 请求的资源没有找到
- 505 请求的资源找到了，但是服务器内部错误
- 响应头：
- 响应体：
- xml: 可扩展标记语言
- asynchronous: 异步技术
2. ajax的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">创建ajax请求</button>
<script>
btn.onclick = function (){
/*第一步: 创建一个 XMLHttpRequest 对象 相当于在电脑安装了一个浏览器*/
var xhr = new XMLHttpRequest();
/*第二步: 调用xhr的open方法
参数1:请求方法
参数2:请求的资源的url
参数3: 布尔值. 表示是是否使用异步技术
true表示异步, false表示同步.
如果省略, 表示异步
*/
xhr.open("GET", "a1.html", true);
/*第三步: 监听事件, 将来数据来到之后的事件
0: xhr对象创建了, 还没有open
1: xhr调用了open方法, 还没有调用send方法
2: 调用了send, 还没有开始结束数据
3: 开始响应数据, 但是还没有响应完.
4: 数据响应完毕.(可以是正常响应, 也可是404没有找到资源, 也可以是500服务器异常)
*/
xhr.onreadystatechange = function (){
if (xhr.readyState == 4){
// status 状态码: 200, 404, 500
if (xhr.status == 200 || xhr.status == 304){ // 正常的处理流程
var msg = xhr.responseText; // 响应到的数据, 返回值都是字符串 DOMString
console.log(msg);
}else{ // 异常的处理流程
console.log("这次请求失败, 请重试!");
}
}
}
/*第四步: 向服务器发送请求
如果是get请求, 则需要传入参数null
如果是post请求, 则传递需要传给服务器的数据
*/
xhr.send(null);
}
</script>
</body>
</html>
3. ajax请求json数据
var xhr = new XMLHttpRequest();
xhr.open("GET", "data1.json", true);
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
// 请求到的是json格式的数据, 需要把json格式的数据转换js对象或者数组
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
}
}
xhr.send(null);
4. 使用自定义的ajax框架
<script>
ajax.get("data1.json?username=lisi&pwd=aaa&a=b&b=c", function (content, xhr){
// 写响应成功之后的回调
var obj = JSON.parse(content);
console.log(obj);
});
</script>
5. ajax_post请求
ajax.post("data1.json", "a=b", function (content, xhr){
console.log(content);
})
6. 案例_动态菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="my_ajax.js"></script>
<style>
.menu{
height: 50px;
list-style: none;
}
.menu li{
width: 100px;
height: 50px;
background-color: lightgray;
margin-left: 10px;
float: left;
text-align: center;
line-height: 50px;
transition: all 0.5s;
}
.menu li:hover{
background-color: pink;
font-size: 20px;
height: 60px;
}
</style>
</head>
<body>
<ul class="menu">
</ul>
<script>
var ul = document.querySelector(".menu");
ajax.get("menu.json", function (content, xhr){
var menus = JSON.parse(content);
for(var menu of menus){
createLi(menu.name, ul)
}
})
/*创建一个li, 并把指定的文本插入到li的内部*/
function createLi(text, parent){
var li = document.createElement("li");
li.innerHTML = text;
parent.appendChild(li);
}
</script>
</body>
</html>
7. 附加
send_btn.onclick = chat;
document.onkeydown = function (e){
if (e.keyCode == 13){
chat();
}
}
/*让指定的元素自动滚动*/
function autoScroll(ele){
setTimeout(function step(){
var top = ele.scrollTop;
ele.scrollTop = top + 4;
if (top == ele.scrollTop) return;
setTimeout(step, 20);
}, 0)
}
var ajax = {
get: function (url, successCallBack, failCallBack) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
if(typeof successCallBack == "function"){
successCallBack(xhr.responseText, xhr);
}
}
}else{
if(typeof failCallBack == "function"){
failCallBack(xhr.responseText, xhr);
}
}
}
xhr.send(null);
},
post: function (url, data, successCallBack, failCallBack) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
if(typeof successCallBack == "function"){
successCallBack(xhr.responseText, xhr);
}
}
}else{
if(typeof failCallBack == "function"){
failCallBack(xhr.responseText, xhr);
}
}
}
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
}
}
网友评论