使用jquery与asp.net的webservice 进行通讯

asp.net有一套非常完善的框架可以很容易写出符合标准的提供webapi的程序。但是如果使用第三方的软件(如用jquery 的ajax)调用的话会出现一些细节上的问题。

比如:vs2010里面创建了一个webservice默认支持两种方法:

post进去一个json,返回一个json

post进去一个xml,返回一个xml

由于使用jquery构造一个json字符串还比较简单,解析起来也不困难。所以我首先采用了这种方法

下面给出了一个示例:

js端:

jsondata = “{examinees_name:'” + encodeURI($(‘#txtname’).val()) + “‘,examinees_ID:'” + $(‘#examinees_ID’).val() + “‘,examinees_psw:'” + $(‘#password1’).val() + “‘,examinees_email:'” + $(‘#email’).val() + “‘}”;

$.ajax({
    type: “POST”,
    contentType: “application/json”,
    url: “WebService.asmx/register”,
    data: jsondata,
    success: function (data) {
        alert(data.d);
    }
});

上面的代码中中jsondata构造出了一个json字符串来传递参数,通过表单元素构造出类似

“{examinees_name:’NAME’,examinees_ID:’123456′,examinees_psw:’123456′,examinees_email:’p@p.com’}”

这样的字符串post给服务端WebService.asmx/register

注意其中

contentType: “application/json”,
这个参数告诉服务器传递参数是以json形式的。

Technorati 标签: ,,

 

这种使用起来麻烦的地方是需要构造一个json字符串来传递参数,如果对于表单元素比较多,写起来就比较麻烦,而且也不方便维护。

其实WebService还支持直接post和get参数的方法,不过需要经过配置

在web.config文件里面的<webServices>节点按照如下配置即可使其支持直接post参数的方法。返回是一个xml。

<webServices>
<protocols>
    <add name=”HttpSoap”/>
    <add name=”HttpPost”/>
    <add name=”Documentation”/>
</protocols>
</webServices>

还可以加上

<add name=”HttpGet”/>

使其支持直接get传递参数的办法。

再给出一个直接使用post ajax实现登录的示例:

$(“#login_form”).bind(“submit”, function() {
    if ($(“#login_name”).val().length < 1 || $(“#login_pass”).val().length < 1) {
        $(“#login_error”).show();
        $.fancybox.resize(); 
        return false;
    }
    $.fancybox.showActivity();
    $.ajax({
        type        : “POST”,
        cache    : false,
        url        : “WebService.asmx/examineesLogin”,
        data        : $(this).serializeArray(),
        success: function(xml) {
       $(xml).find(“boolean”).each(function(){         //找到xml根节点
           if ($(this).text()==’true’)
           {
                 $.fancybox.close();
           }else{
                $.fancybox(‘用户名或密码错误,登陆失败’);
           }
       });
        }
    });
    return false;
});

关于.net的思考

最近接触了下一些关于.NET 构建web应用程序的东西。发现.NET这个真是强大。一些登录之类的东西只需要拖一个控件就可以搞定,编写效率超高,和写本地程序似的。

不过这样也有坏处,就是就算是把整个程序独立都写好了,也不能了解一些html或者JavaScript之类的东西,甚至不知道get和post传递参数的原理。同时因为封装成了控件,所以其中自定义的特性也不是很好。

当然只要你愿意,你也可以使用php的模式来写.NET,但是感觉上总有点怪怪的。

微软的东西么,一般比较的封闭。一般的php,python,java程序员都比较不屑。但不管怎么说,都不能否认它的强大。对于大多数的人而言,这样降低了web程序开发的门槛,无疑是一件好事。所以对于技术,即使比较排斥,也不能完全没有了解。在没有实践过之前是没有发言权的。

正在缓慢发生的web变革

在我刚用上电脑的时候,那时候还用着ie4.0和win98,页面全是静态的htm,flash已经有了,但是很少出现在网页里。

制作网页是用frontpage,定位一律用表格(我很奇怪为啥现在很多教材还是这么教的)。

javascript也有了。记得当时有一种类似“网页特效制作大师”之类的东西,就是一个小程序,然后通过一些参数的设置或者直接就可以给你一段javascript代码,贴到网页的源代码里就会有各种各样的效果了。比如什么鼠标边上跟着图片或者字啊,什么根据访客的时间显示不同的问候语之类的。当时玩这个乐此不疲,也许做好了还会传到当时的“网易免费个人主页”去和别人好好的炫耀一番。

由于动态的免费服务器资源很难找,所以呢会去申请那种免费的留言板啦,用户统计什么之类的东西;七拼八凑整合起来,看上去还像模像样了。

然后呢不知道什么时候,突然出现了很多比较完善的基于web的论坛程序了,印象最深的是当年的“动网bbs”;由于具有一些类似积分啦,权限啦之类的东西,就感觉很有趣,很好玩。于是乎似乎纯静态的页面就很少见了,在学会看url以后,就知道那些带问号的都是经过参数传递而现实的页面,特别是那些有.asp;.php后缀的。

flash技术应用的范围也广泛起来。一些flash小游戏出现,还有大量的应用于广告banner上。再然后就出现那种很惊艳的flash整站(记得印象最深的是2advancedstudio)。flash的actionscript也是从原来的没有一点点的进化到一门的语言(话说那时候你能在帧上写一个stop,在按钮上写个play就觉得很犀利了呢)。

说到flash的发展,有一个东西的出来让flash的发展有了质的飞跃,那就是flv视频的出现。这玩意儿催生了youtube,土豆,优酷这样的在线视频网站。以至于现在很大部分的互联网流量是被这些视频信息占用的。以前到处找不到什么看电影的站,现在满大街都是了。

由于开发者们发现用表格定位什么的对于页面维护的成本太高了,所以开始使用div+css的方法构建网页。这样能很方便的实现各个网页样式的统一。

于此同时,火狐和opera等其他浏览器的兴起,让人知道了原来除了ie还有其他选择(随之而来的是各种浏览器兼容问题)此时ie6.0正当鼎盛时期,开发者们发现ie6实在是太讨厌了(尤其对于css定位的网页更是如此),可是又对其表示无奈,谁叫大部分人还都在用它呢?

gmail的出现让大家眼前一亮,原来网页可以无刷新到这种程度。这就是ajax开始兴起的时候了。其实ajax实现的技术不是啥新鲜玩意儿,就是javascript,但是人们不知道原来javascript可以这么用;传统的js要实现ajax写起来特麻烦,于是出现了各种ajax框架;其中jquery以其易用和强大受到了广泛的使用。一个最简单的ajax范例就是表单的提前验证。以前申请用户名都要按一个按钮检查用户名是否已存在,现在你看谁家还要按个按钮的?ajax的出现改变了人们对于网页的体验。原来干啥都要刷个新的,现在很多地方都用不着了。网页变得更像是一个程序了。

手机等便携设备对web的访问也越来越受到人们的关注。

web2.0 用户创造内容普遍被实践,博客,sns,微博等形式被人们普遍的接受。互联网连接越来越多的东西,网络商业也越来越发达。

智能手机让手机也能体验到电脑般的浏览体验,同时手机的定位系统也催生了不少新的互联网应用。

flash的发展是飞快的,很重要的原因就是网页flash插件的自动升级使得flash可以一直有新的特性产生而不产生兼容问题。而到目前为止在纯html方面,从技术上几乎一直在吃老本,没有什么新的东西出来。

chrome的出现可以说是标志性的,除了其简洁高速的浏览体验备受赞誉外,其自动升级和对新的标准的支持对于开发者而言非常的重要,chrome的普及让一场以新技术为导向的web变革成为可能。比如HTML5。html5里面有一些非常好的特性比如说原生支持mp3和视频;还有就是websocket。

websoket很有可能就是下一个明显发生web变革的点。因为我们看到了一个趋势,网页变得越来越像程序了;然而传统ajax的性能并不能让人满意,虽然中间出现了类似comnet这样的长轮询但需要消耗更多不必要的服务器资源。websoket的双向通信非常的让人兴奋,因为终于服务端可以push东西到客户端了,网页更像一个程序了。

(这篇文章是我早上起太早睡不着的产物,可能逻辑上会有一些问题,语言也不怎么通顺,也没有揭示出什么很神奇的东西;大家随便看看吧。)

在非IE浏览器中实现"灰阶化"

原文:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

转自:http://www.cssrain.cn/?p=9

这个问题看似简单,实际上要付出很大的努力[2]。要的结果很简单:在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale(灰度)滤镜。然而,它的解决方法并非你想得那么简单,这也让我着实大大地吃了一惊。
在 IE中,grayscale滤镜可以应用到任意一个元素中,它会很直观地将元素转变为灰度。可以使用下面这行复杂且专有的CSS来实现grayscale滤镜。

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
如上所示,在IE中实现这种效果简单是小菜一碟;然而,在其他的浏览器中,需要引起很大的关注。 需要有两件情况值得考虑:图片元素和非图片元素。“非图片”类元素实现十分简单:在当前文档中遍历每个元素,寻找类似“backgroundColor”和 “color”的色彩属性,将它的RGB颜色值转换为灰度值。有不少方法可以实现;注意我们这里不是说降低图片的饱和度;“灰阶化”很明显跟它不一样。
// Desaturate:降低饱和度
function RGBtoDesat(r,g,b) {
var average = (r + g + b) / 3;
return {
r: average,
g: average,
b: average
};
}

// Grayscale:灰阶化
function RGBtoGrayscale(r,g,b) {
var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
return {
r: mono,
g: mono,
b: mono
};
}
因此,每个带颜色属性的元素要使用它来转为灰阶;初始颜色用来重置属性值。 我们的图片能否转为灰阶取决于两个因素;一是浏览器必须要支持HTML5 canvas元素和它getImageData方法,二是主机上的所有图片必须位于同一域名下;除此外,主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari(4以下版本)由于不支持getImageData,先不作讨论。其他的浏览器支持canvas元素,完全可以做到“灰阶化”图片。 实现这种方式是要“手工”遍历图片中的每一像素,并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话,浏览器绝对吃不消;除非有极其快速的Javascript引擎来承受大图片处理的压力。 鉴于上面提到的原因,因此在任一个元素需要“灰阶化”前,添加一个“预置”函数去运行显得尤为必要,这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话,不必使用“预置”函数,可以直接使用这种暴力转换。 为什么呢,这是为什么呢? 你肯定想知道在“灰阶化”会有哪些应用。那么,比如说:降低色彩以减少用户的视觉焦点,以此来减少用户对你网站上五颜六色东西的关注;比如说,光箱特效。像 vBulletin的论坛系统就使用了这种效果,它会你点击离开时,将页面变灰;然后会弹出确认框,这个确认框非很容易识别,因为它是页面中惟一的带色彩的东西。 “灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜,我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了,但这并不重要;我仅仅是对实现它很感兴趣。
示例 我做了一个示例页面,上面有几个格斗士[5]的图片,功能已经在这篇文章中说过了。注意,在Safari(小于4)或才 Chrome(还有可能在Firefox老版本(V.2以前))不起作用;不要忘了它仅仅是一个试验。 http://james.padolsey.com/demos/grayscale/ 使用方法 要对一个元素实现“灰阶化”需要调用 grayscale()函数,并将元素作为参数传递,比如:
   var el = document.getElementById( 'myEl' );
   grayscale( el );
   // 也可以传递一个DOM集合
   // (这样所有的元素都会得到“灰度效果”)
   grayscale( document.getElementsByTagName('div') );
    //也可以在jQuery对象集合中使用
   grayscale( $('div') );
若要重置元素(返回到原来的颜色状态)必须调用grayscale.reset(),并将需要重置的元素作为参数传递:    grayscale.reset( el );    // reset()同样可以接受DOM对象或jQuery对象集合参数    grayscale.reset( $('div') ); 其中的prepare函数,上面已经讲过了,在有大图片要处理的情况下需要使用到,或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理(一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间)。    grayscale.prepare( document.getElementById('myEl') );    // 同样可以接受DOM对象或jQuery对象集合参数    grayscale.prepare( $('.gall_img') ); [完]
注: [1]:灰阶化:原文grayscaling,意为“采取灰度标准”,即灰阶化,将图片由彩色转为灰度; [2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“,可能存在翻译问题; [3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”,翻译存疑; [4]零超时递归技术:原文zero-timeout recursion technique,应为zero-time recursive technique;参见http://en.wikipedia.org/wiki/Recursion_(computer_science); [5]格斗士:原文blood-thirsty hunters,嗜血的猎人

如果有技术人员对网站变黑白有点技术上的困难的话可以参考下这一篇文章。

wordpress自动升级核心超时出错解决办法

在自动升级WordPress核心以及WordPress插件的时候,往往会因为网络原因导致下载核心或插件的时候超时,从而导致升级失败,此时WordPress会给出如下提示:

Operation timed out after 60000 milliseconds with ......

从提示中我们可以看到WordPress默认给出的超时时限是60000毫秒~即60秒,我们可以将这个值修改的大一些,使得即使在网速不佳的情况下也可以完成下载。

打开 wp-admin\includes\file.php

查找如下语句

$response = wp_remote_get($url, array('timeout' => 60));

将其中的60改大,如改成600:

$response = wp_remote_get($url, array('timeout' => 600));

保存即可。

另外提示,每次核心自动升级后都需要重新修改一次才行。

jquery插件开发方法

jQuery为开发插件提拱了两个方法,分别是:

 

jQuery.fn.extend(object);

jQuery.extend(object);

 

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

 

 

fn 是什么东西呢。查看jQuery代码,就不难发现。


jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//…. 

   //……

};

 

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

 

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。

 

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

 

$.extend({

  add:function(a,b){return a+b;}

});

 

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

$.add(3,4);  //return 7

 

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

  1. $.fn.extend({    
  2.     
  3.    alertWhileClick:function(){    
  4.    
  5.        $(this).click(function(){    
  6.    
  7.             alert($(this).val());    
  8.         });    
  9.     
  10.     }    
  11.     
  12. });    
  13.     
  14. $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1” type=”text”/>

$(“#input1”) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

 

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 NB 的插件。

 

 

转自:http://www.cnblogs.com/yeer/archive/2009/05/07/1452122.html

What am I doing.

最近终于领悟到“不仅做人要低调,做事也要低调”的新的“指导思想”。

What am I doing?全部说出来的话就不显得我低调了,而不说的话,又是另外一种形式的高调。或者我应该选择一种很低调的方法说出来,比如:“不就是做几张网页么~”相对于原来的“做网站前端开发”,着实是低调了很多。

为什么有这样的效果呢,主要还是在选词方面。做网页的话大家会联想到学校里学的类似用frontpage之类的软件直接画出来那样简单的事或者用现成的模板什么的,总之就是小学生也能干的活。而“做网站前端开发”,那从听觉效果上就是另外一种效果,就NB闪闪了。

首先,“网站”一词让人联想到google、baidu、taobao等大网站,一听就觉得“有赚钱的门道”。

然后,“前端”一词具有歧义性,让人联想到“前沿、高端”的技术;而实际上,这里“前端”的意思仅仅是相对于“后台”而已。

最后一个词“开发”,那更是听上去专业的,令行外人望而却步……

 

还有,学习google的风格,做事没有出一点成果之前不透露半点风声,有成果也无声无息。

对了,话说最近炒得沸沸扬扬的chrome OS是怎么回事,一点都没有google一贯的做事风格。