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. php rsa加密解密实例

    1.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以) 下载开源RSA密钥生成工具openssl(通常Linux系统都自带该程序),解压缩至独立的文件夹,进入其中的bin ...

  2. mybatis 中的where标签

    mybatis中的where标签可以去除 开头的 and 或者 or 但是放在后面的不行 失败的: <select id="countNotesByParam" parame ...

  3. bzoj 1179[Apio2009]Atm (tarjan+spfa)

    题目 输入 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口编号.接下来N行,每行一 ...

  4. tarjan讲解（用codevs1332（tarjan的裸题）讲解）

    主要借助这道比较裸的题来讲一下tarjan这种算法 tarjan是一种求解有向图强连通分量的线性时间的算法.(用dfs来实现) 如果两个顶点可以相互通达,则称两个顶点强连通.如果有向图G的每两个顶点都 ...

  5. LZW压缩算法——简明原理与实现

    LZW和哈夫曼编码一样,是无损压缩中的一种.该算法通过建立字典,实现字符重用与编码,适用于source中重复率很高的文本压缩.本文首先讲下LZW的编解码原理,然后给出LZW的实现code. ***** ...

  6. An entity object cannot be referenced by multiple instances of IEntityChangeTracker 的解决方案

    使用EF对建立了关系的表新增记录时出现: An entity object cannot be referenced by multiple instances of IEntityChangeTra ...

  7. 正则匹配test

    var t='VARCHAR(5)' var pattern=/VARCHAR\(\d+\)/g pattern.test(t)//true test()返回false true 但是有哪位小伙伴能告 ...

  8. [原][C#][winForm]分级基金折溢价WinForm网络计算器

    分级基金折溢价WinForm网络计算器 通过子/母基金代码,从 [ 东方财富网,天天基金网,新浪 ] 抓取分级基金的子母基金数据(代码,名称,净值,价格), 并计算出子基金(A基金,B基金)以及母基金 ...

  9. J2ObjC 1.0 发布，将 Java 转换为 Objective-C

    J2ObjC 是一个Google开发的开源工具,用于将Java代码转换为Objective-C代码.其目的是为了能在iOS平台上重用Android平台.web服务器端的Java代码.服务器端代码的转换 ...

  10. MVC学习系列1--什么是MVC

    上面的虚线表示:被动角色.实线表示:主动角色. 1.控制器和视图:控制器和视图是双向的关系,但控制器的关系更主动. 当控制器是主动的角色的时候,控制器决定要显示哪一个View:当视图为主动角色时,视图 ...