一、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. java中==与equel的区别

    值类型是存储在内存中的堆栈(以后简称栈),而引用类型的变量在栈中仅仅是存储引用类型变量的地址,而其本身则存储在堆中. ==操作比较的是两个变量的值是否相等,对于引用型变量表示的是两个变量在堆中存储的地 ...

  2. Mysql数据库导出数据字典文档Word或者HTML的3个工具

    最近需要将Mysql的数据库导出一份Word的文档出来,本文记录调研后几个可用的工具和方法: 阿里云DMS工具导出 适用于存储在阿里云RDS服务中的Mysql数据库 导出格式支持:Word.Excel ...

  3. Appium python自动化测试系列之Android UIAutomator终极定位(七)

    android uiautomator text定位 可能有人不知道为什么说android uiautomator是终极定位,而且android uiautomator和appium有什么关系呢?如果 ...

  4. 使用acs-engine在Azure中国区部署kubernetes集群详解

    转载请注明出处:http://www.cnblogs.com/wayneiscoming/p/7649642.html 1. acs-engine简介 ACS是微软在2015年12月推出的一项基于容器 ...

  5. Java并发编程之原子变量

    原子变量最主要的一个特点就是所有的操作都是原子的,synchronized关键字也可以做到对变量的原子操作.只是synchronized的成本相对较高,需要获取锁对象,释放锁对象,如果不能获取到锁,还 ...

  6. mysql单独可连接，php连接mysql失败之 Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    此种解决方案使用场景: 1,mysql单独可以启动而且远程工具也可以连接 2,php无法连接. 3,find / -name mysql.sock 可以找到文件路径 4,报错 Can't connec ...

  7. GET 和 POST 比较整理

    差异 上传文件只能使用 POST GET 传输数据有大小限制 GET 传输的数据类型不灵活:GET是使用url来传输数据,那么比如空格字符以及类似&这样的字符就不方便传输.(当然可以使用发送前 ...

  8. LINUX 配置默认程序

    update-alternatives 命令用于配置默认程序,版本切换 1.display 命令,查看命令链接信息 update-alternatives --display name 2.insta ...

  9. C#匹配标签正则，获取标签的值

    比如要获取: <color=#50cccc>头盔坐标:(-0.6, 1.0, 1.2)</color><color=#3d85c6>头盔方向(-0.2, 0.1, ...

  10. Acitiviti笔记（一）

    一.核心组件 ProcessEngine:流程引擎的抽象,对于开发者来说,它是我们使用Activiti的facade,通过它可以获得我们需要的一切服务.类似于一个容器工厂,来保存创建的ProcessE ...