如果大家学过Servlet的话那么你对Servlet访问服务器应该很了解了,就是浏览器发送请求给服务端的,服务端做出响应的是一个页面,例如 我们判断用户名是否存在的话
仅仅只需要传输用户名就可以了,但是我们会将页面所有参数都传到后台进行判断,这是所谓的同步传输,这样会浪费很多网络资源,并且当你等待后台响应的时候页面会显示的是空白页面。所以ajax解决的问题:当html页面仅仅需要判断一条数据的时候,我们还用之前的表单提交或者页面跳转的话,是将整个页面作为单位进行传输,这样会耗费大量的网路资源。所以就用ajax这门技术来帮我们解决这个问题。总的来书就是 异步传输,局部刷新
下面来具体说一下ajax(异步javaScript xml)的具体使用
<script type="text/javascript">
//首先的获取XMLHttpRequest对象 该对象是ajax的核心,它的作用是
1:发送异步请求
2:接受响应回来的数据
var xmlHttp;function createXMLHttpRequest() {
//本地浏览器是否支持ActiveX对象,返回对象为true,返回null为false
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//本地浏览器是否支持XMLHttpRequest对象
} else if (window.XMLHttpRequest) {
//作为一个JavaScript对象来创建
xmlHttp = new XMLHttpRequest();
}
}
//当页面加载完毕后执行下面方法体的代码
window.onload = function() {var btn = document.getElementById('btn');
//当btn按钮点击的时候触发
btn.onclick = function() {
//调用创建XMLHttpRequest对象的方法
createXMLHttpRequest();
//指定你要访问后台的链接 第一个参数 是请求方式 get post put 第二个是访问的url地址,第三个是true是异步传输,false是同步传输
xmlHttp.open("get", "firstServlet?text="+text.value, true);
//当使用post请求提交的时候需要添加下面一行代码并且参数可以在url后添加也可以在send方法中
// xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
//下面的一行代码是readyState(
readyState记录XMLHttpRequest对象的状态变化。
0 (未初始化) 新的XMLHttpRequest对象实例已建立,但是尚未初始化(尚未调用open方法)
1 (正在加载) 新的XMLHttpRequest对象实例已建立,尚未调用send方法 。
2 (已经加载) send方法已调用,但是当前的response状态未知
3 (交互中) 客户端已接收部分response中的信息,但是没有全部接受,这时通过responseXML或者responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过responseXML或者responseText获取完整的应答信息。
)
//onreadystatechange就是记录readyState的变化当该对象的值变化时调用rowback(回调函数)
xmlHttp.onreadystatechange = rowback
//正式发送请求;
xmlHttp.send(null);}
}
//上面所提到的回调函数的实现
function rowback() {
//当后台传输数据完毕的时候
if (xmlHttp.readyState==4) {
//status 服务器的HTTP状态码(200=OK 404=Not Found IE(1223) FireFox(204)=服务器没有信息返回
if(xmlHttp.status==200){
//用变量去接受响应回来的xml或者让text xml可以直接当做元素处理
var xml=xmlHttp.responseXML;
// var text=xmlHttp.responseText;
}
console.log(xmlHttp.readyState);
if (xmlHttp.readyState==4) {
if(xmlHttp.status==200){
var xml=xmlHttp.responseXML;
// var text=xmlHttp.responseText;
}