一、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. C++的socket编程学习

    前言 不得不承认作为一个前端开发,仍有一个后台开发的梦.从socket通信开始学习,在工作之余补充学习点相关知识,记录下学习的过程. 服务端 服务器代码如下,在设置listen之后,通过accept获 ...

  2. AspectCore.Extension.Reflection : .NET Core反射扩展库

    在从零实现AOP的过程中,难免会需要大量反射相关的操作,虽然在.net 4.5+/.net core中反射的性能有了大幅的优化,但为了追求极致性能,自己实现了部分反射的替代方案,包括构造器调用.方法调 ...

  3. FormView控件下DropDownList是否可以绑定

    在网站下,FormView控件下是可以通过绑定DropDownList的SelectedValue属性来绑定字段来显示 举例: 1 <asp:DropDownList ID="cboU ...

  4. win10 uwp MVVM 轻量框架

    如果在开发过程,遇到多个页面之间,需要传输信息,那么可能遇到设计的问题.如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法,那么请看本文.如果因为ViewModel代码越 ...

  5. Win10 UWP xaml 延迟加载元素

    xaml新增x:DeferLoadStrategy里面只有Lazy,查询了百度看到MSP_甄心cherish大神说的 xaml使用x:DeferLoadStrategy="Lazy" ...

  6. uva 10118，记忆化搜索

    这个题debug了长达3个小时,acm我不能放弃,我又回来了的第一题! 一开始思路正确,写法不行,结果越改越乱 看了网上某神的代码,学习了一下 coding+debug:4小时左右,记忆化搜索+dp类 ...

  7. Java调度线程池ScheduledThreadPoolExecutor源码分析

    最近新接手的项目里大量使用了ScheduledThreadPoolExecutor类去执行一些定时任务,之前一直没有机会研究这个类的源码,这次趁着机会好好研读一下. 该类主要还是基于ThreadPoo ...

  8. HTTP认证方式与https简介

    HTTP认证与https简介 HTTP请求报头: Authorization [ˌɔ:θəraɪˈzeɪʃn] HTTP响应报头: WWW-Authenticate [ɔ:ˈθentɪkeɪt] HT ...

  9. MySql数据库的基本原理及指令

    1.什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库中的数据进行增加,修改,删除及查询操作. 2.简介 MySQL是一个开放源 ...

  10. 浅析Entity Framework Core中的并发处理

    前言 Entity Framework Core 2.0更新也已经有一段时间了,园子里也有不少的文章.. 本文主要是浅析一下Entity Framework Core的并发处理方式. 1.常见的并发处 ...