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以一种崭新的方式来 ...

随机推荐

shell函数-3
1.shell函数 1.1.shell函数定义对于重复出现的代码,在shell中可以定义函数,然后在指定的地方调用即可.便于代码复用,提高开发效率. 定义函数的语法如下: function 函数名( ...
ThreadPoolExecutor系列一——ThreadPoolExecutor 机制
ThreadPoolExecutor 机制本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681529.html ...
【ASP.NET Core快速入门】（十四）MVC开发：UI、 EF + Identity实现、注册实现、登陆实现
前言之前我们进行了MVC的web页面的Cookie-based认证实现,接下来的开发我们要基于之前的MvcCookieAuthSample项目做修改. MvcCookieAuthSample项目地址 ...
痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（4）- Flashloader初体验(blhost)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Flashloader. 在上一篇文章 Serial Downloader模式(sdphost, mf ...
程序员如何描述清楚线上bug
案例一个管理后台的bug,把操作记录中的操作员姓名,写成了该操作员的id.原因是修改了一个返回操作人姓名的函数,返回了操作人的id.但是还有其他地方也用这个函数,导致其他地方把姓名字段填写成了操作员 ...
细说MVC中仓储模式的应用
文章提纲概述要点理论基础详细步骤总结概述要点设计模式的产生,就是在对开发过程进行不断的抽象. 我们先看一下之前访问数据的典型过程. 在Controller中定义一个Context, 例如: ...
WPF StringFormat 格式化文本
StringFormat对特定数据格式的转换 WPF中,对数字/日期等的格式化,可参考此篇博客:https://www.cnblogs.com/zhengwen/archive/2010/06/19/ ...
开源IM项目-InChat登录接口设计与实现（基于Netty）
vue 常用语法糖
//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删 el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 ...
【面向对象设计原则】之单一职责原则(SRP)
单一职责原则是面向对象原则五大原则中最简单,也是最重要的一个原则, 他的字面定义如下: 单一职责原则(Single Responsibility Principle, SRP): 一个类只负责一个功能 ...

10-ajax技术简介

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

随机推荐

热门专题