一、Web 2.0的特点

　　提到Ajax不得不提到WEB2.0

　　1、用户贡献内容

　　2、内容聚合RSS

　　3、更丰富的“用户体验”

二、Ajax的作用

　　无刷新：不刷新整个页面，只刷新局部

　　无刷新的好处

　　　　只更新部分页面，有效利用带宽

　　　　提供连续的用户体验

　　　　提供类似C/S的交互效果，操作更方

　　　　

　　　　

三、传统Web与Ajax的差异

　　

四、Ajax简介

　　1、Ajax：异步刷新技术

　　

　2、Ajax工作流程

　　

　　3、Ajax技术的核心-XMLHttpRequest提供异步发送请求的能力

　　　　3.1常用方法

　　　　

　　　　3.2常用属性　　　

　　　　readystate：XMLHttpRequest的状态信息

　　　　

　　　　onreadystatechange：指定回调函数

　　　　status：HTTP的状态码

　　　　

　　　　statusText ：返回当前请求的响应状态

　　　　responseText：获得响应的文本内容

　　　　responseXML：获得响应的XML文档对象

五、功能实现

　　index.jsp

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

    pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

%>

<!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">

<title>注册</title>

</head>

<script type="text/javascript">

    var xmlHttpRequest;

    function validate(){

         var uname = document.getElementById("uname").value;

        if(uname==null || uname==""){

            document.getElementById("unameDiv").innerText = "用户名不能为空！";

        }else{

            //1.创建XMLHttpRequest对象

            xmlHttpRequest = createXmlHttpRequest();

            //2.设置回调函数

            xmlHttpRequest.onreadystatechange = callBack;

            //3.初始化XMLHttpRequest组件

            var url = "CheckNameServlet";

            xmlHttpRequest.open("post",url,true);//get方式

            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            //4.发送请求

            var data="uname="+uname;//需要发送的数据信息，name为用户名输入框获取的值

            xmlHttpRequest.send(data);

        }

    }

    /*

     *创建XMLHttpRequest对象

     */

    function createXmlHttpRequest(){

        if(window.XMLHttpRequest){

            return new XMLHttpRequest();

        }else{//返回值为false时说明是老版本IE浏览器（IE5和IE6）

            return new ActiveXObject("Microsoft.XMLHTTP");

        }

    }

    //Ajax 回调函数

    function callBack(){

        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){

            var data = xmlHttpRequest.responseText;

            if(data == "true"){

                document.getElementById("unameDiv").innerText = "用户名已被使用！";

            }else{

                document.getElementById("unameDiv").innerText = "用户名可以使用！";

            }

        }

    }

</script>

<body>

    <form action="" id="form1" >

        <table>

            <tr>

                <td>用 户 名：</td>

                <td>

                    <input  type="text" name="uname" id="uname" onblur="validate();" />&nbsp;<font color="#c00fff">*</font>

                </td>

                <td>

                    <div id="unameDiv" style="display: inline"></div>

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

　　CheckNameServlet

package com.qj.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class CheckNameServlet

 */

@WebServlet("/CheckNameServlet")

public class CheckNameServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public CheckNameServlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

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

        System.out.println(uname);

        PrintWriter out = response.getWriter();

        if("admin".equals(uname)){

            out.print("true");

        }else{

            out.print("false");

        }

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}

Ajax-javascript的更多相关文章

  1. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  2. 自己封装的Ajax - JavaScript

    1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...

  3. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  4. 初见Ajax——javascript访问DOM的三种访问方式

    最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...

  5. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  6. PHP Ajax JavaScript Json 实现天气信息获取

    使用第三方服务 间接方式 思路 使用到的服务 实现代码 前端完整代码 总结 要在自己的网站上添加一个天气预报功能,是一个很普通的需求,实现起来也不是很难.今天来介绍几个简单的方法. 使用第三方服务 有 ...

  7. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  8. jquery ajax post, get, javascript ajax post, get 处理

    ajax 创建 XMLHttp 对象IE7 以上的版本都支持 XMLHttpRequestIE7 以下的用 ActiveXObject async:true,  // 当false 时,当执行完这个才 ...

  9. AJAX简介

    基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...

  10. 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance

    提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...

随机推荐

  1. 创建mongodb副本集操作实例

    一:概念 相关概念及图片引用自这里 mongodb副本集: 副本集是一组服务器,其中一个是主服务器,用于处理客户请求:还有多个备份服务器,用于保存主服务器的数据副本.如果主服务器崩溃了,备份服务器自动 ...

  2. bzoj1812 [Ioi2005]riv

    riv 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄--名叫B ...

  3. C＃ 相对路径转绝对路径

    如果是路径相对路径,使用 Path 转换 System.IO.Path.Combine(文件夹, relativePath); 文件夹就是相对的文件夹. 这样就可以把相对路径转绝对. 参见:http: ...

  4. wordpress 显示数学公式 (MathJax-LaTeX)

    blog 不放一堆数学公式怎么能显得高大上,所以 MathJax-LaTeX 也是必装的插件之一了. 一.安装 MathJax-LaTex 插件 直接在 wordpress 插件中,搜索并安装 Mat ...

  5. hash在URL上的用法及作用

    阅读目录 1. # 2. ? 3. & 回到顶部 1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http ...

  6. Noip2016组合数（数论）

    题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...

  7. Java 7 JVM和垃圾收集

    ---恢复内容开始--- 写JAVA程序,一定要了解JVM(JAVA Virtual machine)一些基础知识和垃圾收集.如果对JVM已经很了解了,可以不用继续往下阅读了.本文只针对Java 7, ...

  8. C#导出.csv格式的excel表

    .cs文件直接贴代码: using System; using System.Collections.Generic; using System.Data; using System.IO; usin ...

  9. [译]ASP.NET Core 2.0 本地文件操作

    问题 如何在ASP.NET Core 2.0中受限地访问本地目录和文件信息? 答案 新建一个空项目,修改Startup类,添加访问本地文件所需的服务: public void ConfigureSer ...

  10. Jungle Roads（最小生成树）

    Jungle Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...