在实际开发中经常需要用到跨域Ajax,特别是一些信息展示站点,往往都是通过发布系统生成纯静态的HTML文件,而且往往这种站点也是纯静态的站点(不包含任何由服务器端语言编写的文件如aspx、jsp、php等),这样不仅可以大大减小服务器的压力,也使得页面访问的速度更快。但是这样一来页面就变得没有交互性,这时候就需要用到跨域ajax技术,当然除此之外还有很多技术可以解决这种问题,比如用iframe等。
常用的跨域ajax技术有两种,一种是动态的创建script元素,然后将script元素的src属性指向其它域的动态文件,如果需要有数据返回的时候,可以在发出请求的页面上申明一个js变量,然后在ajax处理页面来改变这个变量的值。
第一种方法实现起来不需要借助其它Js库或框架,但是不够简洁明了,下面来看使用Jquery的getJSON方法来达到跨域Ajax的方法。
jQuery.getJSON(url, [data], [callback])
1.url String 发送请求地址。
2.data (可选) Map 待发送 Key/value 参数。
3.callback (可选) Function 载入成功时回调函数。
概述
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中,可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
注意:此行以后的代码将在这个回调函数执行前执行。
下面看一个使用getJSON获取新闻的实例:
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Ajax跨域获取新闻列表</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style type="text/css"> #news_list{ font-size:13px; width:300px;} #news_list ul{ list-style-type:none;} #news_list ul li{ width:300px; height:30px; text-align:left; position:relative;} #news_list ul li span{ width:100px; float:right;} </style> </head> <body> <div id="news_list"></div> <script type="text/javascript"> $(document).ready(function() { getJSON("http://dynamic.somenet.com/GetNews.ashx?top=10&format=json&jsoncallback=?", function(data) { var strHtml = null; $.each(data, function(i, item) { strHtml += '<li><a href="/news/' + item.NewsId + '.html" target="_blank">' + item.Title + '</a><span>' + item.Title + '</span></li>'; $('#news_list').html('<ul>' + strHtml + '</ul>'); }); }); }); </script> </body> </html>
下面是dynamic.somenet.com站点的GetNews.ashx文件的代码:
public void ProcessRequest(HttpContext context) { string strJson = context.Request.QueryString["jsoncallback"]; if (strJson == null) return; int top = 10; Int32.TryParse(context.Request.QueryString["top"], out top); List<CrossDomain.Entity.EntityNews> list = CrossDomain.Call.CallNews.GetNews(top); if (list != null && list.Count > 0) { StringBuilder sbOutput = new StringBuilder(200); sbOutput.AppendFormat("{0}([", strJson); foreach (CrossDomain.Entity.EntityNews item in list) { sbOutput.Append("{\"NewsId\":\""+ item.NewsId +"\",\"Title\":\""+ item.Title +"\",\"Time\":\""+ item.CreateTime.ToString("yyyy-MM-dd") +"\"},"); } string strOutput = string.Format("{0}])", sbOutput.ToString().IndexOf(',') > 0 ? sbOutput.ToString().TrimEnd(',') : sbOutput.ToString()); context.Response.Write(strOutput); } }
这只是一个简单的实例,在实际应用开发中我们还需要考虑到一些问题,比如防止别人请求我们的数据,就需要我们对请求作加密验证了,在这里就不作讨论。