曾耀峰

web开发中的监听器的概述
什么是监听器:
   监听器:就是一个Java类，用来监听其他的Java的状态的变化

web中的监听器
    WEB中的Listener 和Filter是属于Servlet规范中的高级的技术

该监听器的应用:
1.加载框架的配置文件
2.定时任务调度：
1).半夜去别人的网站获取资源
2).腾讯给用户发生日邮件
   Timer



ServletCo'ntext对象的创建和销毁
  创建:服务器启动的时候， 服务器为每个web项目创建一块空间，随处可以存取。作用范围是整个项目应用
  销毁:服务器关闭的时候

3.ServletRequestListener:监听Request对象的创建和销毁的

【request对象何时创建和销毁】
只要有一次请求，就会创建request对象
譬如:访问servlet,jsp,html文件都是一次请求，会创建request对象
销毁:响应结束


第三类:
javaBean在session中要序列化对象，因为可能被序列化到硬盘
钝化:序列化
活化:反序列化

实体类Bean：Serializial序列化接口


-----优化Session;
*通过配置<Context>标签配置定时session序列化
    *在tomcat/conf/context.xml中配置<Context>
    *在tomcat/conf/Catalina/localhost/context.xml配置<Context>
    *在当前的工程下的META-INF/context.xml配置<Context>
   

Session的优化具体内容:
假如1000人创建了购物车，并不购买。占用了内存资源。这时候，设置1分钟保存在硬盘中。这时候用户再来访问，会带来SessionID，在配置文件中 directory路径下找。找到了sessionID后，就活化这个Session

新知识集合:
xhr.onReadyStateChange 开始监听
xhr.readyState 监听器状态
4:表示请求成功
xhr.status 响应的状态码

一、传统ajax:
>get方式请求
1.传统方式的ajax_get():
//1.创建异步对象
var xhr = createXMLHttp();
//2.设置状态改变的监听
xhr.onReadyStateChange= function()
{
        //获取请求状态,4代表成功。
        if(xhr.readyState == 4)
        {
                //获得响应状态码
                if(xhr.status == 200)
                {
                                       
                }
        }

}
//3.设置请求路径
xhr.open("GET","",true);
//4.发送请求
xhr.send(null);

//这里的函数直接拷贝
//主要原因是判断不同浏览器创建的异步对象方式不一样
function createXMLHttp()
{
}

注意了，如果js是写在jsp页面中的，可以直接使用EL表达式
单独写一个文件就不可以使用EL


//Servlet向浏览器打印中文的时候，要写中文编码转换:
response.setContentType("text/html;charset='UTF-8'");
尽管接收上来的参数正确显示中文，但是输出还是要设置编码的。

>post方式提交请求:
方式和get差不多，只是请求时要设置一个请求头
1.创建异步对象
var xhr = createXMLHttp();
2.设置请求监听方法
xhr.onreadyStateChange=function()
{
        //发送请求成功
        if(xhr.readyState==4)
        {
                //响应成功
                if(xhr.status == 200)
                {
                        document.getElementById("id1").innerHTML = xhr.reponseText;
                }
               
        }
}
3.//设置请求方式
xhr.open("POST","Servlet路径",true);
4.设置请求头，避免参数传空
xhr.setRequestHeader("ContentType","这一串只要在form表单中 打印一个属性enctype就能显示，不用记住");
5.设置参数
xhr.send(username=aaa&password=123);


二、异步校验表单
1.创建表和数据库
2.设置一个注册页面
3.在用户名的文本框中使用onblur失去焦点事件触发一个函数
4.函数里使用AJAX异步操作
5.Servlet根据传入的用户名去数据库中进行查询
6.查询到了说明用户名已经被占用，没有查询到说明用户名可以使用

黄志彬


AJAX最大优点：
        能在不刷新整个页面的前提下与服务器通信维护数据。
        避免了在网络上发送那些没有改变的信息，按需取数据，减少用户等待时间。
        不需要打断用户的操作，具有更加迅速的响应能力。
        减少不必要的数据传输、时间及降低网络上数据流量。

JSON逐步代替XML数据传递的格式。

XMLHttpRequest:
属性
*onreadystatechange:当XMLHttpRequest状态改变的时候出发一个函数
*readyState:XMLHttpRequest的状态
　  0 请求未初始化（在调用 open() 之前）
　　1 请求已提出（调用 send() 之前）
　　2 请求已发送（这里通常可以从响应得到内容头部）
　　3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
　　4 请求已完成（可以访问服务器响应并使用它）
*status：获得响应状态码。200.404....
*responseText 获得响应的文本数据
*responseXML:获得响应的xml数据


方法：
*open(请求方式，请求路径，是否异步)：异步去向服务器发送请求
*send（请求参数）：发送请求
*setRequestHeader(头信息，头的值)：处理post请求方式的中文问题

张裕
Ajax 异步的 JavaScript And XML 老的技术 新的思想
        异步:和服务器互动时不会中断浏览器的连接
        服务器返回的数据会在页面局部进行刷新        用户体验较好
        同步:和服务器互动时会产生空白期 用户体验差

Ajax主要用于网页的异步 目前大范围使用的技术
        旧版的由于代码过于臃肿 重复性太高 被JQuery中的Ajax替代
       
操作步骤:
        1: 创建异步对象
        2: 设置对象状态改变触发函数
        3: 设置向后台提交的路径
        4: 发送请求
       
        jq对象.load(url,参数,回调函数)                 可以将读取到的数据写入到指定的jq对象中
        $.get(url,参数,回调函数,数据类型)        get提交参数  可在回调函数中接收返回的参数进行操作
        $.post(url,参数,回调函数,数据类型)        post提交参数

        回调函数:服务器响应回来后调用的函数
                function(data){}   data为返回的数据

        按钮变灰        attr("disabled",boolean) 设置不可用属性

最近都是代码 靠练 理论知识少

郑阳阳
AJAX是一个可以向服务器异步发送请求的技术,使用老技术,新思想.
同步与异步:
同步就是点击链接或者提交数据页面才会跳转,整个页面都会刷新.
刷新过程中页面空白,用户体验全无.
异步是点击链接或者提交数据只有局部的页面会进行刷新,
用户可以浏览其余部位的页面,不会中断用户体验.
使用JQ可以更简单的使用AJAX:
jq对象.load(路径,参数,回调函数)
$.get(路径,参数,回调函数,数据类型)
$.post(路径,参数,回调函数,数据类型)
$.ajax();一般不使用,和直接使用AJAX差不多
serialize(); JQ的AJAX传递参数是需要使用

常小天
今天的学习了一样新的东西——AJAX。这是一种将老技术与新思想结合的产物。AJAX的基础是我们之前学习的js。AJAX最独特的功能就是实现异步访问服务器。所谓异步就是在不刷新当前页面的情况下向服务器发送请求，服务器响应后将响应的内容刷新到当前页面的一部分中。AJAX能够实现这一功能的基础是它有一个异步对象XMLHttpRequest。这个对象能够异步的访问服务器，它又一个属性readyState可以标识它的状态。0表示未初始化，1表示初始化，2表示发送数据，3表示数据传输中，4表示响应完成。而它的另一个属性onreadystatechange可以在它的属性发生变化时触发一个函数。要事项异步访问时，我们先创建一个异步对象，创建的方法直接引用。然后设置状态改变的监听，利用的就是onreadystatechange属性，触发方法，在方法中获得异步对象的状态和响应的状态码。当响应完成，也就是异步对象状态为4，并且响应状态码为200时，就可以接收响应回的数据。responseText获得响应的文本数据。 responseXML获得响应的XML的数据。最后利用js的选择器和写入方法将获得的数据写入到指定的区域内。这里post传递方法与get类似，只多了一步操作，就是在设置一个头信息：xhr.setRequestHeader("Content-Type", "application /x-www -form-urlencoded")。这就是AJAX实现异步的原理。而我们还进一步学习了AJAX与jQuery结合使用的方法，$.get(路径,参数,回调函数,数据类型)和 $.post(路径,参数,回调函数,数据类型)两个方法使我们的代码大大简化。

李思贤：今天了解了同步和异步的区别
同步:就是你提交一个请求的时候,你不能浏览页面上的其他地方,只能在哪里等着
异步:就是你提交一个请求的时候,他会帮你调用一个XMLHttpRequest对象帮你去完成,而你还可以在页面上浏览其他的东西
XMLHttpRequest对象里许多的属性和方法

属性:
onreadystatechange : 指定当readyState状态改变时触发一个函数.
readyState : 返回当前请求的状态，0(未初始化)  1(初始化)  2(发送数据)  3(数据传输中)  4(完成)
responseText :将响应信息作为字符串返回  
responseXML:将响应信息格式化为Xml Document对象并返回
status : 返回当前请求的http状态码. 如200 302 304...

方法:
open( ); 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

JQuery的AJAX部分方法:
Jq的对象.load(路径,参数,回调函数);
$.get(路径,参数,回调函数,数据类型);
$.post(路径,参数,回调函数,数据类型);

今天主要学习了Jquery的AJAX完成用户名是否存在的案例,和完成仿百度的案例.

用户名是否存在的案例,要求输入用户名,鼠标从文本框移开,就检验该用户名是否已被注册,并显示在页面上.

首先我们在regist.jsp中引入两个js,一个Jquery的JS,一个自己写的(放在Jquery后面),可以先在用户名标签后面放一个<span>用来显示错误信息,异步操作,鼠标从用户名文本框移开,触发一个onblue事件,在regist.js页中,我们有load和get/post方法,用load方法的话Servlet中直接输出文字在span中,想要再做其他操作很麻烦,所以这里推荐get/post方法:
$(function() {
        $("#username").blur(function() {
                var username = $(this).val();
                //load方法；
                //$("#s1").load("/Day0612/RegistServlet",{"username":username});
               
                //get 或post提交
                $.get("/Day0612/RegistServlet",{"username":username},function(data){
                        if(data==1){
                                $("#s1").html("<font color='green'>可以使用</font>");
                                $("#regbut").attr("disabled",false);
                        }else if(data==2){
                                $("#s1").html("<font color='red'>已被占用</font>");
                                $("#regbut").attr("disabled",true);
                        }
                });
        });
});


使用JQ的AJAX完成仿百度的案例:
【步骤一：】设计一个商品的搜索页面.
做一个Search.jsp,让内容居中显示.引入一个JQ的JS 一个自己的
【步骤二：】keyup事件触发一个函数.
$(function() {
        $("#word").keyup(function() {
                // 获得文本框的值:
                var word =$(this).val();
// 异步发送请求:
                $.post("/Day0612/searchServlet",{"word":word},function(data){
                        if(word!=""){
                                //alert(data);
                                $("#d1").show().html(data);
                        }else{
                                $("#d1").hide();
                        }
                });
        });
});
【步骤三：】获得文本框的值,提交到Servlet中
根据获得的文本框的值
【步骤四：】在Servlet中根据提交名称查询相应信息.(显示5个)
在业务层模糊查询得到一个数组,转发给info.jsp在info.jsp中用JSTL遍历,拿到每一个值
【步骤五：】提前在JSP中文本框下面加个DIV用来放这些数据,刚开始要设置不隐藏,确定格式后设置为隐藏,有值时显现,当值为空时也让他隐藏.这样我们就完成了黑马一下
if(word!=""){
                                //alert(data);
                                $("#d1").show().html(data);
                                }else{
                                $("#d1").hide();
                                        }

郭明杰:
[AJAX]异步的Javacript and xml
        *使用新思想,老技术
AJAX的功能:完成页面的局部刷新,不中断用户的体验

[XMLHttp]
属性:
当XMLHttpRequest状态改变的时候触发 onreadystatechange 函数
status  :获得响应的状态吗 :200,302 404 500
responseText :获得响应的文本数据
responseXML :获得响应的XML的数据

方法:
open：（请求方式，请求路径．是否异步）　异步去想服务器发送请求
send :发送请求
setRequestHeader:(头信息,头的值) :处理POST请求方式的中文问题


[AJAX]
        *第一步:创建一个异步对象.
        *第二步:设置对象状态改变触发一个函数
        *第三步:设置向后台提交的路径       
        *第四步:发送请求


[JQuery中的AJAX]:
JQuery的AJAX部分方法:
*Jq的对象.load(路径,参数,回调函数);
*$.get(路径,参数,数据类型);
*$.post(路径,参数,数据类型);
*$.ajax()

JQuery是精简js的一种封装工具,它使我们能够更方便的提取处理页面中的元素,ajax是一种异步同步请求,底层用的是轮循也就是说ajax会一直去访问服务器有没有新的消息,有的话传递,对服务器的资源消耗较大

今天学习的是通过jq+json+ajax完成从数据库中提取省市联动的案例,具体实现是:

通过JQ语句,点击到select框的时候触发ajax函数,请求给Servlet类,返回到的数据库数据通过json字符串处理工具提取出来

json需导包

吴俊斌
ajax基本入门
     基本分为四部:创建对象  将创建对象的方法封装到方法里,触发方法
                  设置当对象状态改变的方法 对象.onreadystatechange=function()
                   通过对象.status方法  0表示对象还没创建 1表示对象已经创建
     2send表示发送数据 3,表示数据传送中 4表示完成
                   设置请求路径,  对象.open() 方式 路径 true
                   将数据提交到服务器
我们一般用的比较多的是Jq加alax
      使用流程
         通过先写个页面加载事件($(function(){})),通过选择器找到文本框添加一个
      触发事件,获取文本框的值.如果是get就调用$.get是post就调用$.post方法,同样
      传地址,参数,和一个函数,函数里的参数就是服务器传过来的数据
      

吴鹏

总结

同步和异步:
同步:当点击按钮或提交时,整个页面都会刷新等待处理;
异步:通过第三个对象,实现页面局部提交请求,局部刷新,不用整个页面刷新,可以继续浏览网页;

AJAX的功能:实现页面局部刷新,不中断用户体验;
    早期JS不受重视,后台经常将其当成是一种玩具式语言;
    JS中有一个对象XMLHttpRequest,可以向服务器异步发送请求,
    传统的B/S结构软件,所有的功能都要在服务器端编写代码(胖服务器)
    有了AJAX后,可以将部分代码写道客户端浏览器(瘦服务器);
    RIA:Rich Internet Application;

XML:使用XML作为传递数据的格式;JSON:就是键值对;

XMLHttpRequest:

readyState:XMLHttpRequest的状态;

onreadystatechange:当XMLHttpRequest状态改变时后触发一个函数;

status:获得响应的状态码;0 对象建立,但是没有调用open方法
            1 对象建立,但是没有调用send方法
            2 send已调用,但是当前的状态及http头未知;
            3 已接受部分数据,但是补全,使用下面两个对象获取时,会出错
            4 完成;

responseText:异步加载的时候,获得响应的文本数据

responseXML:获得响应的XML的数据;

方法:

open(请求方法,请求路径,是否异步)  异步去向服务器发送请求;
send(请求参数)  : 发送请求;
setRequestHeader(头信息,头的值)   处理POST请求方式的中文问题;

不同的浏览器创建该对象的方法不同:
IE:将XMLHttpRequest对象封装在ActiveXObject组件;
Fierfox  直接就可以创建XMLHttpRequest;


AJAX编写的步骤:
1 创建一个异步对象

2 设置对象状态改变时触发的函数

3 设置向后台提交的路径

4 发送请求

--------------------------------------------------------

JQuery中的AJAX
常用的方法:
JQuery的对象.load(路径,参数,回调函数);

$.get(路径,参数,回调函数,数据类型)

$.post(路径,参数,回调函数,数据类型)

$.ajax();

serialize();--JQ的AJAX传递参数的时候需要使用的方法;

--------------------------------------------------------

通过AJAX实现异步:
为了通过AJAX实现异步,需要使用一个第三者对象:XMLHttpRuquest;
通过四个步骤编写AJAX代码:1 创建一个AJAX的对象 ; 2 设置监听(ajax对象的状态发生改变时触发一个函数)
3 设置向后台提交的方式(GET或者是POST),提交的路径以及是否开启异步; 4 发送请求;
每个步骤的方法分别是:
首先,创建异步对象,使用xhr变量引用;
var xhr = ajaxHttpRequest();
1 创建XMLHttpRuquest对象(调用一个给定的方法):
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 设置监听(当异步对象的状态发生改变时,执行的函数):
xhr.onreadystatechange()=

3 设置后台传输路径:
xhr.open(请求的方法,提交路径,是否开启异步);
4 发送请求;
xhr.send(null);对于提交方法为"GET"的,send方法括号里面为null,要提交的参数写在open()方法内,而提交方法为"POST"时,
如果有提交的参数,需要先使用.setRequestHeader("Content-type","application/x-www-form-urlencoded");然后把参数
写在send()方法内;

----------------------------------------------------------
通过jq封装后的ajax实现异步:

方法:
jQuery对象.load(url,data,callback);
使用该方法来实现异步校验用户名时,url地址写入处理表单接收用户名的servlet地址,data为传入servlet的参数,
格式为{"参数名(servlet中要接收该参数的名字)":参数名(从网页中获取参数的引用名)};
该方法实现的效果是:将参数(有的话)传入url地址中,然后将结果加载进引用该方法的对象中;

$.get(路径,参数,回调函数,数据类型);该方法已经限定提交的方法是GET类型;
$(selector).get(url,data,function(response,status,xhr),dataType);
其中;
$(selector)为jq的对象;
url为提交的路径;
data为提交时一起传过去的参数;
function(response,status,xhr)为回调函数,其中,response是请求的结果数据;status是i请求的状态,xhr包含XMLHttpRequest的对象
dataType为规定预定要服务器响应的数据类型;
使用该方法来实现用户名校验时,url地址写入处理用户名的servlet地址,传入的参数就是username,然后定义一个回调函数;
函数的内容为判断servlet里面处理完username后传过来的数据,在servlet里面已经有一个判断,内容是,根据username的
值查找在mysql中是否存在该username,不存在的话response.getWriter().print(1),存在的话,response.getWriter().print(2),
这两个就是请求后返回的数据;接下来,回到js中,判断data(请求后处理的数据)的值是1还是2,然后通过id选择器,取得
用户名后面的span标签,再通过jq的html方法,将"<font color = 'green/red'>用户名可以使用/用户名已被注册</font>"
写入到标签中;

-----------------------------------------------------------

$.post(请求路径,参数,回调函数,数据类型);
此方法用法与上面的$.get()一样,就不细说了;

------------------------------------------------------------
在上面两个方法中,还可以将提交按钮的跟用户名校验联立,实现当用户名存在时,提交按钮无法激活;
在判断data内容的语句里,在往span标签写内容的下面,可以添加一句;$("#regbut").attr("disabled",true/false);
这句代码是获取id值为regbut的标签(我们需要在jsp的提交按钮标签中先定义一个id值为regbut),将其属性设置为
"disable",后面设置开启或关闭,当用户名不存在时,设置关闭,存在时,设置开启,就能实现用户名获取和提交按钮的联动;

------------------------------------------------------------

使用jq的ajax模仿百度搜索

首先,在模仿搜索的页面里定义一个搜索栏文本框,还有<div>格子,id值设为"d1",宽度和搜索栏一样的宽度,不定义长度,
实现活动式,搜索栏文本框的id值定义为"word",在页面中引用jquery的js文件和我们自己定义的一个js文件;
先来说说异步实现模仿百度搜索文本框建议栏,在我们定义的js文件中,定义一个页面皆在函数,在里面,获得文本框的id属性
$("#word").keyup,调用keyup方法,实现当在文本框中输入完文字,键盘按键弹起时,调用一个函数,函数内容为,获得文本框
的值:$("#word").val();判断word的值是否有输入数据,若是没有输入,调用hide()方法将div格子隐藏,若是有数据输入,
则调用$.post()方法,将word数据传递到一个servlet文件中进行数据处理,将处理后的数据显示到div格子中,处理的数据是
通过mysql语句的like模糊搜索查找到的数据;传递到servlet时,我们要先获得传递过来的参数,通过方法传递参数,将word
的数据传递到dao层与数据库进行交互,在dao层中,使用"select * from 表格名 where 列名 like word%"进行模糊搜索,
将搜索到的数据封装为word对象,放入list集合中,传递回servlet中;在servlet里,我们或得到包含若干个首字为word里数据的集合,
将集合放进request域中,转发到一个空白的jsp文件;在空白的jsp文件中,我们通过jstl遍历servlet传递过来的集合;再来讲讲
为什么要传递到一个新的空白的jsp集合中,我们使用的是异步,实现局部刷新数据,在js文件中,我们请求结果的路径是servlet文件,
意思就是servlet处理后的结果要返回js中的回调函数里,这样我们就是把一个集合遍历后的结果返回到js文件里,在js文件中
再判断是否有在文本框中输入值,有的话,调用servlet,查找数据库,遍历集合,放回回调函数,回调函数通过show().html(data)方法,
将遍历的结果直接显示到格子中;

许剑鸿 webDay21

Ajax:“Asynchronous Javascript And XML” 即异步 JavaScript和XML
异步和同步的区别:
同步 在用户浏览页面时提交后在新页面刷新之前不能浏览之前的页面
异步 只刷新页面中的一部分 其它部分用户可继续浏览 提高用户体验

AJAX的编写步骤:
* 第一步：创建一个异步对象.
* 第二步：设置对象状态改变触发一个函数.
* 第三步：设置向后台提交的路径
* 第四步：发送请求.

由于AJAX实现异步代码量较多较麻烦 所以一般使用JQuery实现异步请求

url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。


Jq的对象.load(路径,参数,回调函数):load(url, [data], [callback])
$.get(路径,参数,回调函数,数据类型);(较常用)
$.post(路径,参数,回调函数,数据类型);(较常用)

游荣辉
总结
今天学习了AJAX
了解了同步和异步的区别
同步:就是你提交一个请求的时候,你不能浏览页面上的其他地方,只能在哪里等着
异步:就是你提交一个请求的时候,他会帮你调用一个XMLHttpRequest对象帮你去完成,而你还可以在页面上浏览其他的东西
XMLHttpRequest对象里许多的属性和方法
属性:
onreadystatechange : 指定当readyState属性改变时的事件处理句柄。
readyState : 返回当前请求的状态
0(未初始化)   1(初始化)   2(发送数据)    3(数据传输中)    4(完成)
responseText :将响应信息作为字符串返回.
responseXML:将响应信息格式化为Xml Document对象并返回
status : 返回当前请求的http状态码.只读 如200 302 304...
方法:
open( ); 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
AJAX有固定的步骤
第一步：创建一个异步对象.
第二步：设置对象状态改变触发一个函数.
第三步：设置向后台提交的路径
第四步：发送请求.
上面的是早期的AJAX现在都是使用JQ来实现       
Jq的对象.load(路径,参数,回调函数);
$.get(路径,参数,回调函数,数据类型);
$.post(路径,参数,回调函数,数据类型);

万冕

ajax:就是异步请求

同步与异步
同步就是一次性将页面的所有东西全部加载,如果页面内容量大,网速慢,就会在空白页等待特别久,非常影响客户的体验

异步就是可以在客户请求的同时,在发送一个请求去搜寻数据库,在不刷新页面的情况下,刷新页面的一部分,不会中断客户的
请求,这样就不会出现等待空白页的情况

需要掌握的是用jq来进行ajax的异步校验

ajax的特点就是他在js里写好需要触发的函数,然后能将servlet里所有打印的东西都封装进data变量中,然后识别标签或者其他的东西
在把写好的js引入到jsp中
主要格式$("#jq对象").load("/工程名/servlet",{"变量名":变量})
        $.post("/工程名/servlet",{"变量名":变量},function(data){})

需要理解的就是servlet访问转发info(遍历list的页面)之所以跳转那里,是为了打印出info里面的内容,然后让其封装进data