美文网首页
JavaEE学习day-53：ajax技术

JavaEE学习day-53：ajax技术

作者: 开源oo柒 | 来源:发表于2019-09-28 22:49 被阅读0次

一、ajax技术

1.ajax介绍：

使用ajax实现网页的局部刷新；在保留当前页面信息的基础上显示新的信息。

2.ajax的访问原理：

通过ajax引擎对象对服务器发送请求，使用ajax引擎对象接收服务器响应请求，再进行页面展现。 原理图

3.创建ajax对象：

          //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){//火狐,谷歌...
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){//IE
                ajax = new ActiveXObject("Msxm12.XMLHTTP");
            }

4.ajax的状态码：

0:表示ajax引擎对象创建。
1:表示请求创建但是未发送 ajax.open("get","my");
2:请求发送 ajax.send(null);
3:请求处理完毕，正在接收响应内容。
4:响应内容接收完毕(重要状态)。

5.ajax的相应状态码：

200:表示一切正常。
404:资源未找到。
500:服务器内部错误。

          //声明事件监听函数
            ajax.onreadystatechange=function(){
                //判断ajax的状态码
                if(ajax.readyState==4){
                    //判断状态响应码
                    if(ajax.status==200){
                    //处理响应
                    //获取响应内容
                        var data = ajax.responseText;
                        //使用eval方法将字符串数据转换为js对象
                        eval("var obj="+data);
                    //获取div对象
                    var div = document.getElementById("showdiv");
                    div.innerHTML = data;
                    
                    }else if(ajax.status==404){
                        //获取div对象
                        var div = document.getElementById("showdiv")
                        div.innerHTML = "请求资源不存在";
                    }else if(ajax.status=500){
                        //获取div对象
                        var div = document.getElementById("showdiv")
                        div.innerHTML = "服务器繁忙";
                    }else{
                        //获取div对象
                        var div = document.getElementById("showdiv")
                        div.innerHTML = "未知错误";
                    }
                }   
            }

6.创建和发送ajax的请求：

创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc);
method:表示请求方式
url:请求地址
ansyc:设置异步或者同步请求，true表示异步，false，表示同步。默认是异步的。

  • 请求方式：

（1）get方式:请求数据以?隔开的形式拼接在url的后面。请求数据不能写在send方法中。
（2）post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据&键值对数据..."),如果没有请求数据则ajax.send(null)。

  • 异步和同步：

异步：
当前js函数继续执行，无须等待ajax请求的响应以及响应的处理。
同步：
当前js函数会等待ajax请求以及响应，当ajax响应处理完毕后，继续执行函数的剩余代码。

//发送请求
                    //get请求方式
                         //创建请求
                            ajax.open("get","my?uname=张三&pwd=123",false);
                        //发送请求
                            ajax.send(null);
                    //post请求方式
                        //创建请求
                        ajax.open("post","my",false);
                        //设置请求参数为键值对方式
                        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                        //发送请求
                        ajax.send("uname=张三&pwd=123");
                //异步同步
                    var div=document.getElementById("showdiv");
                    alert(div.innerHTML);
            }

7.ajax使用流程：

（1）创建ajax引擎对象
（2）声明监听函数
//判断ajax状态码
//判断响应状态码
//获取响应信息(普通字符串和json格式的字符串)
//处理响应
（4）创建并发送ajax请求：创建请求(设置请求方式，设置请求地址，设置异步或者同步)
发送请求
（5）其他处理

二、Json学习

1.json的介绍：

  • json的概念：

其实json就是js创建对象的一种格式。保证对象中数据的紧密性 和完整性。

  • 为什么需要使用json：

服务器响应给浏览器的数据应该是字符串类型；但是如果数据量比较大，我们就需要在服务器端将数据拼接成一个良好格式的字符串数据，响应给浏览器。浏览器根据格式进行数据的解析和使用。

  • json的格式：

var 对象名={
键名:值,
键名:值,
...
键名:值
}

2.json的使用：

在服务器端将要响应的数据拼接成json格式的字符串，这样客户端(浏览器端)在接收到响应数据后;可以使用eval方法将json格式的字符串数据直接转换为对应的js对象，便于数据的操作。

  • eval（）方法：

作用将字符串转换为对象。

eval("var obj="+data);//eval("var obj={uid:18,uname:'王五',age:18,fav:'看电影'}")

//使用eval方法将字符串数据转换为js对象
    eval("var obj="+data);
  • toJson()方法：

将java对象转换为对应的json字符串。

//创建对象
        User u = new User(01,"李四","1214",18);
        //json格式的字符串
        String str ="{18,'李四','1214',18}";
         //使用Gson对象
        String str = new Gson().toJson(u);
  • 代码示例：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>json测试</title>
    <script type="text/javascript">
        function check(){
            var stu = {"name":"张三","age":18,"sex":'男'};
            alert(stu.name+"--"+stu.age+"--"+stu.sex);
        }
        function check2(){
            var wek=["day01","day02","day03","day04","day05","day06","day07"];
            for(var i=0;i<wek.length;i++){
                alert(wek[i]);
            }
        }
        function check3(){
            var arr = [{"name":"张三","age":18,"sex":'男'},{"name":"李四","age":20,"sex":'女'}]
            for(var i=0;i<arr.length;i++){
            alert(arr[i].name+"---"+arr[i].age+"--"+arr[i].sex);
            }
        }
    </script>


  </head>
  
  <body>
    <input type="button" value="测试json" onclick="check()"/>
    <input type="button" value="测试json2" onclick="check2()"/>
    <input type="button" value="测试json3" onclick="check3()"/>
  </body>
</html>

三、ajax实现用户名校验

1.实现思路：

（1）用户书写用户名信息，在失去焦点时进行用户校验
（2）失去焦点发送请求到服务器，服务器根据用户名信息去数据库中查询该用户名是否存在。
（3）将校验结果响应给客户端；
（4）在当前页面，也就用户名输入框后显示提示语。

2.CheckServlet

package com.zlw.servlet;

import java.io.IOException; 
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //获取客户端提交的用户名
        String userName  = request.getParameter("userName");
        System.out.println(userName);
        //根据用户名查询数据库是否存在：select * from user where userName= ?;
        if ("dave".equals(userName)) {
            out.print("true");
        } else {
            out.print("false");

        }       
    }
}

3.index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用户名校验</title>
<script type="text/javascript">
    //创建XMLHttpRequest对象
    var ajax;
    function createXMLHttpRequest() {
        //根据不同的浏览器创建不同的XMLHttpReaquest对象
        if (window.XMLHttpRequest) {
            ajax = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            ajax = new ActiveXObject();
        }

    }

    //校验用户名是否存在
    function checkUserName() {
        //1.获取输入用户名
        var userName = document.getElementById("userName").value;
        //2.创建XMLHttpRequest对象
        createXMLHttpRequest();
        //3.打开连接：ajax.open(method, url,true|false)
        ajax.open("get", 'check?userName='+userName, true);
        //发送请求
        ajax.send(null);
        //注册回调函数
        ajax.onreadystatechange = callBack;
    }
    //回调函数：处理服务器端返回的结果
    function callBack() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            var content = ajax.responseText;
            alert(content);
            if (content=='true') {
                document.getElementById("spanName").innerHTML = "<font color=red>用户名已存在</font>";
            } else {
                document.getElementById("spanName").innerHTML = "<font color=green>用户名可用</font>";
            }
        }
    }
</script>
</head>

<body>
    用户名：
    <input type="text" name="userName" id="userName"onblur="checkUserName()" />
    <span id="spanName"></span>
</body>
</html>
  • 用户名可用 结果

4.封装ajax：

  • 为什么使用封装：

在使用ajax进行业务处理时，ajax的代码其实很多地方是相同的。这样造成编写代码时出现了重复编写，影响了开发的效率。

  • 封装的内容：

（1）请求方式：method ；
（2）请求地址：url；
（3）请求参数：data 请求参数的格式为键值对格式的字符串，不同的键值对使用&符号隔开.如果没有请求数据传入null。
（4）响应处理参数:deal200，该参数接收一个js的函数对象，函数对象中声明ajax响应数据的处理逻辑代码。
（5）异步同步设置:ansyc。

  • 代码示例：
//声明ajax函数
function myAjax(method,url,data,deal200,ansyc){
    //创建ajax引擎对象
    var ajax;
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        ajax= new ActiveXObject();
    }
    //声明监听函数
    ajax.onreadystatechange = function(){
        //判断ajax状态码
        if(ajax.readyState==4){
            alert("aaa");
            //判断响应状态码
            if(ajax.status==200){
                //获取响应数据
                var data = ajax.responseText;
                if(deal200){
                    deal200(data);
                }
            }
        }
    }
    //创建并发送请求
    if("get"==method.toLowerCase()){
        //创建请求
        ajax.open("get",url+(data==null?"":"?"+data),ansyc)
        //发送请求
        ajax.send(null);
    }else if("post"==method.toLowerCase()){
        //创建请求
        ajax.open("post",url+(data==null?"":"?"+data),ansyc);
        //发送请求
        ajax.send(data);
    }
}
  • 实现调用：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>封装ajax</title>
<!-- 引入js文件 -->
     <script type="text/javascript" src="js/AjaxUtil.js"></script>
     <!-- 声明js代码域 -->
     <script type="text/javascript">
        //使用ajax进行处理
        myAjax("get","data","uname=张三",function(a){
        alert(a);
        })
     </script>
  </head>
  <body>
  <h4>ajax的封装</h4>
  </body>
</html>

四、jQuery中的ajax

1.jQuery的简介：

jquery是js的一个轻量型框架，已经将js创建的操作进行了封装，而ajax也是js的一部分，所以jQuery也已经将ajax进行了封装。

2.jQuery常用的ajax请求：

$.get(url,data,fn)

url:请求地址
data:请求参数，参数格式为json对象
fn:回调函数，注意函数要声明一个形参，用来接收响应数据。

$.post(url,data,fn)

url:请求地址
data:请求参数，参数格式为json对象
fn:回调函数，注意函数要声明一个形参，用来接收响应数据。

$.ajax({json格式参数}):参数说明参照api;

  • 常见事件：

beforeSend:函数---->发送请求前回调函数 .
complete:函数--->请求完成后回调函数 .
error:函数--->请求失败时回调函数.
success:函数---->请求成功后回调函数。

  • 常用的属性：

type:请求方式。
url:请求的服务端地址。
data:请求数据。

3.代码示例：

  • jQuery.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>校验用户名</title>
    <script type="text/javascript"src = "js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".userName").blur(function(){
                //获取文本框输入的用户名
                var userName = $(this).val();
                
                //使用jQuery中的$.ajax({参数})方法 发送ajax请求
                $.ajax({
                    type:'post',
                    url:'check',
                    data:'userName='+userName,
                    beforeSend:function(){//请求前展示加载图片
                    $("#unameSpan").html("<img src='' with='50px',height=50px/>")
                    },
                    success:function(data){//执行成功调用的回调函数
                    alert(data);
                    if(data=='true'){
                    $("#unameSpan").html("<font color=red>用户名已经被占用</font>");
                    }else{
                    $("#unameSpan").html("<font color=green>用户名可用</font>");
                    }
                    
                    }
                });
            });
        });
    </script>
  </head>
  <body>
    用户名：<input type="text" class="userName" value="" name="userName" id="userName" /><span id="unameSpan"></span>
  </body>
</html>
  • CheckServlet
package com.zlw.servlet;

import java.io.IOException; 
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //获取客户端提交的用户名
        String userName  = request.getParameter("userName");
        System.out.println(userName);
        //根据用户名查询数据库是否存在：select * from user where userName= ?;
        if ("dave".equals(userName)) {
            out.print("true");
        } else {
            out.print("false");

        }       
    }
}
结果 结果

五、ajax实现三级联动案例

1.功能需求：

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中出现对应的该市下面的区/县信息

  • 使用技术：

ajax技术+jsp+servlet+jdbc；

2.需求分析：

（1）创建页面：页面中有三个下拉框，分别为省、市、区/县
（2）页面加载成功发起ajax请求，请求省的信息，并将响应结果
填充到省下拉框中
（3）选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求
请求该省下的市信息，并将响应数据填充到市下拉框
（4）选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求
请求该市下的区/县信息，并将数据填充到区/县下拉框中

3.具体实现：

  • 数据库设计：
image.png

4.代码示例：

  • 操作数据库JDBC：
package com.zlw.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.zlw.dao.AreaDao;
import com.zlw.pojo.Area;
import com.zlw.util.DBUtil;

public class AreaDaoImpl implements AreaDao {
    /**
     * 根据parentid查询省份信息
     */
    @Override
    public List<Area> getAreaInfoService(int parentid) {
        List<Area> list = new ArrayList<Area>();
        Connection conn= null;
        String sql = "select * from area where parentid=?";
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            conn = DBUtil.getConnection();
            ps = conn.prepareStatement(sql);
            ps.setInt(1, parentid);
            rs = ps.executeQuery();
            while(rs.next()){
                Area area = new Area();
                area.setAreaid(rs.getInt("areaid"));
                area.setAreaname(rs.getString("areaname"));
                area.setParentid(rs.getInt("parentid"));
                area.setArealevel(rs.getInt("arealevel"));
                area.setStatus(rs.getInt("status"));
                list.add(area);
            }
            
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            DBUtil.closeAll(rs, ps, conn);
        }
        
        return list;
    }
}
  • Servlet
package com.zlw.serlvet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.zlw.pojo.Area;
import com.zlw.service.AreaService;
import com.zlw.service.impl.AreaServiceImpl;

public class AreaServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        //获取请求信息
        String str = request.getParameter("parentid");
        int parentid = Integer.parseInt(str);
        //处理请求信息
            //获取业务层对象
            AreaService as = new AreaServiceImpl();
            List<Area> list = as.getAreaInfoService(parentid);
        //响应处理结果
            response.getWriter().write(new Gson().toJson(list));
    }
}
  • jsp界面实现：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>三级下拉框</title>
   <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
   <script type="text/javascript">
    function parent(){
    
    $.get("area","parentid=0",function(data){
        var areas = eval(data);
        var sel = $("#parent");
        //清空原有内容
        sel.empty();
        //遍历
        for(var i=0;i<areas.length;i++){
            sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
        }
    })
    
    }
    function city(value){
    var areaid = value;
        $.post("area","parentid="+areaid,function(data){
            var areas = eval(data);
        var sel = $("#city");
        //清空原有内容
        sel.empty();
        //遍历
        for(var i=0;i<areas.length;i++){
            sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
        }
        })
    }
    function town(value){
    var areaid = value;
    $.post("area","parentid="+areaid,function(data){
            var areas = eval(data);
        var sel = $("#town");
        //清空原有内容
        sel.empty();
        //遍历
        for(var i=0;i<areas.length;i++){
            sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
        }
        })
    }
    
   </script>
  </head>
  
  <body style="background-color: gray; color: green;" onload="parent()">
  <div style="margin: auto;width: 750px;margin-top: 250px  ">
    省：<select name="parent" id="parent" style="width: 100px;height:30px;"  onchange="city(this.value)"></select>
    市：<select name="city" id="city" style="width: 100px;height:30px;" onchange="town(this.value)"></select>
    区/县：<select name="town" id="town" style="width: 100px;height:30px;"></select>
   </div>
  </body>
</html>
  • 实现效果：
结果 结果 结果

相关文章

  • JavaEE学习day-53：ajax技术

    一、ajax技术 1.ajax介绍： 使用ajax实现网页的局部刷新；在保留当前页面信息的基础上显示新的信息。 2...

  • JAVAEE——Ajax

    Ajax概述 什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 ...

  • JavaEE——Ajax

    声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互...

  • 91、【JavaEE】【Ajax】Ajax

    1、概述 Ajax，全称 Asynchronous JavaScript And XML（异步的 JavaScri...

  • day01 spring起步

    一、后端开发的概念和技术栈 1.1后端开发 1.2技术栈 二、javaEE 2.1什么是javaEE JavaEE...

  • 为什么那么多人学JavaEE 扣丁学堂JavaEE培训好吗

    现在学习JavaEE开发技术的人不断的增加，不论是参加JavaEE培训学习还是看视频或者书籍自学的人都不在少数，为...

  • 03-撩课JavaEE-Tomcat服务器

    一、Java分类 JavaSE JavaEE JavaME 二、JavaEE规范JavaEE的共有13个技术规范 ...

  • 没有基础参加扣丁学堂JavaEE培训怎么样

    也许有的朋友已经发现了，现在有很多的人都参加JavaEE培训学习JavaEE开发技术，这是为什么呢?参加JavaE...

  • JavaEE之 Ajax

    温馨提示：本文阅读需要6分钟，建议收藏后阅读！ 有小伙伴留言说 想要 Ajax 今天我们就来一起认识 Ajax 吧...

  • Ajax技术 2018-04-07

    AJAX技术 Ajax技术的概述 1.ajax的技术：Asynchronous JavaScript and XM...

网友评论

      本文标题：JavaEE学习day-53：ajax技术

      本文链接：https://www.haomeiwen.com/subject/sypbuctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JavaEE学习day-53：ajax技术|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！