本帖最后由 小石姐姐 于 2018-5-30 10:21 编辑
异步AJax 异步: AJax,原生的JS的写法实现这种代码有重复,所以以后选择利用JS的框架去实现是重点。使用异步AJax 来校验用户名是否存在,AJax就是JS + XML,老技术新思想(异步),通过同步了解异步,同步就是整个页面刷新,时间长,需要等待。异步思想是页面局部刷新,只刷新某一块,其他部分不刷新,时间短,不用等待。 AJAX,可以把部分代码写到客户端浏览器,让服务器瘦下来。JS的前台校验高手可以直接绕过,所以还得需要后台校验。 JS中有个XMLHttpRequest对象,能向服务器异步发送请求, XML传输数据的格式,后台给AJAX一个xml文件,就可 以读取它的数据。JSon也是一个传输数据格式,不太占用内存。
JS当中的对象HttpRequest里的:
属性:onreadystatechange状态改变触发函数,readyState=0-4,status得到响应的状态码,responseText获得响应的文本数据,responseXML获得响应的XML数据。
方法:open(请求方式,请求路径,是否异步):异步向服务器发送请求。send(请求参数):发送请求。setRequestHeader(头信息,头的值):POst请求的中文问题。
创建XMLHttpRequest对象:不同的浏览器创建的方式也不同。所以才会用JS的框架的方式。
回调函数: 向后台发送请求,完成之后再回来执行函数。原生代码中(GET方式)只需修改路径和数据写入DIV。EL表达式只能写在jsp中,把路径写活的方式可以在jsp定义一个变量contextPath=${pageContext.request.contextPath}作为文件引入写在前边,然后在js中使用这个变量。
新建一个js文件,获得前台文本框输入的值通过异步(get/post方法)发送请求把数据传到后台,进行校验.在servlet中进行判断,servlet再返回一个数据给js文件,通过这个数据在js里进行判断处理;跟原生比改变的地方就是:异步发请求JS换成JQ方式.
使用JS框架封装成方法只需要传入参数,调用方法就行了,这样比原生代码方便多了。
POST中文处理:request.setCharacterEncoding("UTF-8")
GET中文处理:String name = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8")
向页面写数据:response.getWriter().println() 解决乱码response.setContentType("text/html;charset=UTF-8"); ;document.getElementById().innerHTML=
控制台显示数据:
AJax使用代码重复的多,所以使用JQ中的AJax对用户名异步校验,查询JQ的API中的AJAX
JQ中AJAX的部分方法: JQ对象.load(路径,参数,回调函数);
$.get(路径,参数,回调函数,数据类型);
$.post(路径,参数,回调函数,数据类型);
$.ajax();
参数中[data]表示可写可不写,data代表服务器对当前这次请求的响应;
在注册页面引入JQ的js文件,再引入自己写的js文件,在自己写的js文件中编写代码,可以用load和get/post两种方法,
load意思是将服务器对当前这次请求的响应加载到选择器所选中的元素里面,
$.get(url,{"key":value,},function(data){});key和value值多的话可以用$("#form1").serialize();
$.ajax()应对复杂的业务,更灵活,可以自定义需求,比get/post方式更灵活些,因为get/post只能传四个参数.
使用JQ完成仿百度提示页面:
异步的请求是把返回的list数据,转成一个特定的格式,作为响应的数据显示到页面.
现在采用折中的一种方法转发jsp,再通过EL表达式取出来展示,jsp的本质还是一次servlet.
"select * from user where ...limit 5"表示限制个数为0-5; word+"%"表示以word开头
鼠标悬停的事件:hover
1.如果鼠标悬停只想有样式的效果:可以使用CSS的伪类
2.除了样式的效果还有别的业务逻辑的操作,hover函数
$.ajax({
url:"/day15/ServletDemo3",
type:"POST",
data:{"username":username},
dataType:"text",
success:function(data){
if(data==1){
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").attr
}
}
})
|
|