初体验ajax跨域

初体验ajax跨域

之前一直以为ajax是不能跨域的,从来也没尝试过。今天体验了一下ajax跨域请求数据,分享一样。

  公司做了一个纯静态HTML的网站,可是公司领导说让加公告,因为我们的后台管理系统和静态页面在不同的服务器上,不同的域名,而HTML服务器也没有PHP环境,这就需要两个域之间的数据交换。讨论了下各种的实现方式,淘汰了iframe,后来用script加载技术。具体如下:

<script src="http://www.baidu.com"></script>

  这个实现方法有一个局限性,如果需要传递参数怎么办?例如:http://localhost/test/index.php?id=3

  首先这是一个HTML纯静态的页面,只能用JS来获取get参数。

  JS获取get参数,去网上搜了下,代码如下:

复制代码
    var url=document.URL;
    var para='';
    if(url.lastIndexOf("?")>0)
    {
        para=url.substring(url.lastIndexOf("?")+1,url.length);
        var arr=para.split("&");
        para="";
        for(var i=0;i<arr.length;i++)
        {
           para = arr[i].split("=")[1];
        }
        //para 为第一个参数的值
复制代码

  获取了参数的值,拼装成我们要加载的链接,这样貌似就可以实现我们的功能了。

  其实则不然。我们实现的方法在于用javascript加载远程链接。但是在加载之前我们需要获得参数的值来确定链接(例:http://localhost/test/index.php?id=3),但是浏览器的工作机制是先加载完HTML才开始运行JS的脚本,前后顺序矛盾,所以这种实现办法宣告失败!

  记得之前做过一个项目,类似于获取新浪股票的数据,然后实时显示。这个就用到了ajax的跨域。

  后来去网上搜了一下,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。(http://www.open-open.com/lib/view/open1334026513327.html

  新浪股票获取方式就是用到script的方式。

复制代码
        $.ajax({
            url:"http://localhost/index.php?id="+para,
            dataType:"script",
            cache:"false",
            type:"GET",
            success:function(a){
                $("#title").html(announce_title);
                $("#date").html(announce_date);
                $("#content").html(announce_content);
            }
        }); 
复制代码

  而http://localhost/index.php?id=3打印出来是这种格式的

  

var announce_title="mytitle"; var announce_date="2013-04-17 13:36:15"; var announce_content="this is a test";

  所以在远程只要输出上面这样的数据格式,就可以实现html和系统间的数据交换了。

  又涨姿势了。

 
 
分类: javascript
标签: ajax

Ext.Net中,第一种:AbsoluteLayout布局方式

 

(近期会连续更新有关Ext.Net 控件的一些资料,与大家分享,有兴趣或者最近也在研究这方面知识的朋友可以加关注!!!)

在Ext.Net中一共有14种布局方式,下面我会一一介绍。

第一种:AbsoluteLayout布局方式。

AbsoluteLayout布局方式也称为:绝对布局方式。

它主要采用X,Y坐标进行布局,同时也支持AnchorHorizontal(锚水平)和AnchorVertical(锚垂直)进行布局。

在复杂页面布局中,一般会把这两种方法结合使用。

下面我们看一下代码:

页面源码:

复制代码
<ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="AbsoluteLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Height="300" Title="Panel1">
                <Items>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel2" runat="server" Height="300" Title="Panel2" X="50" Y ="50" Layout="AbsoluteLayout" AnchorHorizontal="-50" >
                <Items>
                    <ext:Label ID="Label1" runat="server" Text="这是一个Lable">
                    </ext:Label>
                    <ext:TextField ID="TextField1" runat="server"  Text="这是一个TextField" X="100" AnchorHorizontal="50%">
                    </ext:TextField>
                    <ext:Button ID="Button1" runat="server" Text="这是一个Button"  X="200" Y="25">
                    </ext:Button>
                    <ext:TextArea ID="TextArea1" runat="server" Text="这是一个TextArea"  Y="50" AnchorHorizontal="100%" AnchorVertical="100%">
                    </ext:TextArea>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
复制代码

在这里,我们可以看到,Viewport控件采用AbsoluteLayout布局方式,其中有2个项目:一个是Panel1,另一个是Panel2。

Panel1:高度是300,宽度则是铺满Viewport(视图界面)

Panel2:高度是300,同时:X,Y坐标都为50,AnchorHorizontal(锚水平)为-50。

这样会得到什么界面效果呢?

我们明显会看到:Panel2面板浮于Panel1面板之上,并且距离Viewport(视图界面)左边50,上边50,右边50。

这也就告诉我们,如果采用AbsoluteLayout布局方式,但是我们不设置X,Y坐标,或者是AnchorHorizontal(锚水平)和AnchorVertical(锚垂直)

那么我们看到的只能是包含在控件项目中的最后一个控件。除非此控件的高度和宽度小于前一个控件。

 
 
分类: Ext.Net

网站开发那些事

写在开头

朋友们大家好,本人一直从事网站开发大约10个年头,开发的网站无数,生存下来的没有几个。最近回想一下自己十年的开发经历,想把这十年来的工作经验做个总结,把网站开发的流程步骤(自认为最好的最简单的步骤),通过一个综合门户网站的开发过程一一记录下来,留给那些刚入门或者想入门的朋友参考学习。这个综合网站开发牵涉到的技术很多也很杂,您不一定都需要掌握,只需掌握您感兴趣或者要从事的工作有关的技术,主要用到的技术有:网站设,HTML,CSS,Javascript(Jquery框架),Asp.net(c#语言),SQL数据库等。

第一章、网站开发概述与开发流程

本着干货为主一些基本的概念我只是点到为止,如果想深入了解通过网络您可以查询到详细具体的概念描述。

什么是网站?简单地说,网站是一种通讯工具,就像广告栏一样,人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站,获取自己需要的资讯或者享受网络服务。

什么是网站开发?网站开发就是在计算机上通过计算机语言设计您的广告栏, 最终把它展示给用户,它不仅设计到网站美工和内容,还涉及到域名注册,服务器架设、程序开发等等相关知识。网站开发团队的规模也是千差万别,对于较大的组织和企业,可以由数以百计的人组成,没人负责相应模块;规模较小的企业可能只需要一个网站管理员进行维护即可。

那么网站开发是怎样进行的呢?首先要进行需求分析明确您的目标,给出总体需求文档,进行网站产品设计,进行网站美工设计,进行数据库系统架构与网站系统框架设计,进行网站各方面的实际制作和美化,进行各网站模块开发任务,测试,运行与维护。图1.1以及很好的把网站开发的流程进行了展示。

          

 图1.1

     通过网站开发这个流程我们可以总结出一些网站开发过程中需要注意的事项,而网站建设又是更加长远的一件事,它包括了网站开发,也包括了维护、后续很多事情,更有需要我们注意的事项,在此我进行一下总结。

一、需求文档的确定性、设计和策划的准确性和完整性

需求是我们开发的准绳,基础,所有的网站功能都是根据用户需求进行设计的,所以我们必须弄清楚用户的需求。但是在开发中往往用户的需求是不明确的,这需要我们正确的进行引导。例如我在开发中就常常遇到这样的客户他不知道自己想要啥样的网站,他会要求你先做然后看看,需不知我们是要付出成本的,所以我们必须要搞清楚用户的需求,这是基础。如果基础打不好,大楼会摇摇可危。

网站开发都是要先经过策划和设计的,根据需求文档进行功能、整体框架等设计,有了这些策划和设计才能进行有序进行网站开发。没有计划而盲目地实行建设,最后一定会产生很多漏洞。由此可见,网站建设离不开各种策划和设计,而这些策划和设计的准确性和完整性也决定了整个工程的成败。正式因为这部分工作的重要性所以有了网站架构师这一职业,他们负责网站系统、功能、模块、流程的设计,好比是高楼大厦的设计人员,通常一座大厦在建之前,都先由设计师将蓝图描绘出来,包括其形状、结构、尺寸、材料等等,然后建筑工程师带领工人们按照蓝图将大厦一层一层地建起来。

二、设计要出众

这是一个只讲究外表的年代,如果你长得漂亮人们会喜欢看你,同时也会给人们留下深刻的印象,所以相当重要美工相当重要。大型网站建设,自然要竖立好自己的形象。所以在设计上一定要保持干净简洁的风格,并且是类别鲜明。一般网友们浏览网页,都是希望找到吸引自己的东西然后进行阅读,如果网站类别不鲜明,让网友们找了很久都无从下手,不知该如何进入主题,那网页设计就失败了。所以,可以总结出,网站风格要简洁鲜明,并且内容要直白清楚,能一下子进入正题,给阅读的人一个直接的解释,让人对这个网站有一个初步的正确的印象。

三、程序要选好框架

   网站建设必然要用到程序,程序的好坏关系到网站的成败,一个好的程序不但要有好的框架,而且要有好的效率。网站的效率问题关系到方方面,例如服务器的好坏,缓存设计的好坏等等。我们这些总结讨论的是ASP.NET+SQL数据库,它是微软力推的话坏我不去评价,我是小人物没有评价他们的能力。这里我只强调一点一定要选择好的程序和框架,找到一个平衡点。 

四、团队的力量很重要,团队的配合需注意

  一个大型网站的开发不可能由单人作战完成,一定是需要一个团队的合作才能做好的。而好的团队才能制作出好的效果,所以在开发和建设过程中一定要时刻注意团队问题。在技术方面,要经常交流和沟通,毕竟一个人的力量是有限的,经常和队友交流技术的经验和感想,也能解决很多技术上的问题,收获也更多,一举两得。另外,在策划和后期运行维护之类的工作中,也需要团队交流,只有协调了团队所有人的想法,之后的工作才不会有冲突,只有所有人明确了各方面的任务,之后如果工作出现问题才能更容易地解决。如果一个团队无法配合默契,那么往往工程是一定会出现问题的,造成返工的后果的话,则是对人力物力财力的更大消耗,得不偿失。也不要有个人英雄主义,在团队中就已没有个人之说,无论个人多有能力,都只能是融入团队之中,为整个团队做贡献。 

五、任何工作都要总结

任何工作都离不开工作总结,网站的开发和建设更是如此。 有些人觉得工作总结没什么用,但是其实它的作用是起在潜意识当中的。当你开始总结工作的时候,就会思考自己所做的工作,犯过的错,以及收获和感悟,这是对自己工作的一个最好的消化和提升。同时,对整个工程进行总结,也有利用工程的后期运行和维护。

原文地址:https://www.cnblogs.com/Leo_wl/p/3073494.html