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>)标签之内,一样。

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

  

  下面填入数据,点击注册:

  

  可以看浏览器左侧,并没有新加载页面,通过servlet直接更新了部分数据,AJAX成功运用的典型还有Google earth等一些页面即时通讯.

AJAX提交方法(GET)Demon的更多相关文章

  1. AJAX提交方法(POST)Demon

    AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:&qu ...

  2. php判断是否是ajax提交 方法

    /** * 判断是否是AJAX提交 * @return bool */ function is_ajax() { if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) ...

  3. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  4. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  5. jquery的ajax提交时loading提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){   ...

  6. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  7. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  8. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  9. jquery的ajax提交时“加载中”提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){    $("#loading").ajaxStart(function(){    ...

随机推荐

  1. Java--通过Spring AOP进行事务管理

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  2. python之初体验

    1. Python简介: Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明, ...

  3. js中Unicode转义序列

    将某一中文字符转义,可采取在线工具进行转义,http://tool.chinaz.com/tools/unicode.aspx "哈哈" ==="\u54c8\u54c8 ...

  4. XSS跨站测试代码大全

    '><script>alert(document.cookie)</script>='><script>alert(document.cookie)&l ...

  5. ABAP程序互调用:SUBMIT、CALL TRANSACTION、LEAVE TO TRANSACTION

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. 蚂蚁金服寒泉子:JVM源码分析之临门一脚的OutOfMemoryError完全解读

    ➠更多技术干货请戳:听云博客 概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重 ...

  7. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  8. 《javascript权威指南》读书笔记——第一篇

    <javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

  9. jquery数组删除指定元素的方法:grep()

    jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...

  10. ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】

    ASP.NET MVC 中 WebGrid 的 6 个重要技巧 https://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-t ...