zoukankan      html  css  js  c++  java
  • Hello,Ajax

    学习了Ajax技术,写了一个最简单的Ajax应用

    <%@page contentType="text/html; charset=utf-8" language="java" import="java.sql.* " errorPage="" %>
    <%
    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>My JSP 'myHelloWorld.jsp' starting page</title>
        
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
    
        <script type="text/javascript">
            function ok(){
                var xmlhttp;
                if(window.XMLHttpRequest){
                    //非ie
                    xmlhttp=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    try{
                        //ie
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e){
                        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }
                }
                //设定回调函数
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4){
                        if(xmlhttp.status==200){
                            //获取返回值
                            var msgWelcome=xmlhttp.responseText;
                            var msg=document.getElementById("msg");
                            msg.innerHTML=msgWelcome;
                        }
                    }
                }
                //设定请求
                xmlhttp.open("get", "http://localhost:8080/LearnJava/myHelloWorld.do", true);
                //设定http头
                xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                //发送请求
                xmlhttp.send(null);
            }
        </script>
      </head>
      
      <body>
        <span id="msg"></span><br>
        <input type="button" onclick="ok()" value="单击">
      </body>
    </html>
    View Code

    关键代码:

    <script type="text/javascript">
            function ok(){
                var xmlhttp;
                if(window.XMLHttpRequest){
                    //非ie
                    xmlhttp=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    try{
                        //ie
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e){
                        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }
                }
                //设定回调函数
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4){
                        if(xmlhttp.status==200){
                            //获取返回值
                            var msgWelcome=xmlhttp.responseText;//获取response的输出值
                            var msg=document.getElementById("msg");
                            msg.innerHTML=msgWelcome;
                        }
                    }
                }
                //设定请求
                xmlhttp.open("get", "http://localhost:8080/LearnJava/myHelloWorld.do", true);
                //设定http头
                xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                //发送请求
                xmlhttp.send(null);
            }
        </script>

    这里只是一个简单的ajax的应用,将servlet输出信息写入页面中。过程是:

    首先创建一个xmlhttp对象,然后以get方法向servlet发送请求。当

    onreadystatechange事件发生,则调用回调函数,向界面输出信息。
  • 相关阅读:
    day4-叶卓睿
    day3-任清宇
    Cisco show interface 命令详解
    k8s入门系列之guestbook快速部署
    k8s入门系列之扩展组件(二)kube-ui安装篇
    k8s入门系列之扩展组件(一)DNS安装篇
    k8s入门系列之介绍篇
    k8s入门系列之集群安装篇
    SPAN, RSPAN, ERSPAN
    在Linux下记录所有用户的登录和操作日志
  • 原文地址:https://www.cnblogs.com/superxuezhazha/p/6340513.html
Copyright © 2011-2022 走看看