一、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. jquery各种事件使用方法总结（from：天宇之游）

    ps:本博客转自博主  天宇之游 ,地址:http://www.cnblogs.com/cwp-bg/  ,再次感谢天宇之游.jquery事件使用方法总结 一.鼠标事件1. click():鼠标单击事 ...

  2. 张高兴的 Windows 10 IoT 开发笔记：使用 MAX7219 驱动 8×8 点阵

    GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/MAX7219

  3. 【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器

    [网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器 广东职业技术学院  欧浩源 2017-10-21 1.引言 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...

  4. keepalived实现nginx高可用

    keepalived是什么 keepalived直译就是保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,用来防止单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用)的发 ...

  5. ViewPager使用记录2——展示动态数据

    ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...

  6. RandomAccessFile类进行文件加密

    文件加密/解密示例. package io; import java.io.*; public class encrypt { private File file; //存储文件对象信息 byte[] ...

  7. NotePad++ 正则表达式替换 高级用法 [转]

    转自:http://blog.csdn.net/gdp12315_gu/article/details/51730584 在我们处理文件时,很多时候会用到查找与替换.当我们想将文件中某一部分替换替换文 ...

  8. 【机器学习】支持向量机（SVM）

    感谢中国人民大学胡鹤老师,课程深入浅出,非常好 关于SVM 可以做线性分类.非线性分类.线性回归等,相比逻辑回归.线性回归.决策树等模型(非神经网络)功效最好 传统线性分类:选出两堆数据的质心,并做中 ...

  9. 进程，线程，GIL，Python多线程，生产者消费者模型都是什么鬼

    1. 操作系统基本知识,进程,线程 CPU是计算机的核心,承担了所有的计算任务: 操作系统是计算机的管理者,它负责任务的调度.资源的分配和管理,统领整个计算机硬件:那么操作系统是如何进行任务调度的呢? ...

  10. angular控制器、服务和指令三者之间的关系

    从总体来看,这三个组件的关系如下所示: 服务负责从远端服务器抓取和存储数据. 基于服务构建的控制器将为angular的作用域层次提供数据和功能. 基于服务和控制器构建的指令将直接与文档对象模型(DOM ...