这次还是prototype.js 和 jQuery.js冲突的问题，前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html，以及上网说的大部分方法都只能解决$的冲突问题。我先引入了prototype.js 再引入jQuery.js，在用了jquery中的$,然后来用prototype中的ajax的时候，ajax的方法就不启作用了。 最后改为了用 jQuery.js中 ajax 。现在记录下两者ajax调用的区分：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript" src="./js/prototype/prototype.js"></script>

<script type="text/javascript" src="./js/jquery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" language="javaScript">

    function callServletByPrototypeAjax(){

        new Ajax.Request(

            "test1.prototype",

            {

                parameters: "para1=val1¶2=val2",

                method:'post',

                onComplete:function(transport){

                    alert("er");

                    var valReturned = transport.responseText;

                    alert("value returned from server port is " + valReturned);

                }

            }

        );

    }

    function callServletByJQueryAjax(){

            jQuery.ajax({

                type:"post",

                url:"test1.jQuery?para1=value1",

                dataType:"text",

                success:function(data){

                    alert("value returned from sever is : " + data );

                }

            });

    }

</script>

</head>

<body>

<!--<form action=".do" method="get">-->

<form name="formRequest" action=".do" method="post">

    <input type="text" name="form1Para1" value="value1"/>

    <input type="submit"  value="submit to show page"/>

</form>

<form name="prototypeAjaxRequest">

    <input type="button" value="call servlet by prototype Ajax" onclick="callServletByPrototypeAjax();"/>

</form>

<form name="JQueryAjax">

    <input type="button" id="callJQueryAjax" value="call servlet by JQuery Ajax" onclick="callServletByJQueryAjax();"/></form>

</body>

</html>

当然，在使用jQuery时，可以使用如下方式给组件注册相关事件。需要注意prototype和jQuery对$符的冲突。

$(document).ready(function(){

        $("#callJQueryAjax").click(function(){

            jQuery.ajax({

                type:"post",

                url:"test1.jQuery?para1=value1",

                dataType:"text",

                success:function(data){

                    alert("value returned from sever is : " + data );

                }

            });

        });

    };

上述Ajax申请资源为普通servlet，web.xml简要配置如下，亦可在servlet3.0下使用注解方式。

<servlet>

    <servlet-name>test1</servlet-name>

    <servlet-class>com.test.Test1OfPrototype</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>test1</servlet-name>

    <url-pattern>/test1.prototype</url-pattern>

  </servlet-mapping>

  <servlet>

    <servlet-name>test1JQuery</servlet-name>

    <servlet-class>com.test.Test1OfJQuery</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>test1JQuery</servlet-name>

    <url-pattern>/test1.jQuery</url-pattern>

  </servlet-mapping>

prototype.js 和 jQuery.js中 ajax 的使用的更多相关文章

  1. js和jQuery实现的Ajax

    1. JS实现Ajax <!doctype html> <html lang="en"> <head> <meta charset=&qu ...

  2. springboot在application.yml中使用了context-path属性导致静态资源法加载，如不能引入vue.js，jquery.js，css等等

    在springBoot配置中加入上下文路径 server.context-path=/csdn js,img等静态文件无法加载,出现404的问题 <script type="text/ ...

  3. 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

    一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...

  4. 原生js实现jquery库中部分事件的功能（jquery库封装二）

    继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Crea ...

  5. 原生js实现jquery库中选择器的功能（jquery库封装一）

    今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...

  6. zepto.js和jquery.js函数比较有什么优点？

    1.Zepto.js 是专门为现代智能手机浏览器退出的 Javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点, 大小方面 , 压缩后的 zepto. ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. LazyLoad.js及scrollLoading.js

    http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...

  9. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

随机推荐

  1. firefox安装firebug\XPath Checker

    XPath Checker安装,打开下面地址安装: https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/ 安装XPath Chec ...

  2. Worse Is Better

    最近做的几件事和最近刚读到这篇文章(http://www.jwz.org/doc/worse-is-better.html)让我重新认识了KISS和这个所谓的Worse-is-better原则. 软件 ...

  3. SQL TRACE

    1.SQL TRACE说明: 参数类型 布尔型 缺省值 false 参数类别 动态 取值范围 True|false 2.类型 1)sql trace参数:alter system改变对全局进程影响,如 ...

  4. SQL提示介绍-强制并行

    查询提示一直是个很有争议的东西,因为他影响了sql server 自己选择执行计划.很多人在问是否应该使用查询提示的时候一般会被告知慎用或不要使用...但是个人认为善用提示在不修改语句的条件下,是常用 ...

  5. JQuery源码解析（一）

    写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...

  6. 【Bugly技术干货】那些年我们用过的显示性能指标

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言: 注:Google 在自己文 ...

  7. ENode 2.0 - 介绍一下关于ENode中对Command的调度设计

    CQRS架构,C端的职责是处理从上层发送过来的command.对于单台机器来说,我们如何尽快的处理command呢?本文想通过不断提问和回答的方式,把我的思考写出来. 首先,我们最容易想到的是使用多线 ...

  8. hadoop学习笔记：zookeeper学习（上）

    在前面的文章里我多次提到zookeeper对于分布式系统开发的重要性,因此对zookeeper的学习是非常必要的.本篇博文主要是讲解zookeeper的安装和zookeeper的一些基本的应用,同时我 ...

  9. java提高篇(五)-----抽象类与接口

    接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念 ...

  10. SQLServer 随机生成指定范围的日期

    一个分页的问题,DTCms3.0中,分页是根据时间分页的,如果当添加时间(add_time)都是同一个数值时,不管点击第几页,显示的数据都是同一个的内容,于是就有了需要把同一个时间改指定随机日期的功能 ...