Jquery ajax例子

来源：互联网发布：产业并购基金知乎编辑：程序博客网时间：2024/05/17 02:51

任务1：先看一个原始的ajax例子,理解ajax的基本工作原理

将要完成的功能：client.jsp页面点击按钮，调用自定义的docheck方法，由server.jsp在接受的参数(就是前台文本框的内容)内容后面加上“hello”,结果显示在client.jsp页面的<div id="result"></div>

client.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <script type="text/javascript" src="ajax/check.js"></script>  </head>    <body>    <input id="username" type="text"> //文本框    <button id="btnajax" type="button" onclick="doCheck()">ajax</button>//点击按钮调用ajax    <div id="result" >显示结果</div> //显示  </body></html>

server.jsp

<%String name = request.getParameter("name");response.getWriter().write(name + "hello");//往打印流写东西，其内容client.jsp可以通过responseText访问到%>

check.js文件

var xhr;    function doCheck(){if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest();  }else{// code for IE6, IE5  xhr=new ActiveXObject("Microsoft.XMLHTTP"); } var name=document.getElementById("username").value; var url="ajax/server.jsp?name="+name; xhr.onreadystatechange = callback; xhr.open("GET",url,true);//开始ajax调用xhr.send(null);    }        function callback(){   if (xhr.readyState == 4 && xhr.status == 200) {   alert(xhr.responseText);    document.getElementById("result").innerHTML = xhr.responseText;//前面得到server.jsp的打印流            }    }

任务1总结：

个人理解：前后台共享打印流，类似于request和response工作原理。

理解原理后，发现check.js代码一大堆，我们真正关心有用的代码就一句: xhr.open("GET",url,true);即发送ajax请求语句，其它都是没用的代码。还好Jquery帮我们做了简化，让我们真正只关心我们感兴趣的核心代码。

任务2：Jquery的Ajax例子

前台定义一个button，单击它调用jquery的ajax方法。

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>    <base href="<%=basePath%>"><script type="text/javascript" src="jquery/jquery-1.8.2.js"></script><script type="text/javascript" src="jquery/myjquery.js"></script>//自己写的js文件 </head>  <body><button id="btnajax" type="button">jquery的ajax</button>//定义一个button，在jquery/myjquery.js中定义它的click方法  </body></html>

以下是jquery/myjquery.js中自定义的ajax调用,响应前台button的clicked事件,要用到Jquery库

 $("#btnajax").click(function(){        $.ajax({        type: "POST",//发送方式        data:"p1=name",//发送参数,可以把上个例子中的username放在这里        url: "jquery/ajaxdemo.jsp",//发送目标        success: function(msg){//返回成功后调用的方法            alert(msg );            }        })     });

ajaxdemo.jsp内容

<%String p1 = request.getParameter("p1");response.getWriter().write(p1);%>

看上去代码简单多了。先庆祝一下

0 0