<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ajax的最重要</title>
</head>
<body>
对于Ajax：Asynchronous JavaScript And Xmml来实现异步请求
作用：
运用Ajax，通过刷新页面验证账号是否存在
对于传统的方法：需要提交数据并刷新页面来获知用户名是否存在
<p>实例</p>
<h3>Tradition</h3>
<form action="https://blog.csdn.net/miss_ll/article/details/79053608">
输入账号
<input type="text" name="name" value="abc"/>
<input type="submit" value="是否验证成功"/>
</form>
<h3>Ajax</h3>
<span>输入账号：</span>
<input type="text" id="name" name="name" onkeyup="check()" />
<span id="checkResult"></span>
1.Ajax的分布解析——请求和相应的图示
对于浏览器向服务器传递的步骤;
First:创建XMLHttpRequest
Second:设置响应函数
Third:设置访问页面
Fourth:执行访问
服务器向浏览器：
1.调用响应函数
2.判断是否响应成功
3.获取相应文本
4.显示相应文本
2.创建XHR线程——这一步肥肠的重要
XHR：XMLHTTPRequest
XHR其实就是JavaScript的的一个对象，可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据的交互
Ajax就是通过它做到无刷新的效果
3.设置响应的函数
XHR对象的作用是和服务器进行双向的交互，刚才的创建，对于服务器响应回来的数据，调用该怎么处理
运用的函数：xmlhttp01.onreadystatechange=checkResult就可以用你指定的函数checkResult来进行处理
4.设置并发出请求
通过 open 函数设置背后的小线程，以及将要访问的页面url,》》》xmlhttp.open("GET",url,true)就如刚才当中的代码运用send函数进行实际的访问
在这里我进行明确的说明：xmlhttp.send(null)当中的null表示没有参数，因为参数已经通过“GET”的方式放在URL中
那这个函数是用来干嘛的呢？
在运用于“POST”的，而且自己需要去进行发送参数的时候，才会使用send函数
eg: xmlhttp.send("user="+useName+"&password="+pwd)
5.处理响应信息
function checkResult(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('CheckResult').innerHtml=xmlhttp.response Text;
}
}
Specification：xmlhttp.readState 4代表的是请求已经完成（为啥是4：因为第四步骤是发出请求的步骤哦）
若是0：代表的是请求未初始化 1：代表的是服务器端的连接已经建立 2：请求已接收（并不是代表完成，自己在这踩过坑） 3：请求正在处理中
xmlhttp.status 200代表的是响应成功（200.。。。）
xmlhttp.responseText：用于获取服务器端传回来的文本
document.getElementById('checkResult').innerHTML设置span的内容为服务器端传递回来的文本
<script>
var xmlhttp;
function check(){
var name=document.getElementById("name").value;
var url="https://examples.bootstrap-table.com/#extensions/treegrid.html";
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=checkResult;//响应函数
xmlhttp.open("GET",url,true);//设置访问的页面
xmlhttp.send(null);//执行访问
}
function checkResult(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
var xmlhttp01=new XMLHttpRequest();
document.write(xmlhttp01);
</script>
</body>
</html>