这次还是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. alfresco install in linux, and integrated with tesseract ocr

    本文描述在Linux系统上安装Alfresco的步骤: 1. 下载安装文件:alfresco-community-5.0.d-installer-linux-x64.bin 2. 增加执行权限并执行: ...

  2. MJExtension笔记(一)

    之前有说,看好的编程就去敲好的开源项目:一直觉得这个无从下手,但是这次跟着一点点敲MJExtension,我明白了这句话的深度:其实并不需要去找,每一个三方项目都有很多值得学习的地方:笔记一只记录在敲 ...

  3. 基于SpringMVC的增删改查

    废话不多说,直接开始步骤! 1.创建一个Dynamic Web Project 2.在WEB-INF包下的lib文件夹中引入相关jar commons-logging-.jar jstl.jar sp ...

  4. FLEXNET License管理

    之前的程序License管理是我自己手撸的一个非常简单的东东,根据用户机器的MAC地址生成一个字串,程序执行的时候去比较这个字串.当时只是追求一个最简单的实现,像证书过期.功能点证书自然没有.这次新版 ...

  5. MVC中调用Public_Class时，VS2012老提示：当前上下文中不存在名称“Json”的解决方法

    TMD,老TMD困扰我,每次新建MVC项目后就提示这个,原因在此: public class Public_Class   <==此处应为:Public_Class : Controller { ...

  6. 《你必须知道的.NET》读书笔记：从Hello World认识IL

    通用的语言基础是.NET运行的基础,当我们对程序运行的结果有异议的时候,如何透过本质看表面,需要我们从底层来入手探索,这时候,IL便是我们必须知道的基础. 一.IL基础概念 1.1 什么是IL? IL ...

  7. Nim教程【十五】【完结】

    模版 模版是Nim语言中的抽象语法树,它是一种简单的替换机制,在编译期被处理 这个特性使Nim语言可以和C语言很好的运行在一起 像调用一个方法一样调用一个模版 请看如下代码: template `!= ...

  8. 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  9. common-dbcp2数据库连接池参数说明

    参数 默认值 描述 建议值 DefaultAutoCommit  null 通过这个池创建连接的默认自动提交状态.如果不设置,则setAutoCommit 方法将不被调用.  true Default ...

  10. 2种方式解决nginx负载下的Web API站点里swagger无法使用

    Web API接口站点,引入了swagger来实时生成在线的api文档,也便于api接口的在线测试.swagger:The World's Most Popular Framework for API ...