一.ajax是什么？
是网页中的异步刷新技术。其核心是js+xml
二.执行过程
1.js的核心对象XMLHttpRequest是一个具备像后台发送请求的一个对象
2.XMLHttpRequest可以异步发送请求
3.指定回调函数
4.等待后台响应，这个过程是异步的。此时网页中的其他元素是处于可用状态
5.响应得到后会执行回调函数来局部刷新网页
三。好处：
1.用户体验感增强
2.不用等待操作结果
3.提高带宽的使用率

四。Json数据的使用
1.json是一种纯字符串的数据格式，可以用来描述复杂的对象或数组
2.使用场景：可以将java对象和json格式的数据互相装换
3.使用步骤，在项目中要加入json转换的jar包

实例：验证用户名重复+省市区下拉列表联动

　　checkUsername.jsp

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

    pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>"/>

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

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

<title>Insert title here</title>

</head>

<script type="text/javascript">

    var xmlhttp;//全局变量

    function checkName(value){

        //1.要获取XMLHttpRequest对象

        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

          xmlhttp=new XMLHttpRequest();

        }else{// code for IE6, IE5

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

        }

        //指定回调函数

        xmlhttp.onreadystatechange=reback;//回调函数是专门处理后台响应后的数据变化

        //打开连接 指定提交方式，指定url地址  指定是否异步（true为异步 false同步）

        //js中向后台传中文参数需要转码encodeURI('张三')

        xmlhttp.open("post","ajaxCheckName?name="+encodeURI(value),true);

        //设置传参方式为表单提交

        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //发送请求

        xmlhttp.send();

    }

    function reback(){

        //判断各种响应状态

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

            //获取后台响应过来的数据，只能接收字符串

            if(xmlhttp.responseText=='true'){//用户名重复

                document.getElementById('mess_name').style.color="red";

                document.getElementById('mess_name').innerHTML="用户名重复";

            }else{

                document.getElementById('mess_name').style.color="green";

                document.getElementById('mess_name').innerHTML="用户可用";

            }

        }

    }

    //Jquery的方式来做ajax，效果同上

    $("document").ready(function (){

        $("#username").bind("blur",function(){

            $.post("ajaxCheckName?name="+this.value,function(data){

                if(data=="true"){

                    $("#mess_name").css("color","red");

                    $("#mess_name").html("用户名重复");

                }else{

                    $("#mess_name").css("color","green");

                    $("#mess_name").html("用户名可用");

                }

            });

        });

    });

    $("document").ready(function (){

        $.post("address?type=province",function(data){

            var str = "";

            console.log(data);

            $.each(JSON.parse(data),function(i,address){

                console.log(i,address.id,address.name,address.type);

                str += "<option value='"+address.id+"'>"+address.name+"</option>";

            });

            $("#pro").html(str);

        });

        $("#pro").bind("change",function(){

            $.post("address?type=city&proid="+this.value,function(data){

                var str = "";

                console.log(data);

                $.each(JSON.parse(data),function(i,address){

                    console.log(i,address.id,address.name,address.type);

                    str += "<option value='"+address.id+"'>"+address.name+"</option>";

                });

                $("#city").html(str);

            });

        });

        $("#city").bind("change",function(){

            $.post("address?type=area&cityid="+this.value,function(data){

                var str = "";

                console.log(data);

                $.each(JSON.parse(data),function(i,address){

                    console.log(i,address.id,address.name,address.type);

                    str += "<option value='"+address.id+"'>"+address.name+"</option>";

                });

                $("#area").html(str);

            });

        });

    });

</script>

<body>

    <button onclick="checkName()">测试</button>

    <div id="myDiv"></div>

    <input name="" onblur="checkName(this.value)">

        <span id="err" style="color: red;"></span> <br>

    <input>

    <div align="center">

        <form action="">

            用户名:<input id="username"><span id="mess_name"></span><br>

            密码:<input><br>

            地址:<select id="pro">

                    <option>请选择省份</option>

                </select>

                <select id="city">

                    <option>请选择城市</option>

                </select>

                <select id="area">

                    <option>请选择地区</option>

                </select>

        </form>

    </div>

</body>

</html>
AjaxCheckNameServlet.java
package com.control;

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;

@WebServlet("/ajaxCheckName")

public class AjaxCheckNameServlet extends HttpServlet{

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

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

        PrintWriter out = resp.getWriter();//获取输出流

        if("海文".equals(name)){//用户名重复

            out.print("true");

        }else{

            out.print("false");

        }

        out.flush();

        out.close();

    }

}
AddressServlet.java
package com.control;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.pojo.Address;

import com.service.AddressService;

import com.service.IAddressService;

import net.sf.json.JSONArray;

@WebServlet("/address")

public class AddressServlet extends HttpServlet{

    IAddressService addSer = new AddressService();

    @Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String type = req.getParameter("type");

        List<Address> list = null;

        if("province".equals(type)){//获取省份数据

            list = addSer.getAllProvince();

        }

        if("city".equals(type)){//获取城市

            String proid = req.getParameter("proid");

            list = addSer.getChildByParentid(proid);

        }

        if("area".equals(type)){//获取地区

            String cityid = req.getParameter("cityid");

            list = addSer.getChildByParentid(cityid);

        }

        //将java对象转换成json数据

        JSONArray json = JSONArray.fromObject(list);

        //将json响应给前台

        resp.setCharacterEncoding("UTF-8");//解决响应的中文乱码问题

        PrintWriter out = resp.getWriter();

        out.print(json.toString());

        out.flush();

        out.close();

    }

}

10-ajax技术简介的更多相关文章

  1. AJAX技术简介

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript ...

  2. SpringMVC: Ajax技术

    SpringMVC:Ajax技术 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网 ...

  3. 掌握 Ajax，第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  4. 10 ajax

    Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w ...

  5. Json介绍与Ajax技术

    AJAX   AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...

  6. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  7. AJAX（一）AJAX的简介和基础

    本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). AJ ...

  8. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  9. Java Servlet 技术简介

    Java Servlet 技术简介 Java 开发人员兼培训师 Roy Miller 将我们现有的 servlet 介绍资料修改成了这篇易于学习的实用教程.Roy 将介绍并解释 servlet 是什么 ...

  10. 你真正的了解Ajax？Ajax技术简述

    Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

随机推荐

  1. [Leetcode]674. Longest Continuous Increasing Subsequence

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...

  2. 在AspNetCore中使用极验做行为认证

    先上效果图 极验的流程 极验官方文档地址 https://docs.geetest.com/install/deploy/server/csharp 简单说明一下极验的验证流程 引用官方的图片 向服务 ...

  3. Asp.Net SignalR 集群会遇到的问题

    SignalR集群 当客户端数量上来,一台server自然是吃不消的.多个server集群部署是必然的解决方案.再通过负载均衡,嗯 简直是完美.但是问题也接踵而来.每个server只能管理到当前ser ...

  4. Python：正则表达式 re 模块

    正则是处理字符串最常用的方法,我们编码中到处可见正则的身影. 正则大同小异,python 中的正则跟其他语言相比略有差异: 1.替换字符串时,替换的字符串可以是一个函数 2.split 函数可以指定分 ...

  5. Java开发知识之Java数组

    Java开发知识之Java数组 一丶数组简介 首先,不管是Java 还是 C++ 还是其它语言.都有数组. (有可能叫法不同) 数组简而言之就是存储一段连续相同数据类型的数据结构 在Java中数组可以 ...

  6. SpringBoot整合系列-整合JPA

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9959865.html SpringBoot整合JPA进行数据库开发 步骤 第一步:添加必 ...

  7. Jenkins结合.net平台综合之监听git仓库并自动摘取最新代码编译

    前面章节我们讲解了Jenkins结合.net平台工具以及一些第三方工具实现项目自动还原,自动编译,自动测试和自动发布.然而实现自动化还有一个关键的步骤就是监听源码仓库变化然后从仓库拉取最新代码,然后再 ...

  8. 第14章 添加JavaScript客户端 - Identity Server 4 中文文档(v1.0.0)

    本快速入门将展示如何构建基于浏览器的JavaScript客户端应用程序(有时称为" SPA "). 用户将登录IdentityServer,使用IdentityServer发出的访 ...

  9. Electron 创建一个空白的界面

    添加应用 首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = ele ...

  10. QT 自定义模态对话框

    新建一个MsgBox类 msgbox.h 代码 #ifndef MSGBOX_H #define MSGBOX_H #include <QDialog> #include <QPus ...