【AJAX】AJAX技术详细解析以及实例(2)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
云解析DNS,个人版 1个月
简介: 【AJAX】AJAX技术详细解析以及实例

GET方式实例演示:

index.jsp:

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
<title>Ajax技术</title>
<script type="text/javascript">
    var xmlhttp;
    //1 创建一个ajax对象
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    function checkGet(obj) {
        //进行数据格式检验-这里省略了。
        var name = obj.value;//获取用户填入的用户名
        var url = "<c:url value='/OneServlet?name=" + name + "' />";
        //2 设置通讯方式和地址
        xmlhttp.open("GET", url, true);//异步--多线程
        //3 设置访问成功后的 js对象(回调函数)
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {//服务器的响应消息接收完毕
                if (xmlhttp.status == 200) {//服务器正常响应
                    var txt = xmlhttp.responseText;//后台的响应信息
                    alert("返回的信息是:" + txt);
                    succ(txt);
                } else {
                    alert("服务器响应出错信息,错误代码:" + xhr.status);
                }
            }
        };
        //4发送---Get方式,没有参数(请求体) ---数据在请求地址中
        xmlhttp.send();
        //如果这里设置xmlhttp.open("GET", url, false);//同步
        //alert("OKOK");//同步时,必须等到ajax回来之后才会执行到send之后。异步时不用等
    }
    function succ(obj) {
        document.getElementById("divGet").innerHTML = obj;
        //divGet.innerHTML=obj;
    }
</script>
<form action="">
        <h3>GET方式的ajax演示</h3>
        Name-GET方式提交<input type="text" name="name" onblur="checkGet(this);" />
        <div id="divGet"></div>
        <h3>POST方式的ajax演示</h3>
        Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" />
        <div id="divPost"></div>
        <br /> <br /> <input type="submit" value="注册">
    </form>

OneServlet:

private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
//      try { //用来演示设置xmlhttp.open("GET", url, false);//同步时,效果更明显而使用的
//          Thread.sleep(3000);
//      } catch (InterruptedException e) {
//          e.printStackTrace();
//      }
        out.println(name+"通过GET方式来访\t\n时间是:"+sdf.format(new Date()) );
    }

web.xml:

写Servlet-不要忘记配置web.xml

<servlet>
    <servlet-name>OneServlet</servlet-name>
    <servlet-class>cn.hncu.servlet.OneServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>OneServlet</servlet-name>
    <url-pattern>/OneServlet</url-pattern>
  </servlet-mapping>

演示结果:

image.png

image.png

POST方式实例演示:

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
<title>Ajax技术</title>
<script type="text/javascript">
    var xmlhttp;
    //1 创建一个ajax对象
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    function checkPost(obj){
        var name=obj.value;//获取用户输入的用户名
        var url = "<c:url value='/OneServlet'/>";
        xmlhttp.open("POST", url, true);
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4){//服务器的响应消息接收完毕
                   if(xmlhttp.status==200){//服务器正常响应
                       var txt = xmlhttp.responseText;//后台的响应信息
                       alert("返回的信息是:"+txt);
                       succPost(txt);
                   }else{
                       alert("服务器响应出错信息,错误代码:"+xhr.status);
                   }
               }
        };
        //注意要设置请求头!!!
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlhttp.send("name="+name);
    }
    function succPost(obj){
        divPost.innerHTML=obj;
    }
</script>
</head>
<body>
    <form action="">
        <h3>POST方式的ajax演示</h3>
        Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" />
        <div id="divPost"></div>
        <br /> <br /> <input type="submit" value="注册">
    </form>
</body>

OneServlet:

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        //int i=100/0;//故意让后台响应500的错误信息
        out.println(name+"通过POST方式来访\t\n时间是:"+sdf.format(new Date()) );
    }

封装AJAX:

是不是感觉上面这样写有点麻烦,其实我们完全可以先配置好ajax函数,在用的时候传入参数就可以了。

我们只要new Ajak(),然后调用里面的get、post函数,进行传值就可以了。

post方式需要多传入一个data参数,get方式就可以不用,因为参数在url中传的。

ajax.js

function Ajax(){
    var xmlhttp;
    //1 创建一个ajax对象
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //url为请求的链接或文件。
    //succ是status返回为200后运行的函数。
    //failure是status返回不为200后运行的函数。
    this.get=function(url,succ,failure){
        //2 设置通讯方式和地址
        xmlhttp.open("GET",url,true);//异步--多线程
        //3 设置访问成功后的 js对象(回调函数)
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4){//服务器的响应消息接收完毕
                if(xmlhttp.status==200){//服务器正常响应
                    var txt = xmlhttp.responseText;//后台的响应信息
                    succ(txt);
                }else{
                    if(failure){
                        failure(xmlhttp.status);
                     }
                }
            }
        };
        //4发送---Get方式,没有参数(请求体) ---数据在请求地址中
        xmlhttp.send();
    };
    this.post= function(url,data,succ, failure){
        //2 设置通讯方式和地址
        xmlhttp.open("POST",url,true);//异步--多线程
        //3 设置访问成功后的 js对象(回调函数)
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4){//服务器的响应消息接收完毕
                if(xmlhttp.status==200){//服务器正常响应
                    var txt = xmlhttp.responseText;//后台的响应信息
                    succ(txt);
                }else{
                    if(failure){
                        failure(xmlhttp.status);
                     }
                }
            }
        };
        //4设置请求头
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //5发送---Post方式,有参数(请求体) <---数据 ※
        xmlhttp.send(data);
    };
}

演示的JSP

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax技术</title>
<script type="text/javascript" src="<c:url value='js/ajax.js'/>"></script>
<script type="text/javascript">
    function checkGet(obj) {
        //进行数据格式检验-这里省略了。
        var name = obj.value;//获取用户填入的用户名
        var url = "<c:url value='/OneServlet?name=" + name + "' />";
        var ajax = new Ajax();
        ajax.get(url, succ, failure);
    }
    function succ(obj) {
        document.getElementById("divGet").innerHTML = obj;
    }
    function checkPost(obj) {
        var name = obj.value;//获取用户输入的用户名
        var url = "<c:url value='/OneServlet'/>";
        var ajax = new Ajax();
        ajax.post(url,"name="+name, succPost, failure);
    }
    function succPost(obj) {
        divPost.innerHTML = obj;
    }
    function failure(obj) {
        alert("服务器响应的错误信息代码:" + obj);
    }
</script>
</head>
<body>
    <form action="">
        <h3>GET方式的ajax演示</h3>
        Name-GET方式提交<input type="text" name="name" onblur="checkGet(this);" />
        <div id="divGet"></div>
        <h3>POST方式的ajax演示</h3>
        Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" />
        <div id="divPost"></div>
        <br /> <br /> <input type="submit" value="注册">
    </form>
</body>
</html>

servlet还是和刚才的是一个!

演示结果:

返回结果为200-正确的页面:

image.png

返回结果为500-错误的页面:

让servlet出一个异常就可以模仿出来了。

例如:int a=12/0;


image.png

目录
相关文章
|
2天前
|
数据采集 存储 API
Python虚拟环境数据共享技术解析:最佳实践与常见误区
本文探讨了Python爬虫开发中如何在虚拟环境中管理数据,提倡使用共享目录、数据库和API进行数据共享。通过创建虚拟环境、安装依赖并提供一个使用代理IP爬取微博数据的示例,阐述了如何配置代理、解析网页及保存数据到共享路径。强调了避免硬编码路径、忽视依赖管理和数据安全性的误区。
25 11
Python虚拟环境数据共享技术解析:最佳实践与常见误区
|
2天前
|
传感器 存储 数据采集
振弦采集仪的技术解析和应用进行详细介绍
振弦采集仪的技术解析和应用进行详细介绍
振弦采集仪的技术解析和应用进行详细介绍
|
2天前
|
传感器 数据采集 安全
工程安全监测中的振弦采集仪技术解析与应用
工程安全监测中的振弦采集仪技术解析与应用
工程安全监测中的振弦采集仪技术解析与应用
|
1天前
|
存储 安全 数据安全/隐私保护
移动APP安全加固技术深度解析
【7月更文挑战第12天】移动APP安全加固技术是保障移动应用安全的重要手段。通过对Android和iOS两大主流平台的安全加固,可以有效防止逆向分析、动态调试、数据篡改等安全威胁。在实际应用中,我们需要结合静态层面、动态层面和数据层面的加固技术,全方位地提升APP的安全性。同时,随着技术的不断发展,我们也需要不断关注新的安全威胁和加固技术,确保移动应用的安全性和稳定性。
|
1天前
|
编解码 前端开发 图形学
【技术深度解析】多平台适配下的UI适配难题:U3D游戏UI错乱的终极解决方案
【7月更文第12天】随着移动设备市场的多元化,Unity游戏开发者面临的一大挑战是如何在不同分辨率和屏幕尺寸的设备上保持UI的一致性和美观性。游戏在高分辨率平板与低分辨率手机上呈现出的UI布局混乱、按钮错位等问题,严重影响玩家体验。本文旨在探讨Unity UI(UGUI)在多平台适配中的最佳实践,通过优化Canvas Scaler设置、灵活运用RectTransform和Anchor Points,以及高效利用设计工具,确保UI的完美适配。
6 1
|
2天前
|
传感器 数据采集 安全
工程监测仪器振弦采集仪的技术解析与应用介绍
振弦采集仪的技术解析与应用进行介绍
工程监测仪器振弦采集仪的技术解析与应用介绍
|
2天前
|
缓存 图形学 UED
U3D开发技术深度解析:异步场景加载与资源管理优化策略
【7月更文第11天】在Unity3D(简称U3D)游戏开发中,优化场景加载与资源管理是提升用户体验的关键一环。通过实现高效的异步场景加载和智能的资源管理策略,我们能显著缩短玩家的等待时间,提升游戏流畅度。本文将详细介绍这两种技术的应用,并提供实用的代码示例。
7 0
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能、机器学习、深度学习:技术革命的深度解析(二)
人工智能、机器学习、深度学习:技术革命的深度解析(二)
10 0
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能、机器学习、深度学习:技术革命的深度解析(一)
人工智能、机器学习、深度学习:技术革命的深度解析(一)
16 0
|
5天前
|
存储 算法 安全
解析Java中的数据加密与解密技术
解析Java中的数据加密与解密技术

推荐镜像

更多