1.AJAX详解
在学习HTTP协议的时候,我们知道,HTTP协议基于请求响应模型,一次请求对应一次响应,请求只能由客户端发出,服务器只能被动的等待请求。
但我们经常见到如下的功能:
网络聊天室里,聊天信息,不需要刷新页面就可以接受最新的聊天消息。
网站注册时,输入用户名后无需提交立即提示用户名已经存在。
百度输入搜索条件时,根据输入的不同提示不同的备选查询内容。
本质上就是通过js技术 背着浏览器 在不影响当前浏览器对当期页面的访问的情况下 偷偷的和服务器通信的技术
在这些应用场景中,我们没有刷新网页,却获取到了服务器发回的最新数据。这不是很明显的违反了HTTP协议了吗?
其实这不是违反了HTTP协议,而是使用了一种“另类”的技术,叫做AJAX(Asynchronous JavaScript and XML)。改变了传统方式的同步刷新方式,改为了异步刷新—即在保持当前页面的情况下,异步发出请求等待响应,再根据得到的响应消息修改当前页面。
虽然看起来像是服务器主动将数据发给了浏览器 违背了http协议,但其实并不是这样,ajax仍然是由客户端通过js主动发送请求 浏览器做出响应 客户端收到响应有 再通过js来修改页面的部分内容,是完全符合http协议的。
Ajax并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
XMLHttpRequest对象方法
XMLHttpRequest对象属性
想要实现Ajax需要如下几个步骤
//1 创建XMLHttpRequest对象 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } //2.服务器端向客户端进行响应(注册监听) var data = null; var xhr = ajaxFunction(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200||xhr.status==304){ data = xhr.responseText; } } } readyState 属性表示Ajax请求的当前状态。它的值用数字代表。 0 代表未初始化。 还没有调用 open 方法 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用 2 代表已加载完毕。send 已被调用。请求已经开始 3 代表交互中。服务器正在发送响应 4 代表完成。响应发送完毕 xhr.status 常用状态码及其含义: 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200 一切正常(ok) 304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 ) xhr.responseText 服务器发回的响应结果,字符串 xhr.responseXML 服务器返回的响应结果,XML对象 //3 客户端与服务器端建立连接 * 使用的是XMLHttpRequest对象的open(method, url, asynch)方法 * * method:请求类型,类似 “GET”或”POST”的字符串。 * * url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。 * * asynch:表示请求是否要异步传输,默认值为true(异步)。 xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true); //4 客户端向服务器端发送请求 * * 使用的是XMLHttpRequest对象的send()方法 * * 如果请求类型是GET方式的话,使用send()方法发送请求数据,服务器端接收不到 * * 该步骤不能被省略,只能写成xhr.send(null); */ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ~GET方式: xhr.send(null); //xhr.send(null); ~POST方式:如果请求类型是POST的话,需要设置请求首部信息 xhr.send("a=7&b=8");
jquery方式实现Ajax
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); $.get("test.php?name=John&location=Boston", function(data){ alert("Data Loaded: " + data); }); $.post("test.php",{"name":"John","location":"Boston"}, function(data){ alert("Data Loaded: " + data); })
1.1.AJAX实现检查用户名是否已经存在
开发检查用户名是否已经存在的Servlet
在用户输入用户名后,触发js代码,用AJAX技术将用户名提交到Servlet中检查用户名。