这次还是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. 0003--Weekly Meeting on 10th April and 17th April, 2015

    10th April, 2015 (1) Orthogonal Matching Pursuit, Least Angle Regression, Dictionary Coherence. -> ...

  2. spark on centos6.5 安装

    第一步在centos 6.5上安装java 运行环境 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18 ...

  3. Linux 安装Weblogic12 - copy

    # groupadd weblogic# useradd -g weblogic weblogic# passwd weblogic# mkdir -p /var/bea# chown -R webl ...

  4. windows下PHP与Apache的安装配置

    1.下载安装apache:官网 http://httpd.apache.org/download.cgi#apache24 下载httpd-2.2.25-win32-x86-no_ssl.msi并安装 ...

  5. Python札记 -- 使用easy_install进行模块/包管理

    今天在阅读以前项目代码时,发现里面使用的第三方模块的参数相当诡异,总是对不上.经过分析之后,发现是自己安装的第三方模块跟项目使用的版本不一致.在Python中进行模块/包管理的话,就不得不提到easy ...

  6. 【转载】Fiddler进行模拟Post提交json数据，总为null解决方式

    Request Headers: User-Agent: FiddlerHost: localhost:3248Content-Type: application/json; charset=utf- ...

  7. 将asp.net webapi的运行时版本由4.0升级到4.5.1时遇到的问题及解决

    更新package 更改.net运行时的版本之后,出现了错误提示,说需要改新以下组件: EntityFramework, EntityFramework.zh-Hans, Microsoft.AspN ...

  8. RCP：gef智能寻路算法（A star）

    本路由继承自AbstactRouter,参数只有EditPart(编辑器内容控制器),gridLength(寻路用单元格大小),style(FLOYD,FLOYD_FLAT,FOUR_DIR). 字符 ...

  9. js只需5分钟创建一个跨三大平台纯原生APP

    DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...

  10. 【原创】三分钟教你学会MVC框架——基于java web开发（1）

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用于组织代码用一种业务逻辑和数据显示分离的方法. ...