zoukankan      html  css  js  c++  java
  • Ajax 学习之动态获取,返回服务器的值

    <%@ 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">
    //创建XMLHttpRequest对象
    var xmlhttp;
    function createXmlHttp(){
    //alert("come in");
    //xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); //在IE中不可以
    xmlhttp=new XMLHttpRequest(); //都可以创建XMLHttpRequest
    return xmlhttp;
    }

    //处理函数
    function deal(){
    //请求状态等于4,响应状态=200;
    if(xmlhttp.readyState==4){
    if(xmlhttp.status==200){
    //alert(xmlhttp.responseText);//获取服务器返回的结果;
    var msg=document.getElementById("msg")  //获取DIV对象,关键在于Var 定义的变量,不加“;”

                                                                                     //而且javascript严格区分大小写,所以document.getElementById("msg") ,必须书写正确
    msg.innerHTML=xmlhttp.responseText;                         //把结果显示在div
    }else{
    alert(xmlhttp.status);

    }
    }
    }
    //xmlhttp=createXmlHttp();
    //alert(xmlhttp);
    function send(){
    //创建xmlhttpRequest对象
    xmlhttp=createXmlHttp();
    //绑定状态函数
    xmlhttp.onreadystatechange=deal;
    //alert("come on");
    var age=document.getElementById("age").value       //通过id,获取input中输入的值
    var url="http://localhost:8080/fujindehuodong/ajaxServer.jsp?age="+age;      //参数相应的动态获取
     
    xmlhttp.open('get',url,true);
    //发送请求;

    xmlhttp.send(null);

    }
    </script>
    </head>
    <body>
    <div id="msg"></div>

    <br/>
    <input type="text" name="age" id="age"></input>
    <input type="button" value="发 送" onclick="send()"></input>
    </body>
    </html>

  • 相关阅读:
    ECMAScript 6学习笔记(二):let和块级作用域
    ECMAScript 6学习笔记(一):展开运算符
    JavaScript的作用域和闭包
    HTML中行内元素的竖直方向的padding和margin是否真的无效
    <input type="text"/>未输入时属性value的默认值--js学习之路
    Matlab 之 FFT的理解和应用
    .NET 5.0实现Consul服务注册
    面向对象编程思想(OOP)
    又再回归一次
    阿里云的OCS缓存机制
  • 原文地址:https://www.cnblogs.com/hqutcy/p/5723832.html
Copyright © 2011-2022 走看看