Web 基础29 AJAX入门及其案例

1.1 AJAX的概述

1.1.1概述

  • AJAX是异步的JS和XML,
  • AJAX并不是一种新的编程语言,AJAX是一种使用了现有标准的新方法,
  • AJAX是一种JS与WEB服务器交互的技术,
  • AJAX可以让页面在不需要重新加载的情况下,实现页面内容的更新。
  • AJAX 分开就是 ---异步 js and xml
  • 异步:开了一个线程,然后去发送请求,在这个请求回来之前,我该做什么做什么

1.1.2 学习AJAX必须掌握

  • HTML
  • CSS
  • JS/DOM/jQuery

1.1.3 作用

  • 动态的加载数据,按需取得数据
    • 树形结构
    • 联动菜单
    • 地图
  • 改善用户体验
    • 输入内容会有提示(百度) 带进度条的文件上传(插件) 注册页面
  • 电子商务的应用
    • 购物车

1.2 同步和异步的区别

同步异步的区别.png

1.3 AJAX的入门案例

  我对AJAX的底层原理没有了解,这里只能肤浅的讲解一下使用步骤

1.3.1 这里我先给一个入门案例,看着备注就明白使用步骤了

  • 在JSP页面直接写
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function sendAJAX() {
        //创建请求对象
        var xmlHttp = new XMLHttpRequest();

        //设置请求状态变化时所触发的事件
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {//请求处理完成
                if(xmlHttp.status == 200) {//响应成功
                    alert("ajax???");
                }
            }
        }   
        //创建连接
        xmlHttp.open("POST","http://localhost:8080/myAJAX/AJAXServlet",true);//true 异步
        //发送请求
        xmlHttp.send();
    };
        
    
</script>
</head>

<body>
    <form enctype="application/x-www-form-urlencoded" > </form>
    <input type="button" value="按钮" onclick="sendAJAX();" />
</body>
</html>

来来来 我总结一下

  一共四个步骤

  • 创建请求对象
  • 设置请求状态变化时所触发的事件
  • 创建连接
  • 发送请求
  • onreadystatechange
    • 就是一个属性,
    • 后面跟一个匿名的函数,
    • 关键匿名的函数什么时候调用,关键(状态改变)
  • xmlHttp.readyState 相当于属性readyState的值
描述
0 连接未创建
1 连接已经创建
2 请求已接收
3 请求处理中
4 请求处理完成,响应已经就绪
  • 下面我举个例子
4种状态  让班花帮忙买水
刚开始 忙自己的事  状态0
叫 一声班花 四目相对  建立连接 状态1
我说 买瓶水  状态2
穿好衣服  打扮好 状态3
买水回来 推门进来  状态4 
只关心回来的时候
买到 响应为 200 

1.4 AJAX提交数据至服务器

这里直接修改上面的代码

  • 首先get 请求 先写个客户端
//get请求
xmlHttp.open("GET","/myAJAX/AJAX2Servlet?username=张三&password=123456",true);//直接在URL里面提交
xmlHttp.send();
  • 客户端 servlet
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWrite().println(username+"="+password);//ajax直接接受这里输出的字符串

  • 然后是 post请求

post请求是要写要给form的

<form enctype="application/x-www-form-urlencoded" > </form>//这样就足够了不用写 action 我试了一下不行,因为个连接已经交给ajax 这里不需要你操作了 
//enctype 这个很重要,要和ajax的统一

post请求

xmlHttp.open("POST","/myAJAX/AJAX2Servlet",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置编码类型
xmlHttp.send("username=李四&password=qwerty");//发送请求
  • 总结一下几个常我会写错的点
    • 请求方式
    • 请求资源路径
    • 请求的参数
    • 回调函数(匿名函数)

1.5 AJAX提交获取数据的乱码处理

  对于乱码问题,其实已经遇到很多次了,其实都可以在过滤器里面一次性解决那我还是,总结一下乱码的问题吧。

  • 客户端提交数据包含中文,服务器端获取出来是的乱码

    • get请求

      • 原因:

        • 客户端提交数据:UTF-8 --- url编码 %ED%SD
        • 服务器获取数据:url解码---ISO-8859-1
      • 处理方式:

        • String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
    • post请求

      • 原因:

        • 客户端提交数据:UTF-8
        • 服务器获取数据:ISO-8859-1
      • 处理方式:

        • request.setCharacterEncoding("UTF-8");
  • 服务器端发送数据中包含中文, 客户端(浏览器)获取出来的是乱码

    • 原因:

      • 服务器提交数据:ISO-8859-1
      • 客户端获取数据:UTF-8
    • 处理方式:

      • response.setContentType("text/html;charset=UTF-8");
  • 总结:不管是什么客户端,只要以http协议提交数据,我们获取乱码的处理方式是一样的,Filter统一解决

1.6 校验用户名是否重复(环境搭建)

1.6.1 步骤

  • 导包
  • 导入工具库
  • 创建数据库和表
  • 修改配置

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function checkUsername() {
        var username = document.getElementsByName("username")[0].value;
        var span01 = document.getElementsByTagName("span")[0];
        
        if(username == "") {
            //alert("用户名不能为空!");
            span01.innerHTML = "用户名不能为空!";
            return;
        }
        
        //创建请求对象
        var xmlHttp = new XMLHttpRequest();
        
        //设置事件
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                if(xmlHttp.status == 200) {
                    //alert(xmlHttp.responseText);
                    var data = xmlHttp.responseText;
                    if(data == 0) {
                        //不重复,可以使用
                        span01.innerHTML = "用户名可以使用!";
                    }
                    else {
                        //重复不允许使用
                        span01.innerHTML = "用户名已经被注册!";
                    }
                }
            }
        }
        
        //创建连接
        xmlHttp.open("GET","/myAJAX/RegisterAJAXServlet?username=" + username,true);
        
        //发送请求
        xmlHttp.send();
        
    }
</script>
</head>
<body>
    <h1>注册页面</h1>
    <form action="${pageContext.request.contextPath}/RegisterServlet" method="post">
        用户名:<input type="text" name="username" onblur="checkUsername();"/><span></span>
        <br />
        密码:<input type="password" name="password" />
        <br />
        <input type="submit" value="注册" />
    </form>
</body>
</html>

推荐阅读更多精彩内容

  • Ajax概述: Ajax(Asynchronous JavaScript And Xml),异步的JavaScri...
    南山伐木阅读 188评论 1 3
  • 最近一个项目,测试时采用的Windows下的Tomcat服务器,上传中文文件正常;部署时用到了Linux服务器,上...
    Jackeroo阅读 2,406评论 1 3
  • 亲爱的贝儿, 妈妈给你写这封回信。这是每年生日都要为你写点什么,这次还被你抢占先机,收到你给妈妈的信和礼物,妈妈很...
    朱泓默阅读 178评论 4 6
  • 他是她的流川枫,她是他的苍井空 我不要你踩着七彩云彩来娶我,只要你牵着我的手,走过人群,穿过人群。
    柯柯酱koo阅读 47评论 0 0
  • 贾不假,白玉为堂金作马。阿房宫,三百里,住不下金陵一个史。东海缺少白玉床,龙王来请金陵王。丰年好大雪,珍珠如土金如...
    可人如玉阅读 104评论 0 0
  • 终于下了个早班,约上同事,一起去逛街! 跟同事没太深入的了解,第一次一起去逛街。来到步行街,我就特别兴奋的,...
    赵钱钱阅读 114评论 2 0
  • 一直以为我是个勤俭节约的妹纸,但看完上个月的消费账单后,才发现自己最近堕落了…… 今天去银行办理业务,顺道将自己上...
    赵墨璃阅读 307评论 4 7