`

一个完整的ajax例子 -----get 和post 的区别

阅读更多

客户端:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function createQueryString() {
    var firstName = document.getElementById("firstName").value;
    var middleName = document.getElementById("middleName").value;
    var birthday = document.getElementById("birthday").value;
    
    var queryString = "firstName=" + firstName + "&middleName=" + middleName
        + "&birthday=" + birthday;
    
    return queryString;
}

function doRequestUsingGET() {
    createXMLHttpRequest();
    
    var queryString = "GetAndPostExample?";
    queryString = queryString + createQueryString() 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}

function doRequestUsingPOST() {
    createXMLHttpRequest();
    
    var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
    var queryString = createQueryString();
    
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    
    xmlHttp.send(queryString);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {   //如果服务器处理完  xmlHttp.readyState 返回4
        if(xmlHttp.status == 200) {  //如果服务器处理成功 xmlHttp.status 返回200
            parseResults();
        }
    }
}

function parseResults() {
    var responseDiv = document.getElementById("serverResponse");
    if(responseDiv.hasChildNodes()) {
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
    
    var responseText = document.createTextNode(xmlHttp.responseText);
    responseDiv.appendChild(responseText);
}

</script>
</head>

<body>
  <h1>Enter your first name, middle name, and birthday:</h1>
  
  <table>
    <tbody>
        <tr>
            <td>First name:</td>
            <td><input type="text" id="firstName"/>
        </tr>
        <tr>
            <td>Middle name:</td>
            <td><input type="text" id="middleName"/>
        </tr>
        <tr>
            <td>Birthday:</td>
            <td><input type="text" id="birthday"/>
        </tr>
    </tbody>
  
  </table>
  
  <form action="#">
    <input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>    
    
    <br/><br/>
    <input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/>    
  </form>

  <br/>
  <h2>Server Response:</h2>

  <div id="serverResponse"></div>

</body>
</html>

 

 服务端:用servlet处理

 

通过request.getParameter(String name)  //获得传过来的各个参数的值

 

处理完成后,直接用

 

out.println(String);  //输出到客户端,客户端采用xmlHttp.responseTex获得out.println(String)

 

上面注意用get和post方法请求的不同

 

当要把参数通过send()发送时,要使用post,请看上面两个函数

 

分享到:
评论

相关推荐

    Ajax中get和post区别

    Ajax中Get请求和Post请求的区别 简单例子 何时使用Get请求,何时使用Post请求

    jquery最全面的ajax例子 ajax post get load 应有尽有

    load()方法 、 $.get()和$.post()方法 、 $.getScript()和$.getJson() 、 $.ajax()方法 、 ...jQuery中的Ajax全局事件 这些都有详尽的例子,一看代码,你就能明白jquery里实现ajax是怎么回事了,简单明了。

    jQuery ajax、post、get、json格式传递数据例子

    jQuery ajax、post、get、json格式传递数据例子 jQuery ajax、post、get、json格式传递数据例子

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选)

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选 Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的...

    【Ajax】分别以post,get演示

    一个学习Ajax不错的例子,里面每行代码都标记的意思分别以get和post 方式演示了 ajax页面无刷新的优点,完成一个简单的2数相加的操作,在不刷新页面的情况下返回结果。

    JAVA EE Ajax小例子

    Java EE的一个Ajax小例子,使用了jQuery做的Ajax GET和POST例子。还用到了Hibernate。

    php版 解决跨域问题CORS ajax+get,post+jsonp例子源代码.zip

    php版跨域 ajax+jsonp例子源代码.zip

    Ajax最简单例子Demo

    Ajax最简单例子,一个例子让你明白Ajax原理,XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...

    原生 JS Ajax,GET和POST 请求实例代码

    主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

    ajax小例子

    ajax 关于get 和post 的小例子

    AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)跨域请求是指一个站点中的资源访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过img标签加载外部图片、通过script标签加载外部脚本文件、通过...

    jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    下面小编就为大家带来一篇jQuery Ajax 实例代码 ($.ajax、$.post、$.get)。小编觉得挺不错的,现在分享给大家,也给大家做个参考

    AJAX的例子

    AJAX的例子,http.open("post/get", "GoogleServlet", true);

    simple-ajax-library:一个简单的AJAX库,用于发出HTTP请求

    创建一个新的simpleAjax const http = new simpleAJAX ; 例子 GET请求 users = http . get ( 'https://jsonplaceholder.typicode.com/users' , ( err , users ) =&gt; { if ( err ) { console . log ( err ) } ...

    jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get()。 首先我们看$.get(): 代码如下: $.get(“test.jsp”, { name: “cssrain”, time: “2008/01/21” }, //要传递的数据 function(data){ alert&#40;...

    xaja-js:一个微型ajax库

    npm install xaja-js 例子构造一个ajax请求: xaja . ajax ( url [ , options ] ) . then ( function ( res ) { console . log ( res ) ; } ) ; 或者 var promise = xaja . ajax ( options ) ;promise . then ( ...

    Ajax基础教程(扫描版)

    2.4 get与post 28 2.5 远程脚本 29 2.5.1 远程脚本概述 29 2.5.2 远程脚本的示例 29 2.6 如何发送简单请求 31 2.6.1 简单请求的示例 32 2.6.2 关于安全 34 2.7 dom level 3 加载和保存规约 35 2.8 dom 35 ...

    ajax实例

    ajax发送与接收数据 ajax可以使网页实现异步更新。... type: POST, //数据提交方式(post/get) url: Servlet, //提交到的servlet的url地址 data: {email: email, password: password},//提交的数据

    kbmmw例子 V2.0 (unidac+mssql)[2012-08-15]

    6、增加HTTP协议例子(参考资料:kbmMW_and_AJAX.pdf),提供http-get的功能,http-post的功能可参照http-get方法实现 7、提供数据集转json与json转数据集 (CDSFromJSon(CDS:TClientDataSet;JsonStr:string):Boolean)...

Global site tag (gtag.js) - Google Analytics