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

随机推荐

cmake安装配置及入门指南
前言今天,从github下载代码学习,让我用cmake编译,纳尼?make我知道,cmake是啥鬼?天啊,无知很可怕!赶紧mark一波,虽然很耽误学习进度,但感觉还是要get一波! 一.安装准备感 ...
CSRF 漏洞测试
CSRF简介: CSRF中文名:跨站请求伪造,英文译为:Cross-site request forgery,CSRF攻击就是attacker(攻击者)利用victim(受害者)尚未失效的身份认证信息 ...
PC逆向之代码还原技术,第五讲汇编中乘法的代码还原
目录 PC逆向之代码还原技术,第五讲汇编中乘法的代码还原一丶简介乘法指令 1.乘法指令 2.代码还原注意问题二丶乘法的汇编代码产生的格式 1.高级代码观看 2.乘法的汇编代码还原. 三丶乘法总结 ...
微服务浪潮中，程序猿如何让自己 Be Cloud Native
前言 CNCF 与 Cloud Native 这两个技术词汇最近频频走进了程序员的视野,一切和他能搭上边的软件意味着标准.开放.时尚,也更能俘获技术哥哥们的心:这篇文章不想去带大家重温这个词汇后面的软 ...
Java提高班（二）深入理解线程池ThreadPool
本文你将获得以下信息: 线程池源码解读线程池执行流程分析带返回值的线程池实现延迟线程池实现为了方便读者理解,本文会由浅入深,先从线程池的使用开始再延伸到源码解读和源码分析等高级内容,读者可根据 ...
Spring Boot 2.x（九）：遇到跨域不再慌
什么是跨域首先,我们需要了解一下一个URL是怎么组成的: // 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ ...
Go语言系列文章
这个系列写的不是很好,未来重构. Go基础系列 Go基础 Go基础 1.Go简介 2.Go数据结构struct 3.构建Go程序 4.import导包和初始化阶段 5.array 6.Slice详解 ...
将excel按照某一列拆分成多个文件（方案整理）
1解决方案:将excel按照某一列拆分成多个文件 https://blog.csdn.net/ntotl/article/details/79141314 2遇到的问题:解决vbe6ext.olb不能 ...
JavaScript-数字和字符串比较大小
JavaScript经常会比较字符串的大小,有的时候容易混淆,因此简单的梳理一下JavaScript字符串的比较: //1.数字比较 console.log('数字比较:' + (12 < 3) ...
Ext.extend
Ext.extend:老版本的定义类,单继承有两种使用方法,具体见附件中的Extend1.html和Extend2.html 附件如下: Ext.extend.zip

10-ajax技术简介

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

随机推荐

热门专题