zoukankan      html  css  js  c++  java
  • 使用Jquery实现跨域Ajax

      在实际开发中经常需要用到跨域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);
                }
            }

      这只是一个简单的实例,在实际应用开发中我们还需要考虑到一些问题,比如防止别人请求我们的数据,就需要我们对请求作加密验证了,在这里就不作讨论。

     

      

  • 相关阅读:
    自动化原理
    Appium 用途和特点
    接口测试
    测试环境部署
    总结一下,selenium 自动化流程如下
    Qt---tcp之网络通信
    java的接口与抽象类
    Leetcode---每日一题之56合并区间
    java与c++的正则表达式的小总结
    数据结构学习之线索二叉树(java/c++版)
  • 原文地址:https://www.cnblogs.com/psforever/p/2484740.html
Copyright © 2011-2022 走看看