这次还是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. C++多态（二）——函数重载（overloading）和操作符重载

       任何函数都能重载. 一.普通函数的重载 C语言中一个函数只能处理一个类型的数据,不可能兼顾两种或多种数据类型:C++使用使用同一名称的函数来处理多个类型的数据. #include <ios ...

  2. 直接通过Ajax 处理程序加 Action名，取得变量值。

    var set_value;$(document).ready(function () {            var query = createParam('GetValue', '0');   ...

  3. 【转载】解决Windows 10 局域网内共享的问题

    问题: 小米盒子,iPhone (OS 10.2) 无法访问 Win 1o共享 解决方案: 原文链接 http://www.dedoimedo.com/computers/windows-10-net ...

  4. WebApi Post提交报错 调试无法进入对应action函数

    调试发现有长内容或者是特殊字符就报错,确定是服务端验证的问题 需要 在配置文件 <system.web> 中添加<httpRuntime  requestValidationMode ...

  5. 高性能网站架构设计之缓存篇（2）- Redis C#客户端

    在上一篇中我简单的介绍了如何利用redis自带的客户端连接server并执行命令来操作它,但是如何在我们做的项目或产品中操作这个强大的内存数据库呢?首先我们来了解一下redis的原理吧. 官方文档上是 ...

  6. python post

    使用python 提交表单包括图片以及参数信息,详见代码 # -*- coding: utf-8 -*- import MultipartPostHandler, urllib2, cookielib ...

  7. Storm-源码分析- Storm中Zookeeper的使用

    在backtype.storm.cluster.clj中, 定义了storm对于Zookeeper的使用   ClusterState 首先定义操作Zookeeper集群的interface (def ...

  8. 【腾讯bugly干货分享】解耦---Hybrid H5跨平台性思考

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1275& ...

  9. [.net 面向对象编程基础] (23) 结束语

    [.net 面向对象编程基础] (23)  结束语 这个系列的文章终于写完了,用了半个多月的时间,没有令我的粉丝们失望.我的感觉就是一个字累,两个字好累,三个字非常累.小伙伴们看我每篇博客的时间就知道 ...

  10. [问题解决]安装 SQL Server 无法开启NetFx3.5 的错误

    谷歌了一下,该问题是由于系统中缺少.Net3.5相关特性造成的.需要手动安装一下3.5的环境 解决办法: Windows 徽标键+R打开运行窗口 输入Dism /online /enable-feat ...