10-ajax技术简介

一.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技术简介的更多相关文章

AJAX技术简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript ...
SpringMVC: Ajax技术
SpringMVC:Ajax技术简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网 ...
掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介理解 Ajax 及其工作 ...
10 ajax
Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w ...
Json介绍与Ajax技术
AJAX AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...
Ajax技术
1.ajax技术的背景不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
AJAX（一）AJAX的简介和基础
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介. AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML). AJ ...
Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
Java Servlet 技术简介
Java Servlet 技术简介 Java 开发人员兼培训师 Roy Miller 将我们现有的 servlet 介绍资料修改成了这篇易于学习的实用教程.Roy 将介绍并解释 servlet 是什么 ...
你真正的了解Ajax？Ajax技术简述
Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

随机推荐

Redis【入门】就这一篇！
Redis 概述在我们日常的Java Web开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题,可是一旦涉及大数据量的需求,比如一 ...
TCP的11种状态
TCP的11种状态 TCP三次握手建立连接 Tcp头部六个标志位中,我们要用到三个: SYN:SYN= 1 表示这是一个连接请求或连接接受报文.在建立连接时用来进行同步序号(个人理解是,在建立连接的 ...
痞子衡嵌入式：ARM Cortex-M文件那些事（1）- 源文件(.c/.h/.s)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的source文件. 众所周知,嵌入式开发属于偏底层的开发,主要编程语言是C和汇编.所以本文要讲的source文件主要指的就是 ...
第46章发现端点(Discovery Endpoint) - Identity Server 4 中文文档(v1.0.0)
发现端点可用于检索有关IdentityServer的元数据 - 它返回发布者名称,密钥材料,支持的范围等信息.有关详细信息,请参阅规范. 发现端点可通过/.well-known/openid-conf ...
.Net Excel 导出图表Demo(柱状图，多标签页)
1 使用插件名称Epplus,多个Sheet页数据应用,Demo为柱状图(Epplus支持多种图表) 2 Epplus 的安装和引用新建一个工程文件或控制台应用程序打开 Vs2017 Tools ...
轻松理解 Java HashMap 和 ConcurrentHashMap
前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...
对HTML5标签的认识(二)
---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...
零基础学Python--------第2章 Python语言基础
第2章 Python语言基础 2.1 Python语法特点 2.11注释在Python中,通常包括3种类型的注释,分别是单行注释.多行注释和中文编码声明注释. 1.单行注释在Python中,使用 ...
Linux系统启动详解
系统启动流程通过下图认识下Linux系统的总体启动流程. BIOS BIOS一般负责检查硬件和查找启动设备. MBR:Boot Code MBR只是一段引导代码,真正的引导是由引导程序去执行的. G ...
springboot之mybatis注解形式
springboot整合mybatis对数据库进行访问,本实例采用注解的方式,如下: pom.xml文件 <parent> <groupId>org.springframewo ...

10-ajax技术简介

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

随机推荐

热门专题