一、什么是Ajax　　

　　1.1、Ajax的定义

　　Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML
　　不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。

　　Ajax：只刷新局部页面的技术
　　JavaScript：更新局部的网页
　　XML：一般用于请求数据和响应数据的封装
　　XMLHttpRequest对象：发送请求到服务器并获得返回结果
　　CSS：美化页面样式
　　异步：发送请求后不等返回结果，由回调函数处理结果

　　1.2、Ajax交互模型

　　　　

　　传统Web交互方式——同步

　　　　

　　AJAX支持Web交互方式——异步

　　　　

二、AJAX在google中的应用

　　2.1、Google Suggest

　　　　

　　2.2、Gmail　　

　　　　

　　2.3、Google Map

　　　　

三、XMLHttpRequest对象

　　JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力，

　　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　3.1、构造方法

　　不同浏览器，甚至相同浏览器不同版本，获取该对象的方式都有所不同。

　　为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

 var xmlhttp;

 if (window.XMLHttpRequest)

   {// code for IE7+, Firefox, Chrome, Opera, Safari

   xmlhttp=new XMLHttpRequest();

   }

 else

   {// code for IE6, IE5

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

   }

　　3.2、常用方法　　　　

方法名

说    明

open(method,URL,async)

建立与服务器的连接

method参数指定请求的HTTP方法,典型的值是GET或POST

URL参数指请求的地址

async参数指定是否使用异步请求，其值为true或false

send(content)

发送请求

content参数指定请求的参数

setRequestHeader(header,value)

设置请求的头信息

　　3.3、常用的属性

　　　　3.3.1、readyState（short类型，只读）: XMLHttpRequest的状态信息　

就绪状态码

说    明

0

XMLHttpRequest对象没有完成初始化

即：刚刚创建。

1

XMLHttpRequest对象开始发送请求

调用了open方法，但还没有调用send方法。请求还没有发出

2

XMLHttpRequest对象的请求发送完成

send方法已经调用，数据已经提交到服务器，但没有任何响应

3

XMLHttpRequest对象开始读取响应，还没有结束

收到了所有的响应消息头，但正文还没有完全收到

4

XMLHttpRequest对象读取响应结束

一切都收到了

　　　　3.3.2、status（short类型，只读）：HTTP的状态码　　

状态码

说    明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

　　　　3.3.3、responseText（String类型，只读）：获得响应的文本内容

　　　　3.3.4、responseXML（document类型，只读）：获得响应的XML文档对象 documednt

　　　　3.3.5、onreadystatechange：指定回调函数

　　　　当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

　　　　readyState 属性存有 XMLHttpRequest 的状态信息。

注：就绪状态是4而且状态码是200，才可以处理服务器数据

　　3.4、实例

　　Myjs.js文件

function getXMLHttpRequest(){

    var xmlhttp;

     if (window.XMLHttpRequest)

       {// code for IE7+, Firefox, Chrome, Opera, Safari

       xmlhttp=new XMLHttpRequest();

       }

     else

       {// code for IE6, IE5

       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

       }

    return xmlhttp;

}

　　test1.jsp

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

    pageEncoding="UTF-8"%>

<html>

<head>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/Myjs.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    window.onload = function(){

        //1、得到XMLHttpRequest对象

        var req = getXMLHttpRequest();

        //alert(request);

    //4、处理响应结果

    req.onreadystatechange = function(){

        //alert(req.readyState);    //查看客户端响应状态

        if(req.readyState ==4){

            if(req.status == 200){    //服务器响应一切正常

                alert(req.responseText);

            }

        }

        }

    //2、建立一个连接

    req.open("get", "${pageContext.request.contextPath }/servletDemo1");

    //3、发送请求

    req.send(null);

    }

</script>

</head>

ServletDemo.java

public class ServletDemo1 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

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

        PrintWriter out = response.getWriter();

        out.print("hello meinv!");

四、验证用户名是否存在

　　首先需要建立一个Myjs.js为了获取XMLHttpRequest对象，上面那个例子已经有了，在这里就不重复了。

reg.jsp

用了两种方法第一种需要在input中加入onblur="ckName()"做焦点失去事件

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

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script>

<title>Insert title here</title>

    <script type="text/javascript">

/*         function ckName(){

            //获取用户名

            var name = document.getElementsByTagName("input")[0];

            //创建XMLHttpRequest对象

            var xhr = getXMLHttpRequest();

            //处理结果

            xhr.onreadystatechange = function(){

                if(xhr.readyState==4){//请求一切正常

                    if(xhr.status==200){//服务器响应一切正常

                        //alert(xhr.responseText);//得到响应结果

                        var msg = document.getElementById("msg");

                        if(xhr.responseText=="true"){

                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";

                            //msg.innerText = "<font color='red'>用户名已存在</font>";

                        }else{

                            msg.innerHTML = "可以使用";

                        }

                    }

                }

            }

            //创建连接

            xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);

            //发送请求

            xhr.send(null);

        } */

        window.onload=function(){

            var nameElement = document.getElementsByName("userName")[0];

            nameElement.onblur = function(){

                var name = this.value;//this等价于nameElement

                //创建XMLHttpRequest对象

            var xhr = getXMLHttpRequest();

            //处理结果

            xhr.onreadystatechange = function(){

                if(xhr.readyState==4){//请求一切正常

                    if(xhr.status==200){//服务器响应一切正常

                        //alert(xhr.responseText);//得到响应结果

                        var msg = document.getElementById("msg");

                        if(xhr.responseText=="true"){

                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";

                            //msg.innerText = "<font color='red'>用户名已存在</font>";

                        }else{

                            msg.innerHTML = "可以使用";

                        }

                    }

                }

            }

            //创建连接

            xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name);

            //发送请求

            xhr.send(null);

            }

        }

    </script>

</head>

<body>

        用户名：<input type="text" name="userName" /><span id="msg"></span><br/>

        密码<input type="password" name="pwd"/><br/>

</body>

</html>

CkNameServlet.java

PrintWriter out = response.getWriter();

        String name = request.getParameter("name");

        if("tom".equals(name)){

            out.print(true);

        }else{

            out.print(false);

        }

    }

五、实验练习AJAX之搜索框（与数据库交互）

　　5.1、结果：当我们使用百度或者google的时候，会发现当我们输入一个提示字后就会出来很多的下拉框提示，这个是通过什么做到局部刷新页面的呢。就是使用了AJAX技术

　　

5.2代码：

　　search.jsp

<div id="divsearch">    //这个定义一个搜索框

    <form action="${pageContext.request.contextPath}/findProductBySearch"

        method="post">

        <table width="100%" border="" cellspacing="" >

            <tr>

                <td style="text-align:right; padding-right:220px">

                Search <input

                    type="text" name="name" class="inputtable"

                    id="name" autocomplete="on"/> <!-- 解决中文提交的问题 -->

                    <input type="image" src="data:images/serchbutton.gif"

                    border="" style="margin-bottom:-4px">

                </td>

            </tr>

        </table>

    </form>

</div>

         //这是给下拉框定义的样式

    <div id="context1" style="display:block;border:1px solid red;background-color:white; width:128px;position:absolute;left:860px;top:135px;">

    </div>

　　javascript中写的代码

<script type="text/javascript"

    src="${pageContext.request.contextPath}/js/my.js">

</script>

<script type="text/javascript">

    window.onload = function(){

        //得到搜索框对象

        var searchElement = document.getElementById("name");

        //得到DIV元素

        var div = document.getElementById("context1");

        searchElement.onkeyup = function(){//给文件框注册按键弹起事件

            //获取文本框的值

            var name = this.value;

            //如果文本框不没有数据时，把div隐藏，且不向服务器发送请求

            if(name==""){

                div.style.display="none";

                return;

            } 

            //获得xhr对象

            var xhr = getXMLHttpRequest();

            //处理结果

            xhr.onreadystatechange = function(){

                if(xhr.readyState==){//请求一 切正常

                    if(xhr.status==){//服务器响应一切正常

                        var str = xhr.responseText;//得到服务器返回的数据

                        var ss = str.split(","); // 把字符串 1001，1002，1003 截成数组

                        var childDivs = "";

                        //循环把数据放入小的div中

                        for(var i=;i<ss.length;i++){

                            childDivs+="<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>"+ss[i]+"</div>";//把数组中的每个元素放到div中

                        }

                        div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中

                        div.style.display="block";//把列表隐藏

                    }

                }

            }

            xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());

            xhr.send(null);

        }

    }

    //鼠标悬浮时，改变背景色

    function changeBackground_over(div){

        div.style.backgroundColor = "gray";

    }

    //鼠标离开时，恢复背景色

    function changeBackground_out(div){

        div.style.backgroundColor = "";

    }

    //填充文本到搜索框

    function writeText(div){

        //得到搜索框

        var searchElement = document.getElementById("name");

        searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中

        div.parentNode.style.display="none";//把context1的div隐藏

    }

</script>

　searchBookAJAXServlet

request.setCharacterEncoding("UTF-8");//只能解决post方式的乱码

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

        String name = request.getParameter("name");

        name = new String(name.getBytes("iso-8859-1"),"UTF-8");

        BookServiceImpl bs = new BookServiceImpl();

        List<Object> list = bs.searchBookByName(name);

        //把集合中的数据转换为字符串返回到网页

        String str = "";

        for (int i = ; i < list.size(); i++) {

            if(i>){

                str+=",";

            }

            str+=list.get(i);

        }

        System.out.println(str);

        //把数据响应到客户端

        response.getWriter().write(str);//str 1001,1002,1003

在serivce业务层中

public List<Object> searchBookByName(String name) {

        try {

            return bookDao.searchBookByName(name);

        } catch (SQLException e) {

            e.printStackTrace();

        }

        return null;

    }

在DAO通过传过来的模糊字得到所有有联系的name

/**

     * 根据书名查找图书 模糊查询

     * @param name

     * @return

     * @throws SQLException

     */

    public List<Object> searchBookByName(String name) throws SQLException {

        QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());

        return qr.query("select name from book where name like ?", new ColumnListHandler(),"%"+name+"%");

    }

}

　　

　　　　

JavaWeb之Ajax的更多相关文章

  1. JavaWeb笔记——ajax异步请求

     1. ajax是什么?   * asynchronous javascript and xml:异步的js和xml   * 它能使用js访问服务器,而且是异步访问   * 服务器给客户端的响应一般是 ...

  2. javaWEB登录ajax传值

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

  3. JavaWeb 之 AJAX

    Ajax ajax:AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新 AJAX:Asynchronous JavaScript and XML,异步 javasc ...

  4. IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例

    案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...

  5. IT兄弟连 JavaWeb教程 AJAX常见问题

    1  中文乱码问题 ●  POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...

  6. IT兄弟连 JavaWeb教程 AJAX中参数传递问题

    使用Ajax发送GET请求并需要传递参数时,直接在URL地址后拼接参数,格式如下: xhr.open('get','请求路径?参数名1=参数值1&参数名2=参数值2...',true); 使用 ...

  7. IT兄弟连 JavaWeb教程 AJAX的技术构成

    Ajax并不是新的技术,而是之前技术的整合,其中包括JavaScript.HTML.CSS.DOM.XMLHttpRequest.XML和JSON是构成Ajax技术体系技术基石. JavaScript ...

  8. IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题

    Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术,Ajax ...

  9. 【JavaWeb】Ajax基础

    Ajax介绍 Asynchronous JavaScript And XML(异步的JavaScript和XML): Ajax可以在不刷新页面的前提下,进行页面局部更新: Ajax不是新的技术,Aja ...

随机推荐

  1. HDU3790

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. ubuntu linux 下 mysql 学习笔记

    '#' 后为注释 以下为在shell中的操作: 打开终端(terminal)1.登录MySQL mysql-u root -p 输入密码:******2.几个简单的命令 (1)show databas ...

  3. 纯CSS3动画：一棵跳舞的树

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  4. 解决maven 下载 hadoop-client 客户端 报错的问题

    第一.pom.xml配置: <dependency> <groupId>org.apache.hadoop</groupId> <artifactId> ...

  5. DB2 表空间监控

    默认DB2 缓冲池信息监控是OFF, 需要开启(DB2表空间是由缓冲池分配的) CollBufferpool : ============ The CollBufferpool collector c ...

  6. Java语言基本语法（一）————关键字&标识符（Java语言标识符命名规范&Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 ）

    一.关键字 关键字的定义和特点 定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写 下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...

  7. Java 去除 ArrayList 集合中的重复元素

    // One practice package Collection; import java.util.ArrayList; import java.util.Iterator; // 去除 Arr ...

  8. 剖析Asp.Net Web API中HttpController的激活

    在Asp.Net Web API中,请求的目标是定义在某个HttpController中的某个Action方法.当请求经过Asp.Net Web API消息处理管道到达管道"龙尾" ...

  9. AR入门系列-在vuforia官网的使用-01-史上最详细AR入门教程

    使用高通的vuforiaSDK 网址:https://developer.vuforia.com/ 我们想要使用vuforia首先得注册一个账号 网站会发送邮件给你的邮箱 点击验证链接,验证邮箱 出现 ...

  10. 每天一个linux命令(47)--scp命令

    scp是secure  copy 的简写,用于在Linux 下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝而不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当 ...