。(一)初步认识ajax:中文又称作“啊甲思”,英语是:asynchronous javascript and xml (翻译为 js跟xml的异步),其实底层还是js。其中最大最大最大的特点就是页面的不刷新
1. AJAX=HMTL+CSS+JS+DOM+XHR 等多种技术的一个总和
2. 传统的一个web是一个请求—>等待响应—>请求—->等待响应的过程。这叫做同步
3. 现代Web应用是以请求->请求->请求->响应->响应->响应->…,叫异步请求/操作
可以列举几个ajax使用的例子加深印象:
1. 传统的注册表单时,验证用户名是否唯一。需要点击注册之后才会到数据库验证。而使用ajax时,可在文本框失去焦点的时候就去数据库验证。更符合现在web需求
2. 无刷新的分页。
3. 百度搜索框输入文本时,未提交就有提示的效果。看下面插图…..等等应用
总结来说:也就是,当你需要局部请求服务器而不是全局请求服务器的时候,就可以考虑一下ajax
(二)ajax的使用
这里我特别个人推荐是:看手册学习。截个图
1:创建ajax
//包括IE7以上版本的浏览器
var xhr = new XMLHttpRequest();
//IE(6/7/8)方式 ,这里大小写不敏感
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”); //最原始方式
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”); //升级
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”); //升级
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5.0”); //升级
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”); //最高版本方式
//因此个人是这样创建的
function createXHR(){
var xhr = null;
try{
xhr = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
xhr = new XMLHttpRequest();
}catch(e){
window.alert("你的浏览器太差");
}
}
return xhr;
}
2:开发步骤
- 创建一个 ajax对象 。方法在上面
- 利用open方法准备发送一个请求。xhr.open(“get/post(请求方式)”,”请求的网址路径”,false/true同步或者异步)
- 利用send方法确实发送了这个请求。如果是get请求的话,那么xhr.send(null),如果是post请求的话,xhr.send(“参数”)
- 接受返回的信息。利用状态监听。虽然这里是第四步骤,但是习惯把这个写在第二布的位置
(三)直接上案例咯
1:动态返回时间 java代码哦
<body>
<input type="button" value="ajax体验,请点击我"/>
<hr/>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
var inputElement = document.getElementsByTagName("input")[0];
inputElement.onclick=function(){
//创建AJAX引擎对象
var xhr = createXHR();
//为AJAX引擎对象设置状态改变事件[0-4共5个]
xhr.onreadystatechange = function(){
//如果请求和响应已经完成
if(xhr.readyState==4){
//响应是否正确
if(xhr.status==200){
//取得AJAX引擎的响应结果
var msg = xhr.responseText;
//查询<div>标签
var divElement = document.getElementsByTagName("div")[0];
//将内容写入<div>标签内
divElement.innerHTML = msg;
}
}
}
//准备发送异步请求到服务端
xhr.open("get","/ajax/AjaxServlet");
//真正发送异步请求
xhr.send(null);
}
//根据不同浏览器创建AJAX引擎对象
function createXHR(){
var xhr = null;
//如果是IE
if(window.ActiveXObject){
xhr = new ActiveXObject("microsoft.xmlhttp");
//如果非IE
}else{
xhr = new XMLHttpRequest();
}
return xhr;
}
</script>
AjaxServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("AjaxServlet::doGet()");
String msg = new Date().toLocaleString();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(msg);
}
2://Get方式 + 动态检查用户名是否合法
Get方式说明:
①在url地址后边以请求字符串(传递的get参数信息)形式传递数据。
② 对中文、=、&等特殊符号处理
=、&符号在浏览器里边会与请求字符串的关键符号有混淆,避免歧义产生需要对其进行编码.
在php里边可以函数函数 urlencode()/urldecode()对特殊符号进行编码、反编码处理
(url_encode()可以把中文转变为浏览器可以识别的信息。转变之后的信息具体为%号后接两个十六进制数)
在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。
特别注意一点是:这里采用的以字符串的形式接受返回的数据,说以msg = xhr.responseText。下面的post就是以xml的方式返回
<body>
输入用户名:<input type="text"/>光标移出后,立即查检结果
<hr/>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
document.getElementsByTagName("input")[0].onblur=function(){
//取得用户输入的用户名
var username = this.value;
//对中文编码
username = encodeURI(username);
//创建AJAX引警对象
var xhr = createXHR();
//设置函数监听
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var msg = xhr.responseText;
var divElement = document.getElementsByTagName("div")[0];
divElement.innerHTML = "<img src='"+msg+"'/>";
}
}
}
//准备以GET方式发送请求
xhr.open("get","/ajax/GetServlet?time="+new Date().getTime()+"&username="+username);
//真正发送请求
xhr.send(null);
}
function createXHR(){
var xhr = null;
try{
xhr = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
xhr = new XMLHttpRequest();
}catch(e){
window.alert("你的浏览器太差");
}
}
return xhr;
}
</script>
</body>
GetServlet、
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("GetServlet::doGet()");
String username = request.getParameter("username");
byte[] buf = username.getBytes("ISO8859-1");
username = new String(buf,"UTF-8");
String msg = null;
if(username.equals("赵君")){
//msg = "<font color='red'>该用户已存在</font>";
msg = "images/MsgError.gif";
}else{
//msg = "<font color='green'>可以注册</font>";
msg = "images/MsgSent.gif";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(msg);
}
3:Post方式 + 动态检查用户名是否合法
Post方式说明
① 给服务器传递数据需要调用send(请求字符串数据)方法
② 调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单给服务器传递数据)
③ 传递的中文信息无需编码,特殊符号像 &、=等 需要编码
④ 该方式请求的同时也可以传递get参数信息,同样使用$_GET接收该信息
5.对于POST请求,一定要设置请求头,代码如下:
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
在open()之后,在send()之前这里采用的以xml的形式接受返回的数据
特别注意一点是:,说以msg = xhr.responseXml。上面的get以text方式返回。也就是responseTest。。好好体会一下接下来接收数据的方式不一样
<body>
输入用户名:<input type="text"/>单击检查按钮后,立即查检结果
<input type="button" value="检查"/>
<hr/>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
document.getElementsByTagName("input")[1].onclick=function(){
//取得用户输入的用户名
var username = document.getElementsByTagName("input")[0].value;
//对中文编码
username = encodeURI(username);
//创建AJAX引警对象
var xhr = createXHR();
//设置函数监听
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//以字符串形式接收
//var msg = xhr.responseText;
//以XML形式接收
var xmlDocument = xhr.responseXML;
var resElement = xmlDocument.getElementsByTagName("res")[0];
var msg = resElement.firstChild.nodeValue;
var divElement = document.getElementsByTagName("div")[0];
divElement.innerHTML = "<img src='"+msg+"'/>";
}
}
}
//准备以POST方式发送请求
xhr.open("post","/ajax/PostServlet?time="+new Date().getTime());
//设置请求头,只有是POST方式下,才设置该请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//真正发送请求
xhr.send("username="+username);
}
function createXHR(){
var xhr = null;
try{
xhr = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
xhr = new XMLHttpRequest();
}catch(e){
window.alert("你的浏览器太差");
}
}
return xhr;
}
</script>
</body>
PostServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("PostServlet::doPost()");
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println("用户名:" + username);
String msg = null;
if(username.equals("赵君")){
msg = "images/MsgError.gif";
}else{
msg = "images/MsgSent.gif";
}
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<root>");
pw.write("<res>");
pw.write(msg);
pw.write("</res>");
pw.write("</root>");
}
(四)get方式 + post方式总结
两者的不同
① 给服务器传递数据量,get最多是2k
post原则没有限制,php.ini对其限制为8M
② 安全方面,post传递数据较安全
③ 传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数
http://网址/index.php?name=tom&age=23&addr=beijing
蓝色部分就是请求字符串,就是一些“名-值”对,中间使用&符号连接。
post方式是把form表单的数据给请求出来以xml形式传递给服务器
(五)AJAX的缺点:
a)浏览器支持不统一
b)无页面刷时,所以浏览器的”前进”和”后退”按钮失效
c)一些浏媒体支持不完善
(由上面两个例子看出,如果是xml返回格式的话,不仅仅说在response中写xml麻烦,而且还有在接受数据解析xml也麻烦。后面介绍用json格式返回数据)。下一篇介绍经典的多级菜单联动的源码