`

AJax案例(分别调用get ,post方法)

    博客分类:
  • AJax
阅读更多
被引用的util.js源码:
function $(id){
return document.getElementById(id);
}

相应页面源码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  out.println("<font color='red'>服务器处理完毕</font>");
 
  //获取请求的方法
  String method=request.getMethod();
  out.println("</br>您是通过<font color='red'>"+method+"</font>方法向服务器提出请求的....</br>");
  //获取传递的参数
  out.println("传递的参数:"+request.getParameter("username"));
%>

get方法请求页面源码:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">

   function getXhr(){
     var xhr;
     try{
       xhr=new ActiveXObject("Microsoft.XMLHTTP");
     }catch(err){
       try{
         xhr=XMLHttpRequest();
       }catch(er){
         alert("浏览器版本太低,不支持此操作.....");
       }
     }
     return xhr;
   }
   function getAjax(){
     var xhr=getXhr();
     xhr.open("get","ajax/index.jsp?username='zhangsansan'",true);
     xhr.send();
     xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
         if(xhr.status==200){
           $("content").innerHTML=xhr.responseText;
         }
       }
     }
    
   }
</script>

post方法页面源码:
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function getXhr(){
     //设置浏览器的兼容性
     var xhr;
     try{
       xhr=new ActiveXObject("Microsoft.XMLHTTP");
     }catch(err){
       try{
         xhr=XMLHttpRequest();
       }catch(er){
         alert("浏览器版本太低,不支持此操作.....");
       }
     }
     return xhr;
   }
  
   function postAjax(){
     var xhr=getXhr(); //获取XMLHttpRequest对象
     xhr.open("post","ajax/index.jsp",true);
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//调用post方法传递参数必须写,get方法不需要写
     xhr.send("username=zhangsansan");
     xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
         if(xhr.status==200){
           $("content").innerHTML=xhr.responseText;
         }
       }
     }  
   }
</script>

<body>
<input type="button" value="Ajax请求" onclick="postAjax()"/>
<div id="content"></div>
</body>

总结Ajax的get与post的区别:
    Get请求:如果传递(附带)参数,get的open方法的url参数值直接附带传递参数,安全性较低;get请求不用写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法;默认情况下调用的是get方法
     Post请求:open方法的参数值也可以附带参数,但是一般不在url路径上附带传递,参数在send方法里传递,安全性比较好;post方法如果传递参数,必须要写xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")方法;
    如果在get方法调用的send方法里传递了参数,那么会默认变成调用post方法。
分享到:
评论

相关推荐

    Ajax中get和post区别

    "Ajax中Get和Post请求的区别" Ajax作为异步JavaScript和XML的简写,是一种创建交互式网页的技术。其中,Get和Post是两种常用的HTTP请求方法,尽管它们都是用于将数据从客户端发送到服务器端,但是它们之间存在着很...

    ajaxRequest.js(ajax get post方法封装,方便前端调用)

    封装jquery ajax方法,方便调用,避免在代码中频繁使用 $.ajax({ type: 'GET', url: url, ...... )}; 统一调用公共方法即可,区分同步异步,get post!希望对大家有帮助

    ajax以GET和POST方式调用WCF

    **Ajax调用WCF服务详解** 在Web开发中,Asynchronous JavaScript and XML(Ajax)技术被广泛用于实现页面的无刷新更新,提高了用户体验。而Windows Communication Foundation(WCF)是微软提供的一种强大的服务导向...

    用AJAX的Get和Post调用Servlet的简单示例.doc

    ### 使用AJAX的GET和POST方法调用Servlet的详尽解析 #### 一、引言 在现代Web开发中,异步JavaScript与XML(AJAX)技术被广泛应用于实现无刷新更新网页的部分内容,极大地提升了用户体验。AJAX通过在后台与服务器...

    jQuery+get/post+Ajax+Json

    1. jQuery的$.get和$.post方法:这两种方法是jQuery提供的Ajax(异步JavaScript和XML)接口,用于与服务器进行非刷新的数据交换。$.get用于发送GET请求,而$.post用于发送POST请求。它们都接受四个参数:URL、数据、...

    图书馆添加删除判断 ajax.get 请求 ajax.post响应 考试专用

    在"图书管理案例.html"中,可以看到实际的HTML结构和JavaScript代码,包括事件监听、AJAX调用、数据处理等部分。通过阅读和分析这个文件,可以更深入地理解如何在实际场景中应用AJAX技术。 总的来说,理解和熟练...

    jQuery使用Ajax方法调用WebService

    在.NET中,你可以创建一个ASMX文件来定义你的服务方法,然后在jQuery的Ajax调用中引用这些方法。 在调用过程中,需要注意的是跨域问题。由于同源策略的限制,Ajax请求通常只能访问同源(协议+域名+端口)的资源。...

    ajax调用后台方法

    综上所述,Ajax调用后台方法是前端开发中不可或缺的一部分,它极大地提高了Web应用的交互性和效率。无论是在小规模项目还是大型复杂应用中,正确理解和使用Ajax都能带来显著的性能提升和用户体验改善。

    ajax 前台js调用后台方法

    接下来,需要在后端定义一个可以被AJAX调用的方法。这些方法通常会被标记为`AjaxMethod`属性,以表明它们是可以被异步调用的。 ```csharp [Ajax.AjaxMethod] public string getValue(int a, int b) { // 这个方法...

    【Ajax】分别以post,get演示

    3. 发送请求:对于GET请求,可以在`open()`方法后直接调用`send()`,如`xhr.send()`;对于POST请求,需要在`send()`中传入数据,如`xhr.send('param1=value1&param2=value2')`。 4. 监听状态变化:通过`...

    asp.net 利用jquery-ajax调用后台方法

    下面将详细介绍如何利用jQuery-AJAX调用ASP.NET后台方法。 1. **创建WebMethod** 在ASP.NET的C#或VB.NET代码中,我们可以创建一个静态的WebMethod,标记为 `[WebMethod]` 或 `[ScriptMethod]`,以便可以从...

    使用ASP.NET AJAX异步调用Web Service和页面中的类方法

    - **HTTP GET调用**:默认情况下,ASP.NET AJAX使用POST方法调用Web Service,但也可以配置为GET,这在处理查询等安全无副作用的操作时很有用。 - **XML序列化**:如果Web Service返回的数据格式为XML,ASP.NET ...

    ajax异步调用webservice实例

    2. 配置请求:使用`open()`方法设置请求类型(GET或POST),URL,以及是否异步执行。 3. 发送请求:使用`send()`方法发送请求。如果是GET请求,参数直接放在URL后;POST请求时,参数放在`send()`方法内。 4. 监听...

    jquery异步调用post get方式

    `jQuery`提供了`$.ajax()`, `$.post()`, 和 `$.get()`等方法来实现异步请求。本文将深入探讨`jQuery`中的`POST`和`GET`异步调用方式。 1. **GET方式** `GET`是最常见的HTTP请求方法,通常用于获取资源。在jQuery中...

    Ajax的小封装 get,post请求

    在描述中提到了对Ajax的get请求的小封装,这意味着我们将会讨论如何用JavaScript来构建一个简易的Ajax GET请求函数,并可能涉及POST请求的实现。 ### 1. Ajax GET 请求小封装 GET请求是最常见的HTTP方法,用于从...

    Ajax调用webservices

    本文将深入探讨如何使用Ajax调用Web服务(Webservices),以实现客户端与服务器端的异步通信。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它提供了与服务器进行交互的能力。通过创建XMLHttpRequest...

    MVCAJAX用JQUERY调用实例例子

    JQuery的`$.ajax()`函数是核心的AJAX调用方法。它接受一系列参数,如URL、类型(GET或POST)、数据、回调函数等。例如,一个简单的GET请求可以这样写: ```javascript $.ajax({ url: 'your/api/url', type: '...

    jquery 异步调用$.ajax() $.post() $.get()

    本篇文章将深入探讨jQuery中的异步调用方法,包括`$.ajax()`,`$.post()`和`$.get()`,以及它们在实际开发中的应用。 首先,`$.ajax()`是jQuery提供的最强大的异步数据请求函数,它支持多种HTTP请求方法,如GET、...

    jquery-get-post-load 方法

    ### jQuery中的GET、POST与LOAD方法详解...jQuery 的 GET、POST 和 LOAD 方法以及 AJAX 方法为开发者提供了强大的工具来处理客户端与服务器之间的数据交互。通过合理运用这些方法,可以极大地提升 Web 应用的用户体验。

Global site tag (gtag.js) - Google Analytics