day19-jQuery&Ajax

来源：互联网发布：手机相册软件下载编辑：程序博客网时间：2024/05/18 01:03

Ajax的底层(了解)

基于jQuery的Ajax(掌握)

2个案例:页面无刷新的请求

1.即时输入异步校验用户名存在2.Baidu输入框的动态提示

【AJAX的概述】：

* AJAX:就是异步的 JavaScript And XML. 老的技术,新的思想

*了解同步和异步的区别:用户的请求的主线不中断, 同时分支出向服务器的请求进行局部刷新的方式为异步. 用户请求一次刷新一次的方式为同步.

* AJAX的功能:完成页面的局部刷新,不中断用户的体验. JS中有一个对象XMLHttpRequest对象可以向服务器异步发送请求.

*传统的B/S结构的软件,所有实现功能都需要在服务器端编写代码(胖服务器).现在有了AJAX以后,可以将部分代码写到客户端浏览器(RIA:Rich InternetApplication).另外还有一个类似Ajax的技术是FLEX:AS脚本编程.

* XML:使用XML做为数据传递的格式..现在接口调用普遍使用更为小巧的数据格式JSON(就是key,value的数据格式):

*用到ajax的场景:1搜索框2地图拖动局部加载 3.评论区的时时局部刷新

【XMLHttpRequest】：

Ø 属性:

* readyState :XMLHttpRequest的状态

* onreadystatechange :当XMLHttpRequest状态改变的时候触发一个函数.

* status :获得响应的状态码. 200 , 404 ...

* responseText :获得响应回来的文本数据.

* responseXML :获得响应的XML的数据.

Ø 方法:

* open(请求方式,请求路径,是否异步(布尔)):异步去向服务器发送请求的设置.

* send(请求参数) :发送请求.

* setRequestHeader(头信息,头的值) :处理POST请求方式的中文问题.

Ø 创建XMLHttpRequest对象:(代码不用记,后期不这样用的)

* IE :将XMLHttpRequest对象封装在一个ActiveXObject组件.

* Firefox :直接就可以new创建XMLHttpRequest对象.

function createXmlHttp(){  var xmlHttp;  try{ // Firefox, Opera 8.0+, Safari       xmlHttp=new XMLHttpRequest();    }   catch (e){          try{// Internet Explorer                xmlHttp=newActiveXObject("Msxml2.XMLHTTP");             }           catch (e){             try{                xmlHttp=newActiveXObject("Microsoft.XMLHTTP");             }             catch (e){}             }    }       returnxmlHttp; }

面试题:异步函数演示

对于一个技术的好处与坏处都要俱到,才能体现出良好的思考能力.

最后的正确输出是弹出4次数字3的提示.因为setTimeout是异步的,独立于for之外,运行完for后才运行.但是for中会造成setTimeout状态改变3次,所以加上循环外的1次就是4次.

在for循环中变量在函数function中是全局的。不像java，在函数内声明的变量，在函数外不能直接访问，js都是全局的，所以可以访问.要明确其中第一个3是for外面的alert所弹.用下面的队列思想去解.

JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为“阻塞式执行”。

Tomcat的文件路径下conf->web.xml中的listings属性设置成true后就能显示工程中所有页面信息,再也不用一个一个地址输入.

<init-param>

<param-name>listings</param-name>

<param-value>true</param-value>

</init-param>

(原生AJAX方式)校验用户名是否存在:

对于从后台向前台传递的提示信息为了防止工作空间与页面的编码不一致而导致乱码,我们可以只传递1或者2这样的简单数字,然后再前台js中进行逻辑分析输出对应的内容

xhr.onreadystatechange = function(){

if(xhr.readyState== 4){

if(xhr.status ==200){

var data =xhr.responseText;

if(data == 1){

document.getElementById("s1").innerHTML ="<fontcolor='green'>用户名可以使用</font>";

document.getElementById("regBut").disabled =false;//注册按钮可以点

}elseif(data == 2){

document.getElementById("s1").innerHTML ="<fontcolor='red'>用户名已经被占用</font>";

document.getElementById("regBut").disabled =true;//注册按钮不可点

}

(重点)【JQuery的AJAX】

JQuery的AJAX部分方法:

* Jq的对象.load(路径,参数,回调函数);

这是直接把load后的数据拿过来加载到jq对象所获取到的元素

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

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

* $.ajax();

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

参数是以键值对的形式书写的:{key:value}

案例一:使用JQ异步校验用户名的功能实现注册

【步骤一】：在用户名的文本框中使用onblur事件触发一个函数.不需要在input标签中添加事件,而是建立一个js文件在里面写js代码然后再jsp页面中引入这个js文件,此外只需要给添加一个id和标签后添加一个<span>用于输出提示.

步骤一:Jsp页面中的代码:

</style>

<scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath }/04_jq_regist/regist.js"></script>

</head>

<tr>

</tr>

【步骤二】：使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.

步骤二:Js文件中的代码:

$(function(){

$("#username").blur(function(){

// 获得文本框的值:

var username = $(this).val();//获取id为username元素的值,也就是文本的内容

// 演示load方法:

//$("#s1").load("/day15/ServletDemo3",{"username":username});

// 演示get/post方法:

$.get("/day15/ServletDemo3",{"username":username},function(data){

if(data == 1){//传给的路径,传过去的参数,回调函数

$("#s1").html("<fontcolor='green'>用户名可以使用</font>");

$("#regBut").attr("disabled",false);//提交按钮的失效设置

}elseif(data == 2){

$("#s1").html("<fontcolor='red'>用户名已经存在</font>");

$("#regBut").attr("disabled",true);

}

});

【步骤三】:servlet中的代码:

* JQuery的异步校验用户名是否存在:

public class ServletDemo3extends HttpServlet {

private static final long serialVersionUID = 1L;

protected voiddoGet(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException {

try{

// 接收参数:

Stringusername =request.getParameter("username");

// 调用业务层:

UserServiceuserService =new UserService();

Useruser =userService.findByUsername(username);

// 判断:

response.setContentType("text/html;charset=UTF-8");

if(user ==null){

// 用户名可以使用.

response.getWriter().println(1);

//response.getWriter().println("<fontcolor='green'>用户名可以使用</font>");

}else{

// 用户名已经被占用

response.getWriter().println(2);

//response.getWriter().println("<fontcolor='red'>用户名已经被占用</font>");

}

}catch(Exceptione){

查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.返回到js的回调函数中实现在页面的输出显示.

重点注意事项:一定要在需要实现校验效果的jsp页面中引入jQuery的js库和自己写的实现功能的js文件

案例二:使用JQ完成仿百度提示页面

【步骤一：】在jsp页面中引入js文件.在js中为输入框添加keyup事件函数.

【步骤二：】获得文本框的值,提交到Servlet中,调用三层查出匹配的list,然后写一个遍历list的jsp页面,但是要去掉网页的其它元素,只要功能代码,作为回调函数的参数.

【步骤三：】显示5个在Servlet中根据提交名称查询相应信息.

. 步骤一

首先要在显示的jsp页面中引入jQuery的js库和上面写的异步查询js文件,

然后再页面输入文本框下方定义一个div用于显示查询结果:

<scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath }/05_jq_search/search.js"></script>

</head>

<body>

<inputtype="text"id="word"name="word"style="width:400px;height:25px;"><inputtype="button"value="黑马一下"></center>

<divid="d1"style="display:none;position:absolute;top:120px;left:440px;border:1px solid gray;width:400px;height:200px;"></div>

</body>

</html>

Search.js中的代码:

$(function(){

// 为文本框绑定事件:

$("#word").keyup(function(){

// 获得文本框的值:

var word = $(this).val();

// 异步发送请求:

if(word !=""){

$.post("/day15/ServletDemo4",{"word":word},function(data){

$("#d1").show().html(data);

});

}else{

$("#d1").hide();

}

});

注意:对回调函数的参数data的理解:

就是提交到的路径servlet以任何形式响应出来的数据,比如servlet可以响应为response.getWriter.println(“”)那data就是指的是输出页面的语句;

或者可以是下面代码的跳转到一个jsp页面,那data就是整个info.jsp的页面内容.

步骤二.Servlet中的代码:

* JQ仿百度提示的SErvlet

public class ServletDemo4 extends HttpServlet {

private static final long serialVersionUID = 1L;

protected voiddoGet(HttpServletRequest request,HttpServletResponseresponse) throwsServletException, IOException {

try {

// 接收来自js发送的异步参数:

request.setCharacterEncoding("UTF-8");

Stringword =request.getParameter("word");

// 调用业务层:

WordServicewordService =new WordService();

List<Word>list =wordService.search(word);

request.setAttribute("list",list);

request.getRequestDispatcher("/05_jq_search/info.jsp").forward(request,response);

}catch (SQLExceptione) {

步骤三.对来自servlet中的信息进行遍历显示

遍历list的info.jsp页面的代码:

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

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>//引用标签库

<tableborder="0"width="100%">

<c:forEachvar="w"items="${ list }">

<tr>

</tr>

</c:forEach>

</table>

补充功能:点击提示列表某一选项后填入文本框

与上一功能基本相同,只是回调函数中的参数的jsp页面和显示的jsp页面稍有不同:

下面是我的项目中的代码:

1.Info.jsp中的代码:

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

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<tableborder="0"width="100%">

<c:forEachvar="p"items="${list }">

<tr>

<td><spanid="${ p.pid }"onclick="doShow('${p.pid}');" >${p.pname }</span></td>

</tr>

</c:forEach>

</table>

//将商品的pid作为参数传递给函数,函数体中可以通过.text()拿到该标签中的内容${p.pname}也就是列表中展示的字段

2.在需要显示的页面中添加的<script>内容:

<scripttype="text/javascript">

function doShow(pid){

var info= $("#"+pid).text(); //获取到相应需要填入输入框的字段

$("#pname").val(info);//将列表中点击的文字内容写给id为pname的文本输入框

$("#d1").hide();//赋值给输入框后隐藏id为d1的提示栏

}

AJAX面试题:

11、AJAX都有哪些有点和缺点？（回答出来优点回答不出缺点的是初级，能回答出缺点的可以是中高级,说明不单单是一个码农而是一个思考者）

答案：最大的一点是页面无刷新，用户的体验非常好。

使用异步方式与服务器通信，具有更加迅速的响应能力。

可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点

ajax不支持浏览器back按钮。

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。

补充资料:

网页状态说明.

javaScript真的是异步吗?

项目中Tomcat无法启动的时候,

关闭eclipse再进任务管理器将所有Java进程中断,并去tomcat本地路径中把相应的项目文件删掉,再重启eclipse就能启动Tomcat了.

阅读全文

0 0