A:
Ajax:(Asynchronous JavaScript And XML):指异步 JavaScript 及 XML,是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术 是基于JavaScript、XML、 HTML、CSS新用法
B:
Ajax:只刷新局部页面的技术
1:javascript: 更新局部的网页
2:XML:一般用于请求数据和相应数据的封装
3:XMLHttpRequest对象:发送请求到服务器并获得返回结果
4:CSS:美化页面样式
5:异步:发送请求后不等返回结果,由回调函数处理结果
注:javascript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力
C:
Ajax中XMLHttpRequest对象的一些用法:
1:构造方法:
Var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
}
2:常用方法:
open(method,url,async):建立与服务器的连接(1)method参数指定请求的Http方法,典型的是Get和Post方法;(2)url指请求的地址;
(3)asnyc指的是是否使用异步请求,值为true或false,默认不填的时候是true
send(conntent):发送的请求,content参数是发送的请求的参数
setRequestHeader:设置请求的信息
3:常用的属性:
onreadystatechange:指定回调函数
readyState: XMLHttpRequest的状态信息,以下是就绪状态码和其说明:
0>XMLHttpRequest对象没有完成初始化,即刚刚创建
1>XMLHttpRequest对象对象开始发送请求,即刚调用open方法,还没有调用send方法
2>XMLHttpRequest对象对象的请求已经发送,调用了send方法,服务器已经接受到了请求,但是没有做出任何回应
3>XMLHttpRequest对象开始读取响应,但是还没有结束,读取到了所有响应的消息头,响应正文还没有读取到
4>XMLHttpRequest对象读取响应完毕,响应的所有信息都读取完了
status:Http的状态码
200>服务器响应正常
400>无法找到请求的资源
403>没有访问权限
404>访问的资源不存在
500>服务器内部出现异常
responseText:获得响应的文本内容
responseXML :获得响应的XML文档对象 documednt
注:就绪状态是4而且状态码是200,才可以处理服务器数据
D:
案例一:
使用Ajax验证用户名是否存在的实现步骤
1:使用文本框的OnBlur事件
2:使用Ajax技术实现异步交互
a) 创建XMLHttpRequest对象
b) 通过 XMLHttpRequest对象设置请求信息
c) 向服务器发送请求
d) 创建回调函数,根据响应状态动态更新页面
E:
以下是实现的代码:
1:在js文件中的my.js中定义一个获取XMLHttpRequest对象的方法,便于调用
function getXMLHttpRequest(){
Var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();//适用于新的浏览器
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHttp");//适用于IE5和IE6
}
return xmlhttp;
}
2:在注册界面的jsp中,先得到用户输入的文本的信息,以及用span/font标签显示提示信息
window.οnlοad=function()
{
var emailNode=documednt.getElementsByName("email")[0];//得到邮箱文本框对象
emailNode.οnblur=function()
{//当前元素失去焦点事件
var email=this.value;//得到用户输入的邮箱
var req=getXMLHttpRequest();//得到XMLHttpRequest对象
//创建回调函数,根据响应状态动态更新页面
req.onreadystatechange=function()
{
if(req.readyState==4&&req.status==200)
{
var result=responseText;//得到响应正文结果
var eamilMsg=documednt.getElementById("eamilMsg");//得到标签对象
eamilMsg.innerHTML="";//先清空标签中的内容
if(email="")
{
eamilMsg.innerHTML="email不能为空";
return;//结束函数,使函数不执行下面内容
}
else
{
if(result=="true")
{
emailMsg.innerHTML="邮箱已被注册";
eamilMsg.style.color="red";
}
else
{
emailMsg.innerHTML="√";
emailMsg.style.color="green";
}
}
}
}
req.open("get","${pageContext.request.contextPath}/servlet/findEmail?email="+email);
req.send(null);
}
}
3:在Servlet中的findEmail中验证邮箱是否存在
String email=request.getParameter("email");
if("lisi@qq.com".equals(email))
{
out.print(true);
}
else
{
out.print(false);
}
F:
案例二:
对于一般浏览器的搜索功能的实现:
//得到搜索框下的内容样式,放在一个层次样式下,模糊查询得到的内容显示在这一层中
(<div id="content" style="display:none;background-color:white;width:126px;position:absolute;left:860px;top:135px;">
</div>)
1:先确定页面一开始加载的时候会调用的方法
window.οnlοad=function()
{
var search=documednt.getElementById("name");//得到搜索框对象
var content=documednt.getElementById("content");//得到显示搜索内容的对象
search.οnkeyup=function()//监视键盘事件,当松开键盘时会触发该事件
{
var text=this.value;//用户输入的文本内容
if(text=="")
{
content.style.display="none";
return;
}
//到数据库中模糊搜索含有用户输入文本的所有书名
var req=getXMLHttpRequest();
req.onreadystatechange=function()//回调函数
{
if(req.readyState==4&&req.status==200)
{
var str=req.responseText;//得到返回的内容字符串
var ss=str.split(",");//将得到的字符串切割放在一个数组里面
var strdiv="";//将数组中的书名显示在显示搜索内容的层次中
for(var i=0;i<ss.length;i++)
{
strdiv="<div οnclick='showTxt(this)' οnmοuseοver='changeBgColor(this)' οnmοuseοut='backToColor(this)'>"+ss[i]+"</div>";
}
content.innerHTML=strdiv;
conntent.style.display="block";//让div显示
}
}
req.open("get","${pageContext.request.contextPath}/servlet/finBookByName?name="+window.encodeURIComponent(txt,"utf-8")+"&time="+new Date.getTime());
req.send(null);
}
}
2:鼠标放上去改变背景色事件的处理函数,参数接受的是被选中的div
function changeBgColor(div)
{
div.style.backgroundColor="gray";
}
//当移开鼠标的时候之前选中的内容恢复原色
function backToColor(div)
{
div.style.backgroundColor="while";
}
//点击事件,将文本显示在搜索框下的层次中
function showTxt(div)
{
var search=documednt.getElementById("name");//得到搜索框对象
//将显示的内容中是自己想要的文本用鼠标添加到搜索框中
search.value=div.innerHTML;//将div中文本添加到搜索框中
//当选中自己想要的内容后鼠标移开后,div需要隐藏
div.parentNode.style.display="none";//将显示搜索结果的div隐藏
}
3:将文本框中的内容传到Servlet中的体现:
String name=request.getParameter("name");
//解决因get方式提交引起的乱码
String ming=new String(name.getBytes("ISO8859-1"),"utf-8");
//调用Service去数据库中查找
Service service=new Serviceimpl();
List<Object> list=service.finBooksByName(ming);
String str="";
for(int i=0;i<list.size();i++)
{
if(i>0)
{
str+=",";
str+=list.get(i);
}
}
out.print(str);//将打包好的字符串回应给页面
G:
验证用户名是否存在的案例,代码如下:
<script type="text/javascript">
function checkName()
{
//得到用户输入的用户名
var text=document.getElementsByName("userName")[0];
var name=text.value;
var req=getXMLHttpRequest();
//得到XMLHttpRequest对象
//定义当Servlet返回来结果的处理方法
req.onreadystatechange=function(){
if(req.readyState==4&req.status==200){
//得到span行的对象
var span=document.getElementById("msg");
//将得到的响应的数据放在span行中
span.innerHTML=req.responseText;
}
}
req.open("get","${pageContext.request.contextPath}/servlet/findByName?name="+name);
req.send(null);
}
</script>
<body>
//文本框失去焦点事件
用户名<input type="text" name="userName" οnblur="checkName()"><span id="msg"></span><br/>
密 码<input type="password" name="password"></br>
<input type="submit" value="注册">
</body>