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事件发生,则调用回调函数,向界面输出信息。
  • 相关阅读:
    Python--day43--mysql自增列之起始值和步长
    Python--day43--补充之主键和外键
    Python--day42--MySQL外键定义及创建
    Python--day42--mysql操作数据库及数据表和基本增删改查
    Python--day42--mysql创建用户及授权
    sql数据库基础
    Python--day41--线程池--python标准模块concurrent.futures
    C# 第三方DLL,可以实现PDF转图片,支持32位系统、64位系统
    ASP.NET 使用Session,避免用户F5刷新时重复提交(转)
    (重要,部署和发布)c# webApi 服务端和客户端 详细实例
  • 原文地址:https://www.cnblogs.com/superxuezhazha/p/6340513.html
Copyright © 2011-2022 走看看