AJAX详解
1.1 AJAX简介
AJAX全称是Asynchronous JavaScript And XML, 就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新的方式。
AJAX的作用：
（1）实现页面懒加载；
（2）实现用户名校对，是否是重复用户名
（3）在搜索框中输入关键字是，显示与此关键字相关的关键字
1.2 XML简介
XML 可扩展标记语言
XML 被设计用来传输和存储数据
XML和HTML类似，不同的是HTML中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
AJAX在向服务发送请求后，服务器响应后会向前端JS发送XML文件，并进行解析，但是现在已经被JSON格式取代了。
1.3AJAX的特点
优点：
（1） 可以无需刷新页面与服务器进行通信。
（2） 允许根据用户事件来更新部分页面内容。
缺点：
（1） 没有浏览历史，不能回退
（2） 存在跨域问题（同源）
（3） SEO（页面优化）不友好
1.4 AJAX的状态
0（未初始化）还没有调用send（）方法
1（载入）已调用send（）方法，正在发送请求
2（载入完成）send（）方法执行完成，已接收到全部响应内容
3（交互）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用
1.5如何实现一个AJAX
Ajax创建异步对象XMLHttpRequest
操作XMLHTTPRequest对象
（1） 设置请求参数（请求方式，请求页面的相对路径，是否异步）
（2） 设置回调函数，一个处理服务器响应的函数，使用onreadystatechange
（3） 获取异步对象的readyState属性，该属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行
（4） 判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。
（5） 读取响应数据，可以通过responseText属性来取回由服务器返回的数据
以下代码时用AJAX完成一个get请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: 2px solid rgba(94, 14, 160, 0.877);
}
</style>
<script>
window.onload = function(){
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
btn.onclick = function(){
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/sever?a=100&b=200&c=300');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200&&xhr.status<300){
result.innerHTML = xhr.response
}else{
}
}
}
}
}
</script>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
</body>
</html>
|