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的原子性
原子性原子性是数据库的事务中的特性.在数据库事务的情景下,原子性指的是:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节. 对于Redis而言,命 ...
【Java基础】【24多线程(上)】
24.01_多线程(多线程的引入)(了解) 1.什么是线程线程是程序执行的一条路径, 一个进程中可以包含多条线程多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景红蜘 ...
C#生成随机数的三种方法
随机数的定义为:产生的所有数字毫无关系. 在实际应用中很多地方会用到随机数,比如需要生成唯一的订单号. 在C#中获取随机数有三种方法: 一.Random 类 Random类默认的无参构造函数可以根据当 ...
【AutoFac】依赖注入和控制反转的使用
在开始之前首先解释一下我认为的依赖注入和控制反转的意思.(新手理解,哪里说得不正确还请指正和见谅) 控制反转:我们向IOC容器发出获取一个对象实例的一个请求,IOC容器便把这个对象实例“注入”到我们的 ...
Java 由浅入深GUI编程实战练习（三）
一,項目介紹 1.可以查看年,月,日等功能.能获取今天的日期,并且能够通过下拉年,月的列表. 2.当程序运行时,显示的时间是系统当前时间. 3.可以手动输入时间,确定后系统跳转到制定的时间. 4.提供 ...
浅谈Java虚拟机内存中的对象创建，内存布局，访问定位
参考于深入理解Java虚拟机这里介绍HotSpot虚拟机(自带的虚拟机) 1.对象的创建对于程序员来说,创建对象的方法: User user1 = new User(); User user2 ...
WEB 实时推送技术的总结
前言随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用 ...
SAP MM ME1M报表结果不科学？
SAP MM ME1M报表结果不科学? 做过SAP MM顾问的都知道,报表ME1M可以查询物料的info record列表,即是说可以以列表的形式批量显示多个物料的采购价格主数据. 但是这个报表有个不 ...
Linux系统性能分析工具 sar--系统活动情况报告
1.结论: sar 命令是linux系统上,分析系统性能的常用工具,可以查看cpu.内存.磁盘IO.文件读写.系统调用, 2.sar会有一个定时任务,定期记录当前系统信息到 /var/log/sa/ ...
跨进程SharedPreferences异常。
诡异的SharedPreferences异常,在ACC之后,SharedPreferences获取不到值了,但是另一个应用可以获取到值.同样的方法,一个正常一个异常. Context c = null ...

10-ajax技术简介

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

随机推荐

热门专题