Ajax视频学习

1.走进Ajax
最主要的是XMLHttpRequest进行异步数据检索
然后使用Dom进行动态显示和交互
使用xml和XSLT进行数据交换和处理
使用XHTML和css的给予标注的表示技术
使用JavaScript将以上技术融合在一起
2.基本步骤：
Servlet定义：
public class AJAXServlet extends HttpServlet{
public void doPost(....){
doGet(...);
}
public void doGet(...){      
      //设置编码方式，XMLHttpRequest对象总采用UTF-8方式发送请求  
       request.setCharacterEncoding("UTF-8");
      //设置中文输出流
      response.setContentType("text/html;charset=UTF-8");
      //获取页面输出流
      PrintWriter out =  response.getWriter();
      //1.取参数
      String username = request.getParameter("username");
      String password=request.getParameter("password");
      String email=request.getParameter("email");     
     //2.检查参数是否有问题
     //3.校验操作
       UserServiceImpl userService=new UserServiceImpl();
       User user=new User();
       UserHelper userHelper=new UserHelper();
       userService.setUserHelper(userHelper);
        if(userService.isExit(username)){
           //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
            out.print("该用户已经存在");
        }else{
            try{user.setEmail(email);
            user.setUsername(username);
            user.setPassword(password);
            user.setHeadpic("nophoto.gif");
            userService.addUser(user);
            request.getSession().setAttribute("userlogin",username);
            //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
            out.print("success");
            }catch(Exception e){
            //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
                out.print("注册时出错，请重新注册");                       
            }
            }
        out.close();
}
}
下载JQuery Ajax库JQuery-1.2.6-release中的dist中的JQuery，该文件是JavaScript文件
JQuery的使用：
把JQuery文件和下面的JavaScript文件放在一起
在jsp页面中引用：


verify.js如下：
function verify{
//1.获取文本的内容
//jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点
//jquery的方法返回的都是jquery对象，可以继续在上面执行其他的jquery方法
var jqueryobj=$("#userName");
//获取节点的值
var username=jqueryobj.val();
//2.将文本框中的数据发送给服务器的servlet
//使用jquery的XMLHTTPRequest对象的get请求的封装
$.get("AJAXServer?name="+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话，就会把数据发送到服务器进行处理,然后继续进行下面的代码，不会在这里等待，当服务器返回数据的时候，在执行callback函数));
}
//回调函数
function callback(data(服务器端返回的纯文本信息存储在data参数中)){
//3.接受服务器端返回的数据
//alert(data);
//4.接受服务器端返回的数据动态的显示在页面上
//找到保存结果信息的节点
var resultObj=$("#result");
resultObj.html(data);
}
简化上面的写法：
function verfity(){
$.get("AJAXServer?name="+$("#userName").val(),null,function(data){
    $("#result").html(data);
});
}

不用框架来用AJAX
//这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互，接受纯文本的信息
var xmlhttp；
function verfity(){
//1.使用dom的方式获取文本框的值
//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应html页面中的一个标签
//.value可以获取一个元素节点的value属性值
var userName=document.getElementById("userName").value;

//2.创建XMLHttpRequest对象
//这是XMLHttpRequest对象使用中最复杂的一步
if(window.XMLHttpRequest){
 //针对Firefox，Mozillar，Opera，Safari，IE7，IE8
  xmlhttp=new XMLHttpRequest();
 //针对某些特定版本的mozillar浏览器的bug进行修正
 if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType("text/xml");
 }
}else if(window.ActiveXObject){
  //针对IE6，IE5.5，IE5
  //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中排在前面的版本较新
  var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for(var i=0;i   try{
    //取出一个控件名进行创建，如果创建成功就终止循环，如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
    xmlhttp=new ActiveXObject(activexName[i]);
    break;
    }catch(e){
    }
  }
}
//确认XMLHttpRequest对象创建成功
//xmlhttp本来是不存在的，为false，取反就是存在了，为true
if(!xmlhttp){
 alert("XMLHttpRequest对象创建失败");
 return;
}else{
 //alert(xmlhttp);
}

//3.注册回调函数
//注册回调函数时，需要函数名，不要加括号
xmlhttp.onreadystatechange=callback;

//4.设置连接信息
//第一个参数表示http的请求方式，支持所有的http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步的方式交互，true表示异步
xmlhttp.open("GET","AJAXServer?name="+userName,true);
//使用post方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//post方式下，需要设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www/form-urlencoded");
//post方式发送数据
//xmlhttp.send("name="+userName);
//5.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback(){
//6.接受响应的数据
//判断对象的状态是否交互完成
if(xmlhttp.readyState==4){
  //判断http的交互是否成功
  if(xmlhttp.status==200){
    //获取服务器端返回的数据
    //获取服务器端输出的纯文本数据
    var responseText=xnlhttp.responseText;
    //将数据显示在页面上
    //通过dom到方式中到div标签对应的元素节点
    var divNode=document.getElementById("result");
    //设置元素节点中的html内容
    divNode.innerHTML=responseText;  
  }else{
    alert("出错了");
  }
}
}

 

下面返回XML数据
Servlet定义：
public class AJAXXMLServlet extends HttpServlet{
public void doPost(....){
doGet(...);
}
public void doGet(...){      
      //设置编码方式，XMLHttpRequest对象总采用UTF-8方式发送请求  
       request.setCharacterEncoding("UTF-8");
      //设置中文输出流    修改点1---------
      response.setContentType("text/xml;charset=UTF-8");
      //获取页面输出流
      PrintWriter out =  response.getWriter();
      //1.取参数
      String username = request.getParameter("username");
      String password=request.getParameter("password");
      String email=request.getParameter("email");     
     //2.检查参数是否有问题
     //3.校验操作
     StringBuilder builder=new StringBuilder();
     builder.append("");      
        if(userService.isExit(username)){
           //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
          builder.append("该用户已经存在").append("");
        }else{
            try{user.setEmail(email);
            user.setUsername(username);
            user.setPassword(password);
            user.setHeadpic("nophoto.gif");
            userService.addUser(user);
            request.getSession().setAttribute("userlogin",username);
            //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
            builder.append("success").append("");
            }catch(Exception e){
            //4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户
               builder.append("注册时出错，请重新注册").append("");                       
            }
            }
        out.println(build.toString);
        out.close();
}
}
//这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互，接受纯文本的信息
var xmlhttp；
function verfity(){
//1.使用dom的方式获取文本框的值
//document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应html页面中的一个标签
//.value可以获取一个元素节点的value属性值
var userName=document.getElementById("userName").value;

//2.创建XMLHttpRequest对象
//这是XMLHttpRequest对象使用中最复杂的一步
if(window.XMLHttpRequest){
 //针对Firefox，Mozillar，Opera，Safari，IE7，IE8
  xmlhttp=new XMLHttpRequest();
 //针对某些特定版本的mozillar浏览器的bug进行修正
 if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType("text/xml");
 }
}else if(window.ActiveXObject){
  //针对IE6，IE5.5，IE5
  //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中排在前面的版本较新
  var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for(var i=0;i   try{
    //取出一个控件名进行创建，如果创建成功就终止循环，如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
    xmlhttp=new ActiveXObject(activexName[i]);
    break;
    }catch(e){
    }
  }
}
//确认XMLHttpRequest对象创建成功
//xmlhttp本来是不存在的，为false，取反就是存在了，为true
if(!xmlhttp){
 alert("XMLHttpRequest对象创建失败");
 return;
}else{
 //alert(xmlhttp);
}

//3.注册回调函数
//注册回调函数时，需要函数名，不要加括号
xmlhttp.onreadystatechange=callback;

//4.设置连接信息
//第一个参数表示http的请求方式，支持所有的http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步的方式交互，true表示异步
xmlhttp.open("GET","AJAXServer?name="+userName,true);
//使用post方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//post方式下，需要设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www/form-urlencoded");
//post方式发送数据
//xmlhttp.send("name="+userName);
//5.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xmlhttp.send(null);
}
//回调函数
function callback(){
//6.接受响应的数据
//判断对象的状态是否交互完成
if(xmlhttp.readyState==4){
  //判断http的交互是否成功
  if(xmlhttp.status==200){
    //获取服务器端返回的数据
    //使用responseXML的方式来接受XML数据对象的DOM对象
    var domObj=xnlhttp.responseXML;
    if(domObj){
    //12121212
    //dom中利用getElementByTagName可以根据标签名获取元素节点
    var messageNodes=domObj.getElementsByTagName("message");
    if(messageNode.length>0){
    //获取message节点中的文本内容
    //message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取当前节点的第一个子节点
    //通过以下方式就可以获取文本内容对应的节点
    var textNode=messageNodes[0].firstChild;
    //对于文本节点，可以通过nodeValue的方式返回文本节点的内容
    var reponseMessage=textNode.nodeValue;  

    //将数据显示在页面上
    //通过dom到方式中到div标签对应的元素节点
    var divNode=document.getElementById("result");
    //设置元素节点中的html内容
    divNode.innerHTML=responseMessage;  
   }else{
     alert("xml数据格式错误，原始文本内容为："+xmlhttp.reponseText);
   }
   }else{
     alert("xml数据格式错误，原始文本内容为："+xmlhttp.reponseText);
   }
  }else{
    alert("出错了");
  }
}
}

总结：AJAX应用的五个步骤：
1.建立XMLHttpRequest对象
2.设置回调函数
3.使用open方法与服务器建立连接
4.向服务器端发送数据
5.在回调函数针对不同的响应状态进行处理

下面用JQuery实现ajax获取xml数据
function verify{
//1.获取文本的内容
//jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点
//jquery的方法返回的都是jquery对象，可以继续在上面执行其他的jquery方法
var jqueryobj=$("#userName");
//获取节点的值
var username=jqueryobj.val();
//2.将文本框中的数据发送给服务器的servlet
//使用jquery的XMLHTTPRequest对象的get请求的封装
$.get("AJAXServer?name="+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话，就会把数据发送到服务器进行处理,然后继续进行下面的代码，不会在这里等待，当服务器返回数据的时候，在执行callback函数));
//javascript中一个简单的对象定义方法：var obj={name:"123",age:20};
//指定返回的数据类型文本，xml  $.get()和$.post()返回的都是文本
//$.ajax({
type:"POST",
",
data:"name="+userName,//传送的数据
dataType:"xml",//告诉JQuery返回的数据类型
success:callback//定义交互完成，并且服务器正确返回数据时，调用的函数
});
}
//回调函数
function callback(data(服务器端返回的纯文本信息存储在data参数中)){
//3.接受服务器端返回的数据
//需要将data这个dom对象中的数据解析出来
//首先需要将dom对象转换成JQuery的对象
var jqueryObj=$(data);
//获取message节点
var message=jqueryObj.children();//返回的是数组
//获取文本内容
var text=message.text();//如果message节点不是一个，那么会把所有节点的内容拼接在一起
//4.接受服务器端返回的数据动态的显示在页面上
//找到保存结果信息的节点
var resultObj=$("#result");
resultObj.html(text);
}

解决IE缓存问题：
如果和服务器交互的内容一样，即访问的地址一样 IE就会cache缓存，我们想让每次都访问服务器，那么：
给url地址加上时间，骗过浏览器，不读取缓存
function verfity(){
var url="AJAXServer?name="+$("#userName").val();
url=convertURL(url)
$.get(url,null,function(data){
    $("#result").html(data);
});
}
function convertURL(url){
//获取时间戳
var timestamp=(new Date()).valueOf();
//将时间信息拼接到url上
if(url.indexof("?")>=0){
url=url+"&t="+timestamp;
}else{
url=url+"?t="timestamp;
}
retun url;
}
校验码问题，换一张问题：

换一张

解决中文乱码和跨域访问问题：
get方式的时候，是以utf8的方式发送到服务器端的
//解决方法1，页面端发出的数据做一次encodeURL，服务器端使用new String(old.getBytes("iso8859-1","UTF-8"))
首先：var url="AJAXServer?name="+encodeURL($("#userName").val());
然后服务器：String old=httpServletRequest.getParameter("name");
            String name=new String(old.getBytes("iso8859-1"),"UTF-8");
//解决方法2：页面端发出的数据做两次encodeURL  建议使用这种方法
首先：var url="AJAXServer?name="+encodeURL(encodeURL($("#userName").val()));
服务器端：String old=httpServletRequest.getParameter("name");
          String name=URLDecoder.decode(old,"UTF-8");

跨域访问就是XMLHttpRequest访问不在同一个服务器上的url(serverlet),那么使用代理机制解决这个问题
在浏览器的代码中，我们需要在调用open方法之前判断一下要连接的地址是不是以http开头的，如果是则认为要访问的是跨域资源，首先将当前的url中的“？”变成“&”
这是因为将要连接的地址改为“Proxy?url=”+url以后，如果原来的url地址中有参数的话，新的url地址中就会有两个“？”这回导致服务器解析参数错误，“url=”之后的内容表示本来要访问的跨域资源的地址
function convertURL(url){
  if(url.substring(0,7)=="http://"){
    url=url.replace("?","&");
    url="Proxy?url="+url;
  }
  return url;
}
服务端要做的：
.....

DOM相关知识：
实例一：浮动窗口

页面：
显示浮动窗口

 

标题栏X

 

内容

  我是一个窗口喔

win.css：
#win{
/**希望让窗口有边框*/
border:1px red solid;
/**希望让窗口的高和宽固定*/
width:500px;
height:400px;
/**希望让窗口的位置*/
position:absolute;/**绝对定位*/
top:100px;
left:350px;
/**希望窗口开始时隐藏*/
display:none;
}
#title{
/**空盒子标题栏的背景颜色*/
background-color:blue;
/**控制标题栏的字体颜色*/
color:yellow;
/**控制标题栏的左内边距*/
padding-left:3px;
}
#content{
padding-left:3px;
padding-top:5px;
}
#close{
/**使关闭按钮向右移动*/
margin-left:158px;
/**用让鼠标进入时可以显示个小手*/
cursor:pointer;
}

JavaScript：
function showwin(){
//1.找到创建窗口对应的div
  var winNode=$("#win");
//2.让div对应的窗口显示出来
//方法1：修改节点css的值，让窗口显示出来
  winNode.css("display","block");
//方法2：利用Jquery的show方法
  winNode.show("slow");
//方法3：利用Jquery的fadeIn方法
  winNode.fadeIn("slow");
}
function hide{
//1.找到创建窗口对应的div
  var winNode=$("#win");
//2.让div对应的窗口隐藏
//方法1：修改节点css的值，让窗口显示出来
  winNode.css("display","none");
//方法2：利用Jquery的show方法
  winNode.hide("slow");
//方法3：利用Jquery的fadeIn方法
  winNode.fadeOut("slow");
}

实例二:
实现级联菜单

  菜单1
 
• 子菜单1

 
• 子菜单2





  菜单2
 
• 子菜单3

 
• 子菜单4

css文件：
/**如何让li前面不显示小圆点*/
li{
 list-style:none;/**使li前面的小圆点消失*/
 margin-left:18px;/**让子菜单向右移动一段距离，达到缩进的效果*/
 display:none;/**子菜单隐藏*/
 text-decoration:none;/**去掉下划线*/
}

JavaScript文件：
//点击主菜单时候，对应的子菜单可以显示，再次单击子菜单则隐藏
//需要编写代码，在页面中装在时候，给所有的菜单添加onclick的事件，保证主菜单点击时候可以显示ihe隐藏子菜单
//注册页面装在时候执行的方法
$(document).ready(function(){
//首先需要找所有的主菜单,然后给所有的主菜单注册点击事件
var as=$("ul").children("a");//var as=$("ul > a")
as.click(function(){
   //这里需要找到当前ul中的li，然后让li显示出来
   //获取当前被点击的a节点
   var aNode=$(this);
   //找到当前a节点的所有li兄弟节点
   var lis=aNode.nextAll("li");
   //让子节点显示或者隐藏
   lis.toggle("show");
});
//如果点击子菜单时，装在其他页面可以这样做：
$("li > a").click(function(){
   $("#content").load($(this).attr("id"));
}); 
}); 

实例三：
可编辑的表格：

 
    
       
       
    
 

123456

123456

css文件
table,td{
  border-collapse:collapse;/**让相邻边框合并*/
  border:1px solid black;/**边框*/
}

javaSctipr文件
//在页面装载时候，让所有的td都拥有一个点击事件
$(document).ready(function(){
 //找到所有的td节点
  var tds=$("td");
  //给所有的td节点增加点击事件
 tds.click(tdclick);
});

//td被点击的事件
function tdclick(){
 var td=$(this);
 //1.取出当前td中的文本内容保存起来
 var text=td.text();
 //2.清空td里面的内容
 td.html("");
 //3.建立文本框，也就是input的元素节点
 var input=$("");
 //4.设置文本框的值是保存起来的文本内容
 input.attr("value",text);
 //4.5 让文本框可以响应键盘按下的事件，主要是处理回车确认
 input.keyup(function(event){
 //0.获取当前用户按下的键值
  var myEvent=event||window.event;
  var kcode=myEvent.keyCode;
 //1.判断是否是回车按下
  if(kcode==13){
    var inputnode=$(this)
    //2.获取当前文本框中的内容
   var inputtext=inputnode.text();
    //3.清空td里面的内容
   var tdNode=inputnode.parent();  
    //4.将保存的文本框的内容填充到td中
   tdNode.html(inputtext);
    //5.让td重新拥有点击事件
   tdNode.click(tdclick);
   }  
  });
 //5.将文本框加入到td中
 td.append(input);
 //5.5将文本框中的字高亮选中
 //需要将jquery对象转化成dom对象
 var inputdom=input.get(0);
 inputdom.select(); //select方法是dom中的 而不是jquery中的
 //6.取消onclick事件
 td.unbind("click");
 }

实例四：股票例子
public class Stock{
/**昨天的收盘价*/
private double yesterday;
/**今天的开盘价*/
private double today;
/**当前价*/
private doubvle now;
/**股票名称*/
private String name;
/**股票代码*/
private String id;

public Stock(double yesterday.double today,String name,String id){
this.yesterday=yesterday;
this.today=today;
this.name=name;
this.id=id;
this.now=today;
}

/**属性的get和set方法*/
.......
}
public class GetStocksInfo extends HttpServlet{
//保存股票对象的map
private HashMap stocks;

protected void doPost(....){.....}

protected void doGet(.....){
//返回两只股票的价格信息

//1.计算随机数
double sz=Math.random()*20;
double pf=Math.random()*0.5;
//通过随机数是奇数还是偶数判断股票是张还是跌
boolean flagsz=(int)(Math.random()*10)%2==0;
boolean flagpf=(int)(Math.random()*10)%2==0;
//2.将随机数和股票的当前价格进行加或者减操作，得到新的当前价格
Stock szzs=stocks.get("300001");
stock pufy=stocks.get("000001");
double temp;
if(flagsz){
 temp=szzs.getNow()+sz;
}else{
 temp=szzs.getNow()-sz;
}
//需要对新的当前价格进行截取，只保留小数点后两位
temp=(int)(temp*100)/100.0
szzs.setNow(temp);

if(flagpf){
 temp=pufy.getNow()+pf;
}else{
 temp=pufy.getNow()-pf;
}
temp=(int)(temp*100)/100.0
pufy.setNow(temp);

//3.返回两只股票的昨天收盘，今天开盘和当前价格
//采用json的数据格式返回股票的信息

/ //采用数组的方式回传两个股票对象,页面端的代码获得对象
        /*
        builder.append("[{name:\"").append(szzs.getName()).append("\",id:\"").append(szzs.getId())
                .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
                .append(",now:").append(szzs.getNow())
                .append("},")
                .append("{name:\"").append(pfyh.getName()).append("\",id:\"").append(pfyh.getId())
                .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
                .append(",now:").append(pfyh.getNow())
                .append("}]");
        */
        //采用对象的方式回传两个股票对象
        builder.append("{")
                .append("\"").append(szzs.getId()).append("\":{name:\"").append(szzs.getName())
                .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
                .append(",now:").append(szzs.getNow())
                .append("},")
                .append("\"").append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName())
                .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
                .append(",now:").append(pfyh.getNow())
                .append("}}");
out.print(builder);

/**
[{
  name:"szzs.getName()",
  id:"szzs.getId()",
  yes:szzs.getyesterday(),
  tod:szzs.getToday(),
  now:szzs.getNow()},
{
  name:"pfyh.getName()",
  id:"pfyh.getId()",
  yes:pfyh.getYesterday(),
  tod:pfyh.getToday(),
  now:pfyh.getNow()}
]
*/
}

public void init(...){
stocks=new HashMap();
//创建股票
Stock szzs=new Stock(3000.0,2990.1,"上证指数","300001");
stock pufy=new Stock(23.22,23.50,"浦发银行","000001");
stocks.put(szzs.getId(),szzs);
stocks.put(pufy.getId(),pufy);
}
}

页面的内容：

上证指数：

浦发银行：

  

昨收:

  

今开:

  

当前:

JavaScript代码：
//期望进入页面后就可以开始从服务器段获取数据，然后显示股票价格
//保存服务器段返回的股票对象
var obj;
var sid;
$(document).ready(function() {
    //页面载入时隐藏弹出框
    var stockNode = $("#stock").css("border","1px solid black").width("150px")
            .css("position","absolute").css("z-index","99").css("background-color","blue")
            .css("color","yellow");
    stockNode.hide();
    var as = $("a");
    //定义鼠标进入股票名称时的操作
    as.mouseover(function(event){
        //获取到当前股票的代码
        var aNode = $(this);
        var divNode = aNode.parent();
        sid = divNode.attr("id");
        //找到对应的股票对象
        updatediv();

        //需要控制弹出框的位置
        /*
        //1.找到当前连接的位置
        var offset = aNode.offset();
        //2。设置弹出框的位置
        stockNode.css("left",offset.left + "px").css("top",offset.top + aNode.height() + "px");
        */
        //期望出现在鼠标的右下方
        var myEvent = event || window.event;
        stockNode.css("left",myEvent.clientX + 5 + "px").css("top",myEvent.clientY + 5 + "px");

 

        //弹出框显示
        stockNode.show();

    });
    //定义鼠标离开股票名称时的操作
    as.mouseout(function() {
        //弹出框隐藏
        stockNode.hide()
    })
    getInfo();
    //3。每隔一秒钟和服务器交互一次，用户不用刷新页面就可以不断地看到最新的股票信息
    setInterval(getInfo,1000);
});

//从服务器段获取数据并显示在页面上的的方法
function getInfo() {
    //1。向服务器发起请求，获取数据
    $.get("GetStockInfo", null, function(data) {
        //2.接收并解析数据
        obj = eval(data);
        //2.1获取两只股票的当前指数信息
        var szzs = obj["300001"];  //obj.300001
        var pfyh = obj["000001"];
        /*
         遍历一个js的对象
         for (var stockid in obj) {
            var stock = obj[stockid];
         }
         */
        //2.2找到页面中对应的节点，然后填充最新的股票价格
        var span3 = $("#300001").children("span");
        span3.html(szzs.now);
        if (szzs.now > szzs.yes) {
            //当前价格大于昨天收盘，则显示红色
            span3.css("color","red");
        } else {
            span3.css("color","green");
        }
        var span1 = $("#000001").children("span");
        span1.html(pfyh.now);
        if (pfyh.now > pfyh.yes) {
            //当前价格大于昨天收盘，则显示红色
            span1.css("color","red");
        } else {
            span1.css("color","green");
        }
        updatediv();
    })   
}

//更新弹出框中得内容
function updatediv() {
    var stockobj = obj[sid];
    for (var proname in stockobj) {
        if (proname != "name") {
            //找到对应的弹出框中的div节点，然后找到span字节点，将数据填充
            $("#" + proname).children("span").html(stockobj[proname]);
        }
    }
}

 

JQuery对JSON的支持
接受服务器端返回的数据是对象，那么$.get()方法加上参数json   $.get(url,null,function(data){},"json");那么data就是javascript对象了 不用eval(data)转化了

实例五：自动补全
服务器端：
public class AutoComplete extends HttpServlet{
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        //表示页面传过来的字符串，用于和服务器段的单词进行完整匹配
        String word = httpServletRequest.getParameter("word");
        //将字符串保存在request对象中
        httpServletRequest.setAttribute("word",word);
        //将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层）
        httpServletRequest.getRequestDispatcher("wordxml.jsp").
                forward(httpServletRequest, httpServletResponse);

    }

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);    //To change body of overridden methods use File | Settings | File Templates.
    }
}
视图层：
<%--
  itcast.cn的ajax自动补全实例
--%>

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>

<%String word=request.getAttribute("word");%>

    absolute
    anyone
    anything
    apple
    abandon
    breach
    break
    boolean

jsp页面：
 itcast.cn的JQuery示例：仿googlesuggest
   



   

//表示当前高亮的节点
var highlightindex = -1;
$(document).ready(function() {
    var wordInput = $("#word");
    var wordInputOffset = wordInput.offset();
    //自动补全框最开始应该隐藏起来
    $("#auto").hide().css("border","1px black solid").css("position","absolute")
            .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
            .css("left",wordInputOffset.left + "px").width(wordInput.width() + 2);

    //给文本框添加键盘按下并弹起的事件
    wordInput.keyup(function(event) {
        //处理文本框中的键盘事件
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        //如果输入的是字母，应该将文本框中最新的信息发送给服务器
        //如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
            //1.首先获取文本框中的内容
            var wordText = $("#word").val();
            var autoNode = $("#auto");
            if (wordText != "") {
                //2.将文本框中的内容发送给服务器段
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//对服务器端进行交互延迟500毫秒，避免打字快，重复向服务器提交
timeoutId=setTimeout(function(){
                $.post("AutoComplete",{word:wordText},function(data){
                    //将dom对象data转换成JQuery的对象
                    var jqueryObj = $(data);
                    //找到所有的word节点
                    var wordNodes = jqueryObj.find("word");
                    //遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
                    //需要清空原来的内容
                    autoNode.html("");
                    wordNodes.each(function() {
                        //获取单词内容
                        var wordNode = $(this);
                        //新建div节点，将单词内容加入到新建的节点中
                        //将新建的节点加入到弹出框的节点中
                        $("

").html(wordNode.text()).appendTo(autoNode);
                    });
                    //如果服务器段有数据返回，则显示弹出框
                    if (wordNodes.length > 0) {
                        autoNode.show();
                    } else {
                        autoNode.hide();
                        //弹出框隐藏的同时，高亮节点索引值也制成-1
                        highlightindex = -1;
                    }
                },"xml");},500);
            } else {
                autoNode.hide();
                highlightindex = -1;
            }
        } else if (keyCode == 38 || keyCode == 40) {
            //如果输入的是向上38向下40按键
            if (keyCode == 38) {
                //向上
                var autoNodes = $("#auto").children("div")
                if (highlightindex != -1) {
                    //如果原来存在高亮节点，则将背景色改称白色
                    autoNodes.eq(highlightindex).css("background-color","white");
                    highlightindex--;
                } else {
                    highlightindex = autoNodes.length - 1;   
                }
                if (highlightindex == -1) {
                    //如果修改索引值以后index变成-1，则将索引值指向最后一个元素
                    highlightindex = autoNodes.length - 1;
                }
                //让现在高亮的内容变成红色
                autoNodes.eq(highlightindex).css("background-color","red");
            }
            if (keyCode == 40) {
                //向下
                var autoNodes = $("#auto").children("div")
                if (highlightindex != -1) {
                    //如果原来存在高亮节点，则将背景色改称白色
                    autoNodes.eq(highlightindex).css("background-color","white");
                }
                highlightindex++;
                if (highlightindex == autoNodes.length) {
                    //如果修改索引值以后index变成-1，则将索引值指向最后一个元素
                    highlightindex = 0;
                }
                //让现在高亮的内容变成红色
                autoNodes.eq(highlightindex).css("background-color","red");
            }
        } else if (keyCode == 13) {
            //如果输入的是回车

            //下拉框有高亮内容
            if (highlightindex != -1) {
                //取出高亮节点的文本内容
                var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                highlightindex = -1;
                //文本框中的内容变成高亮节点的内容
                $("#word").val(comText);
            } else {
                //下拉框没有高亮内容
                alert("文本框中的[" + $("#word").val() + "]被提交了");
            }
        }
    });

    //给按钮添加事件，表示文本框中的数据被提交
    $("input[type='button']").click(function() {
        alert("文本框中的[" + $("#word").val() + "]被提交了");
    });
})

 

 

 

 

 

 

 

阅读(2344) | 评论(0) | 转发(0) |

0

上一篇：JDBC视频总结

下一篇：struts2视频总结