AJAX笔记
Posted 过往将来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX笔记相关的知识，希望对你有一定的参考价值。
Ajax简介
- Ajax不是编程语言,它组合了浏览器内建的XMLHttpRequest对象(从 web 服务器请求数据）,通过javascript显示或使用数据
- Ajax 通过与 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面
Ajax的作用
- 在不刷新页面的情况下更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务发送数据
Ajax工作过程
- 网页中发生一个事件（按钮点击）
- 由 JavaScript 创建 XMLHttpRequest 对象
- XMLHttpRequest 对象向 web 服务器发送请求
- 服务器处理该请求
- 服务器将响应发送回网页
- 由 JavaScript 读取响应
- 由 JavaScript 执行正确的动作（比如更新页面）
Ajax-XMLHttpRequest对象
- Ajax 的核心是 XMLHttpRequest 对象。
- 所有的现代浏览器都支持XMLHttpRquest对象,
- XMLHttpRquest对象用于和服务器交换数据
Ajax实例分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width:200px;
height:100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3. 发送请求 xhr.abort()取消请求
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4,在 readystate = 4 代表数据全部返回 , 0 无数据返回
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
console.log('数据请求失败')
}
}
}
}
</script>
</body>
</html>
XMLHttpRequest 对象方法
var xhr = new XMLHttpRequest()创建新的 XMLHttpRequest 对象xhr.abort():取消当前请求xhr.open(mehtod,url,async,user,psw):
method：请求类型 GET 或 POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码xhr.send():将请求发送到服务器,用于GET请求xhr.send(string):将请求发送到服务器,用于POST请求
XMLHttpRequest 对象属性
xhr.onreadystatechange = function(....):定义当 readyState 属性发生变化时被调用的函数xhr.readyState:保存XMLHttpRequest 的状态。xhr.readyState有四种状态
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪xhr.status:返回请求的状态号
200-300之间的状态号代表: “OK”
404: “Not Found”
以上是关于AJAX笔记的主要内容，如果未能解决你的问题，请参考以下文章