jQuery提供了若干个ajax函数,他们大同小异,只是为了处理不同类型的数据而分开来。最简单的是get(url,parameters,callback),这个函数发起一个GET请求,将服务器返回的数据传递给callback处理。 下面的例子实现了当鼠标悬浮在超链接上的时候,就发起一个ajax请求,从服务器端返回关于此超链接的更多介绍的效果。先看服务器端代码,新建一个ajaxload.ashx,仅作为示例,获得查询参数为word的值,并返回
ajaxload.ashx:
<%@ WebHandler Language="C#" Class="ajaxload" %> using System; using System.Web; public class ajaxload : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string word = context.Request.Params["word"]; context.Response.Write(string.Format("<p style='color:red;'>More intorduction of {0} is here....</p>",word)); } public bool IsReusable { get { return false; } } }
前台代码如下:
<head> <title>Ajax Text</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { $('a').hover(function(event) { $.get('ajaxload.ashx', { word: $(event.target).html() }, function(data) { $('#result').html(data); }); }, function() { $('#result').html(""); }); }); </script> </head> <body> <a href="javascript:void(0)">第一个</a><br /> <a href="javascript:void(0)">第二个</a><br /> <a href="javascript:void(0)">第三个</a><br /> <a href="javascript:void(0)">第四个</a><br /> <div id="result"> </div> </body>这段代码代价可以再 firefox中 的调试插件中 可以看到 (不得不说 firefox的各大插件的强大了 )