AJAX提交方法（GET）Demon

2019-11-15 01:02:54

字体：大中小

来源：转载

供稿：网友

Ajax提交方法（GET）Demon

　　AJAX作为一种异步的javascript程序执行方法，极大的弥补了HTTP协议的不足（HTTP协议为无状态协议），可以无需加载整个页面，只需加载所需数据即可，浏览器内置的xmlHttp对象有open()方法，可以提供，JS的异步操作。

　　下面演示一个GET方法的小例子，GET与POST相比，当传输数据大时，有罕见字符时，建议使用POST；

　　首先我们创建一个.html文档，名称随意，在里面输入：

<body>        <script type="text/Javascript" src="1.js"></script>        用户注册：<br/>        用户编号：<input type="text" name="str1" id="str1" /><br/>        用户名称：<input type="text" name="str2" id="str2" /><br />        <input type="button" value="注册" onclick="test();" />        <p id="mydiv"  ></p>  </body>

　　这个是body之内的代码，主要就是一个前端的界面，底下的<p></P>显示从servlet里面的返回值。

　　创建一个1.js文件，代码:

var xmlhttp = null;/** *  */function test(){    if(window.XMLHttPRequest){        xmlhttp = new XMLHttpRequest();    }else if(window.ActiveXObject){        xmlhttp = new ActiveXObject("Micorsoft.XMLHTTP");    }else{        alert("创建对象失败");    }        str1 = document.getElementById("str1").value;    str2 = document.getElementById("str2").value;        xmlhttp.onreadystatechange = test2;    xmlhttp.open("GET", "servlet?str1="+str1+"&str2="+str2, true);    xmlhttp.send(null);    }function test2(){    if(xmlhttp.readyState == 4){        if(xmlhttp.status == 200){            var str3 = xmlhttp.responseText;            document.getElementById("mydiv").innerHTML =str3;        }    }else{        document.getElementById("mydiv").innerHTML = "耐心等待...";    }}

　　下面配置servlet代码，创建一个sevlet类，在doGet()方法里面写:

response.setContentType("text/html");        PrintWriter out = response.getWriter();        String str1 =new String(request.getParameter("str1").getBytes("ISO-8859-1"),"UTF-8");        String str2 =new String (request.getParameter("str2").getBytes("ISO-8859-1"),"UTF-8");        String responseText = "userNumber is:"+str1+",userName is:"+str2+"[Menthod is GET]";        out.println(responseText);        out.close();

　　很简单的servlet,doGet()方法。创建好了之后，在web.xml将servlet的映射（<url-pattern>/servlet</url-pattern>）标签之内，一样。

　　点击注册之后便会显示了。