使用AJAX访问后台数据的完整步骤，此代码为测试，仅供刚开始学习AJAX的同学使用，不与项目兼容

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

//1、创建xhr（XMLHttpRequest）

xhr= new XMLHttpRequest();

//请求状态码：请求没有发出，在调用open之前

alert(xhr.readyState);//0

//2、和服务器进行连接

//使用open这个方法进行连接，连接的时候传入参数，参数为从文本框中获取的zh

//get请求

xhr.open(“get”, “CheckZhServlet?zh=” + zh);

//请求状态码：请求已经建立，但是没有发出 在调用send之前

alert(xhr.readyState);//1

//post请求的应用

// xhr.open(“post”,“CheckZhServlet”,true);

// xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

//3、执行回调函数

//不能带有参数。否则会无法调用

xhr.onreadystatechange=pro;

//4、get发送数据

xhr.send(null);

//post请求发送数据

//xhr.send(“zh=”+zh)

}

}

//完成回调函数

function pro() {

//请求状态码：请求已经发出，正在处理中2

//请求已经处理，响应有数据，但是服务器没有完成响应3

//响应已经完成，浏览器可以访问服务器4

alert(xhr.readyState);//234

//在服务器加载的过程中，我们只需要让第4步加载之后，响应数据即可

if (xhr.readyState==4){

//再根据状态码进行判断，如果是其他状态码就直接阻止进入

if (xhr.status==200){

//接收ajax响应数据

var t = xhr.responseText;

alert(t)

//把相应的值赋值给显示标签

document.getElementById(“span_zh”).innerText=t;

}

}

}

用户名：

账号：

后端交互，模拟数据库查询

@WebServlet(“/CheckZhServlet”)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！