这次还是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. 链接报error LNK2019: unresolved external symbol错误，解决

    http://blog.163.com/aiding_001/blog/static/22908192011102224344450/ 某次编写一个COM组件,接口定义好之后,增加了ZRX代码后编译链 ...

  2. Selenium中的几种等待方式，需特别注意implicitlyWait的用法

    摘:http://blog.csdn.net/pf20050904/article/details/20052485 最近在项目过程中使用selenium 判断元素是否存在的时候 遇到一个很坑爹的问题 ...

  3. day10---multiprocess 多进程

    multiprocess Queue  \ Pipe 只是实现进程间数据的传递 Manager 实现了进程间数据的共享,即多个进程可以修改同一份数据   进程模块 multiprocessing #! ...

  4. myeclipse9中导入的jquery文件报错（出现红叉叉，提示语法错误）

    选中报错的js文件, 右键选择 MyEclipse-->Exclude From Validation : 然后继续右键执行MyEclipse-->Run Validation 即可

  5. Paxos算法细节详解(一)--通过现实世界描述算法

    Paxos分析 最近研究paxos算法,看了许多相关的文章,概念还是很模糊,觉得还是没有掌握paxos算法的精髓,所以花了3天时间分析了libpaxos3的所有代码,此代码可以从https://bit ...

  6. EQueue - 详细谈一下消息持久化以及消息堆积的设计

    前言 之前写了一篇文章,总体介绍了EQueue.在看这篇文章之前如果还没看过那篇文章,可能会看不懂这篇文章.所以建议没看过的朋友务必先看一下那篇文章中所提到的各种概念,这样才能更好的理解本文所说的内容 ...

  7. 3年的坚持，最终造就著作——《Learninghard C#学习笔记》

    前言 起初开始写博文主要是记录学习过程中对学到内容的自我总结和理解,同时也希望本人的理解可以帮助到一些走在学习路上的朋友.但是令我没有想到的是,我总结的博文得到了广大园友的评论和支持,正是博友的支持, ...

  8. 一次与51aspx客服MM谈话 -- 坑是怎么发展的

    GG从发布以来,我每次版本更新都会同步到51aspx源码网站,这次在同步更新GG V3.2版本到51aspx时,出了点小状况: 上传3.2版本几个小时后,我再次上去查看,发现其状态变成了“退回”,于是 ...

  9. objective-c（协议）

    objective-c中不支持多重继承,其替代方案为Protocal(协议),下面给出一个基本实例: 定义一个协议 @protocol MyProtocal <NSObject> //协议 ...

  10. Java多线程3：Thread中的静态方法

    Thread类中的静态方法 Thread类中的静态方法表示操作的线程是"正在执行静态方法所在的代码块的线程".为什么Thread类中要有静态方法,这样就能对CPU当前正在运行的线程 ...