A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

同学们,今天我们主要讲的就是Ajax,这是很重要的一个技术点,主要作用就是来做异步提交。

今日需要掌握的有:
  • 熟练掌握JQuery和Ajax完成注册校验(很重要),传统方式不作要求
  • 学有余力的同学也要把仿百度提示案例掌握


请同学们按照如上要求,总结今日所学。





38 个回复

倒序浏览
陈叶隆
JQuery的AJAX部分方法:
* Jq的对象.load(路径,参数,回调函数);
* $.get(路径,参数,回调函数,数据类型);
* $.post(路径,参数,回调函数,数据类型);

案例一:使用JQ完成对用户名异步校验的功能:
1:设计一个注册页面
2:在用户名的文本框中使用onblur事件触发一个函数.
3:使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.
4:Servlet中根据传入的用户名去数据库进行查询.
5:查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.
$(function(){
        $("#username").blur(function(){
                // 获得文本框的值:
                var username = $(this).val();
                $.get("/day15/ServletDemo3",{"username":username},function(data){
                        if(data == 0){
                                $("#s1").html("<font color='green'>用户名可以使用</font>");
                                $("#regBut").attr("disabled",false);
                        }else if(data ==1){
                                $("#s1").html("<font color='red'>用户名已经存在</font>");
                                $("#regBut").attr("disabled",true);

案例二:使用JQ完成仿百度提示页面:
$(function(){
                $("#word").keyup(function(){
                // 获得文本框的值:
                var word = $(this).val();
                // 异步发送请求:
                if(word != ""){
                        $.post("/day15/Servlet1",{"word":word},function(data){
                                $("#d1").show().html(data);
                        });
                }else{
                        $("#d1").hide();
回复 使用道具 举报
江某人:

今天学习了AJAX和Jquery异步:
AJAX的概述: AJAX:异步的 JavaScript And XML.
                使用的是老的技术,用的是新的思想.
            AJAX的功能:完成页面的局部刷新,不中断用户的体验
            仿百度提示案列 把list集合存入sequence中 在一个新的页面中循环输出

点评

发表于 2019-7-16 00:19
回复 使用道具 举报
刘文峰
Ajax是一种异步刷新网页的技术,可以不用刷新整个页面只让页面局部刷新,不影响页面浏览.现在较为常用的是jquery和ajax结合的技术,代码量少.
常用方法
Jq的对象.load(路径,参数,回调函数);
$.get/post(路径,参数,回调函数,数据类型);

校验用户名:
给文本框添加一个失去焦点事件;获得文本框的值(用户名);调用ajax的方法就可以将数据传递给servlet;到数据库查询用户名是否重复,然后将结果响应给jsp:
使用load方法校验时,响应的结果会被直接写进jsp里(response.getWriter().print(结果));
$.get/post方法校验,可以将结果响应给回调函数括号里的参数,然后可以对参数进行判断,最后在将结果写进jsp里,比load方法多了一步,但是相对的灵活很多.
黑马一下:
给文本框添加一个键盘抬起(keyup)事件;获得文本框的值(查询的);调用ajax的方法就可以将数据传递给servlet:
使用$.get或$.post方法,到数据库使用模糊查询(like)和limit查询多条记录,将记录封装成一个集合,使用请求转发跳到另一个jsp页面(将head及head元素里的所有东西删掉),在页面里可以将集合遍历,页面里的内容会被保存到回调函数的参数里,然后就可以将结果写进一个div里,div设置成隐藏,文本框里有内容可以显示,没有就不显示
回复 使用道具 举报
郑阳阳
AJAX是一个可以向服务器异步发送请求的技术,使用老技术,新思想.
同步与异步:
同步就是点击链接或者提交数据页面才会跳转,整个页面都会刷新.
刷新过程中页面空白,用户体验全无.
异步是点击链接或者提交数据只有局部的页面会进行刷新,
用户可以浏览其余部位的页面,不会中断用户体验.
使用JQ可以更简单的使用AJAX:
jq对象.load(路径,参数,回调函数)
$.get(路径,参数,回调函数,数据类型)
$.post(路径,参数,回调函数,数据类型)
$.ajax();一般不使用,和直接使用AJAX差不多
serialize(); JQ的AJAX传递参数是需要使用

点评

发表于 2019-7-16 00:20
回复 使用道具 举报
侯玉林
1.什么是AJAX(JavaScript And XML):
        js中的一种异步交互技术,通过该技术可以在页面中进行局部刷新.
        核心:当使用了ajax后,浏览器接收了从服务器发送过来的数据时,不再
        直接刷新页面,而是直接传给js中的ajax对象,实现局部刷新.
2.同步和异步的区别:
        参考图一:
3.AJAX的功能:
        完成页面的局部刷新,不中断用户的体验.
4.ajax的历史:
        * 早期的时候JS技术根本不受重视.后台开发人员经常将JS当成一种玩具式语言.JS中有一个对象XMLHttpRequest对象可以向服务器异步发送请求.传统的B/S结构的软件,所有实现功能都需要在服务器端编写代码(胖服务器).现在有了AJAX以后,可以将部分代码写到客户端浏览器(RIA:Rich Internet Application).FLEX:AS脚本编程.
        * XML:使用XML做为数据传递的格式: JSON:
5.属性:
        * readyState                        :XMLHttpRequest的状态
        * onreadystatechange        :当XMLHttpRequest状态改变的时候触发一个函数.
        * status                                :获得响应的状态码. 200 , 404 ...
        * responseText                        :获得响应的文本数据.
        * responseXML                        :获得响应的XML的数据.
5.方法:
        * open(请求方式,请求路径,是否异步)                :异步去向服务器发送请求.
        * send(请求参数)                                                :发送请求.
        * setRequestHeader(头信息,头的值)                :处理POST请求方式的中文问题.
                创建XMLHttpRequest对象:
        * IE                :将XMLHttpRequest对象封装在一个ActiveXObject组件.
        * Firefox        :直接就可以创建XMLHttpRequest对象.
回复 使用道具 举报
AJAX和JQ
何平波
概述:异步的JavaScript and xml
功能:完成页面的局部刷新,不中断用户的体验
XML:使用XML作为数据的格式
XMLHttpRequest对象
方法:
open(请求方式,请求路径,是否异步):异步去向服务器发送请求
send(请求参数):发送请求
setRequestHeader(头信息,头的值):处理POST请求方式的中文问题

JQuery的AJAX部分方法:
Jq的对象.load(路径,参数,回调函数);
$.get(路径,参数,回调函数,数据类型);
$.post(路径,参数,回调函数,数据类型);
$.ajax();
serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.

生词:disabled  让按钮隐藏或者是显示
     attr 修改的缩写
AJAX到底是什么?
其实的话,ajax


案例一总结利用JQ的Ajax方法在注册用户的时候局部刷新提示用户名是否存在
0.引入Js文件
1.先有一个注册页面
2.有表单(表单有id,这里可以jq获取id,然后获取这个id里的值)  提交按钮(有id.这里的id添加一个功能是让用户名存在的话就让注册按钮失效)
3.这里直接可以在注册页面写JQ函数方法,不过为了代码页面的整洁,建议写一个js文件,然后在页面引入
4.获取文本框id,触发一个失去焦点事件,取到表单输入的数据
5.JQ的ajax方法 get(路径,参数,回调函数,数据类型);  $.get("/AjaxAndJQ/TipsServlet",{"username" : username},function(date)
6.判断输入的用户名如果跟数据库一样,提示用户名已存在,反之.
7.可以添加提交功能,如果用户名输入为空或者存在,让注册按钮失效.
$("#subBut").attr("disabled",false) 让注册按钮不会失效
$("#subBut").attr("disabled",true)        让注册按钮失效
var username = $(this).val();  //!!!!!!!  val();  是一个方法  记得加括号

案例二总结仿百度搜索
需求:点一个搜索框,跳出查询的信息的div,可以规定查询多少条,没有输入信息的话,div自动隐藏
这里涉及了jsDom的事件keyup(键盘抬起事件),而且查询的信息要封装进一个集合,根据条件模糊查询信息(包含一个关键词的like'%输入的字%',在like子句中可以使用_或者%作为占位符,_只能代表一个字符,%可以代表任意个字符.),
将查询到的list集合(集合里已经有要查询的信息了),再在一个jsp的页面将这些信息遍历.
$.get("/AjaxAndJQ/SerchServlet",{"username":username},function(data){
"/AjaxAndJQ/SerchServlet":路径   
{"username":username}:前一个是表单的name属性,后一个是表单的数据,这里等同于String username = request.getParameter("username")
function(data);date:一个JSP文件所存的所有的字符串数据,既可以拿到所存的list信息.
$("#d1").show().html(data):id为d1的div写入html所有的date数据,show()显示,前提是这个div要先隐藏.这里有一个判断,如果获取到的信息
不为空的话,那么这个方法就会生效,反之将继续隐藏.
回复 使用道具 举报
渣.. 中级黑马 2018-6-13 13:28:59
8#
柯威龙
今天主要学习了jquery的AJAX部分功能和新知识点AJAX.在学习今天知识点之前我首先学习了什么是
同步异步.同步就是页面的跳转,在jsp页面中我们直接将数据提交到Servlet中.异步是在Servlet中
直接进行数据接收或者处理.数据直接在js和jsp页面中进行操作.AJAX的主要功能也是完成页面的局部
刷新.不中断用户的体验.还学习了HttpRequest对象的部分属性和功能.在使用AJAX的时候有三种编写
的方法.get和post两种,还有一种是使用jq对象.load方法的只需要了解.步骤大概分为四步.
1.创建一个异步对象.
2.设置对象状态改变触发一个函数.
3.设置向后台提交的数据.
4.发送请求
回复 使用道具 举报
q55w66 中级黑马 2018-6-14 11:02:45
9#
王清松
AJAX(Asynchronous JavaScript And XML)
        概述
                完成页面的局部刷新,不中断用户的体验
                使用XML作为数据传递的格式
        入门(了解)
                XMLHttpRequest对象
                        属性
                                onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数
                                readyState:XMLHttpRequest状态
                                        0未初始化
                                        1初始化
                                        2发送数据
                                        3数据传送中
                                        4完成
                                status:获得响应的状态码(200,404....)
                                responseText:获得响应的文本数据
                                responseXml:获得响应的XML数据
                        方法
                                open(请求方式,请求路径,是否异步):异步去向服务器发送请求
                                send(请求参数):发送请求
                                        get方式请求参数写在请求路径中
                                setRequestHeader(头信息,头的值)
                                        处理Post请求方式的中文问题
                        创建XMLHttpRequest对象
                                IE:将XMLHttpRequest对象封装在一个ActiveXObject组件
                                        低版本:var Xhr=new ActiveXObject("Msxml2.XMLHTTP");
                                        高版本:var Xhr=new ActiveXObject("Microsoft.XMLHTTP");
                                Firefox:直接可以创建XMLHttpRequest对象
                                        var Xhr=new XMLHttpRequest();
                实现传统方式的AJAX
                        GET方式提交请求
                                第一步:创建一个异步对象
                                        var xhr=getXhr()
                                                function getXhr(){
   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;
}
                                第二步:设置对象状态改变来触发一个函数
                                        xhr.onreadystatechange = function(){
        if(xhr.readyState==4){//请求发送成功
                if(xhr.status==200){//响应也成功
                        var date=xhr.responseText;//获得响应的文本数据
                        document.getElementById("id").innerHTML=data;//数据写入
                }
        }
}
                                第三步:设置向后台提交的路径
                                        xhr.open("GET","/MyWeb/Servlet",true)
                                        如果要传参数,需要在路径后面用?
                                第四步:发送请求
                                        xhr.send(null)
                        POST方式提交请求
                                比起GET需要多设置一个头信息(open下方)
                                        xhr.setRequestHeader
("Content-Type","application/x-www-form-urlencoded")
                                        第二个参数的值等于<form>表单的属性enctype的值
                                传参通过第四步发送请求时设置
                                        xhr.send("name=Kingdon&password=123")
        JQuery操作AJAX
                (JQ对象).load(路径,参数,回调函数)
                        默认GET方式,传递参数后自动转换为POST方式
                        获得的数据直接写在JQ对象标签的中间
                $.get(路径,参数,回调函数,数据类型)
                        数据类型不传默认返回字符串类型
                        也可以写XML,json
                $.post(路径,参数,回调函数,数据类型)
                        var name=$("#id").val();
$.post("/MyWeb/Servlet",{"name":name,"age":20},function(data){
        $("#div").html(data);
});
                        data可以自己命名,作为返回值
                        回调函数,指的是路径访问完毕后,拿到返回值后,执行的函数??
                $.ajax
                        传统的
                serialize()
                        JQ的AJAX传参的时候需要使用的方法
回复 使用道具 举报
王刘锁
2018-6-12--JQuery&ajax..
通过今天的学习让我找到了自己的短板.发现自己对JQuery和js&html方面的知识基本为零,今天写案例基本败在jquery语法和属性上,回过头去翻笔记也只能想起个大概,很多还是不理解,找到了短板就要去补上,说一下今天学的ajax,javaScript and xml;一种可以在整个页面不刷新的情况下,只刷新一下部分页面的异步发送请求的技术,不会让我们再浏览网站时网速慢造成的网页卡在空白页现象,局部页面的刷新可以改善用户体验,传统的ajax使用方式做个了结就行,我们主要通过两个案例来学习ajax和jquery的结合使用,第一个案例是实现输入用户名,显示用户名是否已经存在.写一个注册界面,定义一个js文件然后引入到jsp中,在js文件中写代码,首先是jquery的入口函数$(function(){}),然后在入口函数大括号内用id选择器获取用户名文本框并添加失去焦点事件$("#username").blur(function(){}),在事件大括号内先获取输入的用户名,
var username =$(this).val();这里用的jq方式(总是忘记写括号还找不出是这个原因,这方面的知识实在太弱了),然后就是异步请求,$.get("请求路径/web_10/LoginServlet",参数{"username":username},响应结果function(data){});异步的重点就是把响应回来的数据写入到data中,然后用jquery来对data操作,把它显示在页面某一部分,这时我们再后台servlet中做的操作是用传过去的用户名去数据库查找,dao层返回查到的user对象,在servlet中判断user是否为空,为空说明用户名不存在可以注册,不为空说明用户名被占用,再根据这两种情况打印response.getWrit().print(0/1);0代表为空,1代表不为空,这里的打印其实就是打印到data中去了,然后我们可以在上面js文件中的响应结果大括号内写判断if(data==0){}else if(data==1){};分别在大括号内获取到jsp页面中用户名输入文本框后面添加的span标签,并写入文字提示$("#s1").html("想显示的内容为0显示可以使用为1显示不可以使用"),还可以设置不可以使用是注册按钮不可点击获取到按钮$("#bute").attr("disabled",false)-(是否禁用,否)这样这个案例的功能基本实现了,当然记得把js引入jsp中,
然后是第二个案例,仿百度搜索提示功能,思想上优点绕,不太好理解,首先写一个搜索页面,一个文本框,一个按钮,按钮没什么用,定义一个js文件,写代码还是jq入口$(function(){}),然后{}内写输入框的键盘抬起事件$("#text").keyup(function(){});事件括号内获取输入的值,var word =$(this).val();然后异步请求$.post("/web_10/SearchServlet",{"word":word},function(data){});后台通过输入的word去数据库模糊查询,返回一个list结果集合存入request域中转发到一个info.jsp的中间jsp文件,这里要注意的是再定义一个info.jsp.这个jsp中的其它自动生成的代码全部删掉,然后写遍历集合jstl的<c:forEach items="${list}">获取每一个word显示<td>${w.word}</td>,这里转发到info.jsp其实也是把jsp中的代码以字符串的形式写到data中,因为jsp会被翻译成servlet在编译成class文件,最后在Java文件中是print("代码")的形式,这里我们回到响应结果大括号内,开始操作data到搜索框下方隐藏的div中,获取到div$("#d1").show().html(data);这样div就显示出来并写入了info.jsp中的代码,经过浏览器识别执行,显示出查询到的数据,可以加上一个判断如果输入框的值为空就把div隐藏$("#d1").hide();到这里这个功能也基本完成,当然还可以加一些其他的特效.还是要抽空来复习jquery的知识!
回复 使用道具 举报
谢洪彬:
JQery&AJAX’
AJAX:异步
今天的学习先回顾了JQery,后面又学习了新的知识AJAX
这里先要说一下同步和异步的区别,同步是等页面全部加载完毕后,浏览器才显示内容,这段时间浏览器是空白的,会造成客户体验差,而异步则是加载完一部分显示一部分,这样在加载的过程中我们也可以浏览到内容
JQery的回顾及新知识的扩张:
隐藏DIV         display : show(显示)  none(隐藏)  jsp
js中可以获取DIV对象直接调用show()来显示,hide()来隐藏
$("#ID对象").html(“值”)--往这个对象标签中写数据
$("#ID对象").prop(‘属性’,) --给某个属性设置值
$("#ID对象").arrt(‘属性’,) --给某个属性设置值
$(this).val();--获取当前对象的value
使用JQery获取事件时,事件名不是以on开头
AJAX需要掌握的知识:
我们需要掌握AJAX中的get(),set()方法,也就是对应的getset方法
直接使用JQuery($)对象直接调用方法
两个方法中都有四个属性
1. 跳转的路径                url=””;
2. 传递的参数                 {“参数名”,参数值}
3. 回调函数      function(date){}
4. 参数的类型
执行顺序: 携带参数--跳转servlet路径--servlet执行完毕后执行回调函数,--带回来的参数会存放到data参数中;
我们还学习了AJAXload(),也就是加载方法,不过这个方法需要获取标签的对象来进行调用,不作为重点了解.
回复 使用道具 举报
郑雪平

今天学习了如何使用AJAX来实现校验用户名是否存在和使用JQ来完成用户名是否存在的校验以及使用JQ来完成模仿百度提示页面的功能。什么是Ajaxs呢?它是异步的 JavaScript And XML,它使用的虽然是老技术,但是却是使用新的编译思想的,ajax的功能是能完成页面的局部刷新从而达到不中断用户体验过程的效果。ajaxd的编写步骤:1.创建一个异步对象;2.设置对象的状态被改变时触发一个函数事件;3.设置向后台提交的路径;4.发生请求。具体代码实现的步骤:1.创建数据库和表文件;2.创建一个注册页面;3.在文本框里使用Onblur事件来触发函数;4.将文本框中的值传入Servlet中;5.根据传入的用户名去数据库查询;6.根据查询结果显示用户名是否可用。
许多网站都会有类似搜索的功能,当在文本框中输入一个字母或者文字的时候,下面就会给出相应提示的信息,这个可以使用JQuery的AJAX的部分来完成.步骤:1.创建一个商品的搜索页面,2.使用键盘弹起keyup事件来触发一个函数,3.将获得的文本框里的值,提交到Servlet中;4.最后在Servlet中根据所提交的名称去查询相关的信息。
回复 使用道具 举报
就是陈强
Jquery&AJAX的一天;
AJAX的功能就是完成局部的页面刷新,不中断用户的体验;
XMLHttpRequest是AJAX的核心:
-属性:1\onreadystatechange---(监听功能)状态改变就触发函数
                        --状态—五种(0,1,2,3,4)
        2\status---获得响应的状态码,就是之前代码出现bug的时候那些200,404,500....
        3\responseText---获得响应的文本数据
        4\responseXML---获得响应的XML
-方法:
        1\open---异步向服务器发送请求
        2\send---发送请求
        3\setrequestHeader---处理post请求中的中文乱码
然后是采用了Jquery的AJAX去实现异步校验;
-有5种的方法,但是我们采用的是get或者post方法:
        -$ . get ( 路径 , 参数 , 回调函数 , 数据类型 )
        -$ . post ( 路径 , 参数 , 回调函数 , 数据类型 )
代码实现过程中的逻辑,个人总结为:
1\访问JSP页面,
2\然后会执行到引入进来的JS中的页面一进来就加载的函数,
3\然后会携带获取到的text中的值调转到servlet
4\在servlet中处理数据并进行判断,将要打印的数据给到data
5\然后判断这个data并做出要执行的动作
回复 使用道具 举报
颜琳琳
今天学习了ajax异步的JavaScript and xml , 该技术是老技术但是使用的是新思想,主要在与JQuery相结合使用 , Ajax在的传统使用方法是用XMLHttpRequest来使用,XMLHttpRequest的属性有:1.readyState  :XMLHttpRequest的状态  2.onreadyStateChange  :XMLHttpRequest改变状态时触发的函数   3.status : 响应的状态码
4.responseText  :获取响应的文本数据  5.responseXML  :获取响应的XML数据
方法有:1. open(请求方式,请求路径,是否异步) :异步向服务器发送请求  2.send(请求参数) :发送请求   3.setRequestHande(头信息,头的值)  :处理post请求中的中文信息
Ajax传统的使用步骤如下:
1创建一个异步对象 2.设置一个对象来触发函数  3.设置后台提交的路径  4.发送请求
其中get和post的请求方式中的不同是:
get设置请求路径是xhr.open("GET","/day15/ServletDemo1?name= aaa&pass=123",true);
发送请求xhr.send(null);
而post是要打开路径:xhr.open("POST","/day15/ServletDemo1",true);
发送请求头:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
发送请求:xhr.send("name=张三&pass=123");
Ajax主要使用的方法是和JQuery相结合使用:其中主要用到JQuery的方法有:
1.jq的对象.load(“请求路径”,”请求参数”,回调函数);
2.$.get(“请求路径”,”请求参数”,”回调函数”);
3.$.post(“请求路径”,”请求参数”,”回调函数”);
4.Serialize :JQ对Ajax传递参数用到的方法
回复 使用道具 举报
汪志阳:
今天主要是Ajax的学习,Ajax是结合JQ语句使用的,
$(function() {
        $("#nameID").blur(function() {
                // 获取文本框的值
                var val = $(this).val();
                $.post("/day0608/LoginServlet",{"username":val},function(data){
                        if(data==2){
                                $("#spanID").html("<font color='red'>用户名已存在</font>")
                        }else if(data==1){
                                $("#spanID").html("<font color='green'>用户名可以注册</font>")
                        }
                })
        })
})
这是检验用户名是否被注册的运用.首先是JQ入口函数固定写法,然后获取在用户名的文本框中使用onblur事件触发一个函数的ID.
获取文本框的值,使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中,进行数据连接数据库进行查询处理,最后再返回给Ajax的回调函数function(data)
在js界面接收data,做最后的判断执行操作.
AJAX的常用语法:
$.get(路径,参数,回调函数,数据类型)
$.post(路径,参数,回调函数,数据类型)

回复 使用道具 举报
黄进安:

1.      JQuery的AJAX部分方法:
* Jq的对象.load(路径,参数,回调函数);
* $.get(路径,参数,回调函数,数据类型);
* $.post(路径,参数,回调函数,数据类型);
--->路径: 要跳转的地址参数: {"key":value} 回调函数: function(data){方法体} data:响应成功的数据
--->选用get或者是post方法取决于在服务器对应的servlet中,为了防止出现乱码使用的是get请求处理乱码还是post请求处理乱码,不对应的话出现中文会出现乱码现象导致功能无法实现
2.       使用JQ完成对用户名异步校验的功能:
l  在页面中导入jQuery包和相关的js文件
l  在用户名框使用失去焦点触发事件
l  在js文件中使用jQuery完成失去焦点事件触发后要进行的操作(使用get或者post方法,将用户输入的用户名提交到后台相关的servlet,然后完成对此用户名是否已经存在数据库的查询,根据查询的结果响应不同的数据给到js的回调函数(data),然后根据data的值进行相关操作即可)
3.       使用JQ完成仿百度提示页面
l  在页面中导入jQuery包和相关的js文件
l  在输入框使用键盘弹起事件
l  在js文件中使用jQuery完成键盘弹起事件触发后要进行的操作(使用get或者post方法,将输入框输入的值提交到后台相关的servlet,在Dao中使用模糊查询和指定查询结果数目(limit)的方式对数据库进行操作,根据查询结果的返回一个集合,把集合存储在request域中转发到jsp中采用jstl方式遍历,遍历的结果返回给到js的回调函数(data), 然后将data数据输出到提示页面的div中即可)


回复 使用道具 举报
常小天
今天的学习了一样新的东西——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(路径,参数,回调函数,数据类型)两个方法使我们的代码大大简化。
回复 使用道具 举报
施炎生
今日总结:
一、使用JQ完成对用户名异步校验的功能:
引入两个JS文件
(<script type="text/javascript" src="${ pageContext.request.contextPath }/04_jq_regist/regist.js"></script>)
注册页面的regist.jsp找到引入的regist.js,执行该js文件的入口函数$(function(){},在该入口函数内继续执行用户名框的失去焦点方法,取得username的值,然后执行JQuery的AJAX部分方法:$.get(路径,参数,回调函数,数据类型);* $.post(路径,参数,回调函数,数据类型);),在Servlet取得返回值进行判断,输出用户名是否被占用语句,并通过$().attr(“disabled”,true或者false)使注册按钮失效或者有效。
二、仿百度提示页面
同上引入两个js文件, jsp找到js,执行该js文件的入口函数$(function(){},在该入口函数内继续键盘弹起方法,取得页面输入框里word的值,然后执行JQuery的AJAX部分方法:$.get(路径,参数,回调函数,数据类型);* $.post(路径,参数,回调函数,数据类型);),在Servlet取得符合查询条件的word值存到list集合,再把集合存到request域中,再转发到jsp(此处的jsp要把html代码删掉,不然这些代码会原样显示到我们要显示的jsp页面)中进行遍历把word值取出,之后回到js中把word值显示到页面jsp中。
三、异步请求和同步请求的区别:
异步请求---打印给data;
同步请求---打印给页面
异步请求---转发到jsp---打印给data;
同步请求---转发到jsp---打印给页面
回复 使用道具 举报
张述明
主要学习两个案例  
JQ异步实现注册用户名校验
第一步:注册页面的用户名栏添加name,id属性,<span id=?>用于信息提示,
       submit处添加id属性  引入js包 自己配置一个js文件   
       导包顺序先js后自己的js

js配置页面
$(function(){
//获得id触发blur事件
$("#id").blur(function(){
//获得文本框中的值   var username=$(this).val();
通过Ajax的$.get("路径 servlet",参数 例{"username":username},"回调方法"function(data){
if(data==1){
//通过id.html向span里打印用户名可用
//还可以通过id来实现用户名已存在,注册按钮失效,反之
可以通过id.attr("disabled",false);
}else if(data==2){
//通过id.html向span里打印用户名重复
通过id.attr("disabled",true);
}

} )

})

})

servlet界面
//接收用户名,request.getParameter("username");
//调用业务层  返回 一个User user
判断  if(user==null)
{
//说明数据库不存在,注册成功
向页面打印一个1   
}else{
//注册失败,打印一个2
}

service
//调用dao层的方法

dao
//查询username返回





案例二模仿百度提示词
首先你需要一个界面  导入一个js和自己配置的js
一个文本框设置id,name属性   一个按钮 设置value属性
div 设置id 隐藏属性  宽 高 边框 位置等


js页面
$(function(){

//通过id触发keyup函数
$("#id").keyup(function(){
//获得文本框的值
Var value=$(this).val();
$.get("路径servlet"""name":文本框的值"回调函数)
})
判断文本框的内容是否为空 不为空显示 调用show().html()  为空 hide() 继续掩藏div
})

servlet
获得参数的值,因为要在界面输出中文所以采用new String转译
调用业务层--dao 层- 返回一个list<>list集合
request.setAttribute("list",list);
转发 到一个"新的jsp"


jsp引入jstl,standard 包
设置一行一列表格
<C:forch var="p" item="${list}">   p.name


dao

sql采用模糊查询并限制个数
select*from表名where pname like? limit?
回复 使用道具 举报
林荣彬
   Jquery&AJAX的一天;
AJAX的功能:完成网页的局部刷新.不中断用户的体验
XML HttpRequest:
属性:
readyState:XMLHttpRequest的状态
onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数.
status        :获得响应的状态码. 200 , 404 ...
responseText:获得响应的文本数据.
responseXML:获得响应的XML的数据.

JQuery的AJAX:部分方法:
JQ的对象.load(路径,参数,回调函数)
$.get(路径,参数,回调函数,数据类型)
$post(路径,参数,回调函数)
$ajax();
serialize();----JQ的ajax传递参数的时候需要使用的方法
用户名异步校验
1:创建表和数据库:
2:设计一个注册页面
3:在用户名的文本框中使用onblur事件触发一个函数.
4:使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.
5:Servlet中根据传入的用户名去数据库进行查询.
6:查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马