手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

孟宪会之AJAX(XMLHttpRequest)进行跨域请求方法详解

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。

那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置 从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置 document.domain 属性将它们认为是同源的。

随着 Web2.0 和 SNS 的兴起,Web 应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的 Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上 以降低负载。

值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group(Web 应用工作组)发布了一个 Cross-Origin Resource Sharing(跨域资源共享,该规范地址:http://www.w3.org/TR/access-control/和http: //dev.w3.org/2006/waf/access-control/) 推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是:该规范只能应用在 类似 XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,已经可以进行跨域请求了。

Cross-Origin Resource Sharing 的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而,对于那些 HTTP 请求导致用户数据产生副作用的请求方法(特别是对于除了GET、某些 MIME 类型的 POST 之外的 HTTP方法),该规范要求浏览器对请求进行“预先验”,通过发送 HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法,在征得服务器的同意后,再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息(如 Cookie 和 HTTP Authentication 数据)随同请求一起发送。

请看详细。。。

» 阅读全文

Ways to debug your jQuery or JavaScript codes

Debugging your client code is rather a normal procedures for any web developers. Everyone will shout Firebug! yeah, me too. But Firebug is great for syntax detection but how about logic problem? In this article i will share with you some of the ways i used to debug my JavaScript or jQuery codes when I’m developing my web application. I will also share with you a trick that i used on my code to alert me that a bug occurs in a particular script since i don’t get many helpful users nowadays.

Alert Them Out

The most simple and basic way of debugging is by using JavaScript alert function. This is old but is quite useful sometimes. Especially when you do not want to remember other debugging methods. It’s pretty simple, alert the message you want to see. If the alert doesn’t appear, this means that the error is before the alert statement. I usually do this when I’m debugging IE although there are tools available for IE.

JavaScript代码
  1. alert("The Bug Is Somewhere Before ME!");  

 

Log them up

Well, if you are using WebKit browsers for your development (FireFox, Chrome, Safari) you may want to try this.

JavaScript代码
  1. if (window.console)  
  2.     window.console.log("The Bug is killing me");  

 

What this does is to log the string ‘The Bug is killing me’ into the console such as Firebug. It’s always better than using alert and see this infinity loop that keep popping out until you are force to shut down your browser!

Log them with jQuery

The above two methods work both in jQuery and JavaScript. But this only function well in jQuery. This is definitely not something i came up with but its from Dominic Mitchell

JavaScript代码
  1. jQuery.fn.log = function (msg) {  
  2.     console.log("%s: %o", msg, this);  
  3.     return this;  
  4. };  

 

 The above creates a function, ‘log’. This function will do exactly similar to the one above but the differences is that it format the string a little bit before displaying out to the console. This is good for debugging your long chaining with jQuery. Although the previous method also can be used to debug chaining but it will required an additional line instead of including it into the chaining process. So you can debug this way,

JavaScript代码
  1. $(root).find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");  

Try and catch

In JavaScript, you can try to catch the error in a particular scope. This way, it won’t propagate to other section of the code.

JavaScript代码
  1. try  
  2. {  
  3.   //Run some code here  
  4. }  
  5. catch(err)  
  6. {  
  7.   //Handle errors here  
  8. }  

 

 This is pretty good when you are trying to debug one of the many function in your JavaScript.

Catch them all

The last one i am going to show you is to catch any one of the error into a particular function instead of using multiple try and catch.

JavaScript代码
  1. function handleError(e)  
  2. {  
  3.     alert(’An error has occurred!\n’+e);  
  4.     return true;  
  5. }  
  6. window.onerror = handleError;  

This will handle any error occurs in your JavaScript code to the function ‘handleError’. You will want to use this at the end of your script. Especially if you want to be informed whether a particular function or script has malfunction and the users are not reporting. Basically, what you can do is to gather all information and placed them into a String or JSON. Using ajax to delivery these information to your email or database. This way, your support team will have an idea which part are having problems and your system will be more reliable. (testing doesn’t means 100% bug free) The information that you may want to know are usually located at Navigator Object in JavaScript.

Summary

These are the methods i usually look at when debugging my own client script. It might not be everything but i hope it can be useful to some of you out there. Hope you learn something!

 

原文来自于:http://hungred.com/2009/08/04/useful-information/ways-debug-jquery-javascript-codes/

Author: Clay Lua

 

 

ExtJs 备忘录

这个,当然不是我写的。我用的更多的应该是jQuery,相对于JS这方面来说,jQuery框架我用的是最多的。
在jQuery没有出来之前,用过一阵子的prototype,只是现在用的少了。
mootools是一点都没有碰过,dojo亦然。extJS和yui也同样只是稍看了一遍而己。为了ExtJS我还专门买了本书,只是却几乎没有翻过。

看到这个备忘录,就想着先收藏下来,留着以后慢慢看,这样也并不错啊。。。
这个系列一共九篇,讲了表单,表格和页面搭建,还是比较有用的。即使是初学者也可以迅速上手,当然如果不深究的话,终究只是于处应用阶段,属于知其然不知其所以然。。。

1.  ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
2.  ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
3.  ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
4.  ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
5.  ExtJs 备忘录(5)—— GirdPanl表格(一)[ 基本用法 ]
6.  ExtJs 备忘录(6)—— GirdPanl表格(二)[ 搜索分页 ]
7.  ExtJs 备忘录(7)—— GirdPanl表格(三)[ 统计|查看、修改单行记录 ]
8.  ExtJs 备忘录(8)—— 管理界面搭建和其他部分控件介绍
9.  ExtJs 备忘录(9)—— Ext常用属性、方法小结 [系列完]

随便看看吧。了解一下也好,毕竟熟悉了之后,用EXTJS做界面还是很漂亮的,当然,如果写的不好,内存吃起来也是很漂亮的。

Tags: extjs, framework

如何去掉点击链接时周围的虚线框outline属性

找来找去,这个应该是最全的解决方案列表了。。突然间想找这个是因为,网易评论的“分页列表”用的是链接,但没有虚框,很好看,所以想找找这样的资料。。。

以下就属于原文了。。

如何隐藏掉点击链接时周围出现的虚线框呢?

在常规情况下,该虚线框是作为一种提示让用户明确当前关注的东西,然而如果我们把链接的4种状态样式设置比较完整的话,就不是特别需要虚线框的存 在,因为它很有可能影响页面的美观。尤其是在做应用系统界面的时候,总给人一种浏览网页的感觉,显得不够专业。我就遇到过这种情况,有次做一个WEB应用 项目,那用户以前使用桌面软件的,突然转到B/S软件下操作,老是觉得点击链接或按钮出现的虚线框让他很不爽。后来我们挨个把所有会出现虚线框的链接都改 过一遍,这客户高兴坏了,后来还说这系统功能性这么一改好用多了。可见,这么一个小小的东西,对用户体验是多么的重要。

当然,如果全盘否定掉链接虚线框,对使用键盘的用户体验可能又是个大弊端。但这就是另外一个话题了,这里就不说了,不然就扯出UI设计和用户体验这个大话题了,我这小小的地方可说不清楚呢。

以下是解决方案:

方法一:
在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true” 属性即可,但这个属性是IE私有的,Firefox是不认的。

XML/HTML代码
  1. <a href="#" hidefocus="true" title="加了hidefocus" >欢迎来到博客园(加了hidefocus属性)</a>  
Firefox的处理方法比较符合标准,只需要在样式里设置a:focus{outline:none}皆可:
CSS代码
  1. .xzw_test a.setFocus:focus{outline:none}  

方法二:

通过javascript方法让其点击后失去焦点从而达到没有虚线框,也不失为一种曲线救国的方案:

JavaScript代码
  1. //通过判断可以指定某个必要的链接失去焦点  
  2. if(j(this).attr("id")=="jsControl")   
  3.   j(this).blur();  

--EOF--

作者最后说:Opera也是很WEB标准的浏览器哦,大伙不妨多用用。

不过我现在已经不用了。中文版的opera太难看了。不知道UI是怎么设计的。又或者是我的字体有问题?还是我看惯FF或者safari?唉。。人被养刁了也不好。

由于我的页面不能提供测试样例,所以,想看测试样例的朋友还请移步到:http://www.cnblogs.com/miqi2214/archive/2008/12/25/1361996.html,里面有关于图片和链接的样例

 

Tags: outline, 虚框, 链接

jQuery1.4正式版发布

每天看CB,总有新发现。这不,jQuery 1.4发布又是从他们网上看来的。每天多看评论总会找到一些新的乐趣。
比如,百度的一些关键词之类的。偶尔也能让自己为新奇的SEO方法找到一点窍门。

乱弹,乱弹,上主菜:

在jQuery的4岁生日之时,jQuery开发团队很高兴地发布最新的jQuery1.4版本!其他的代码演示、测试、文档的更新也会陆续进行更 新发 布。对于jQuery发烧友来说,jQuery1.4的发布也是一个大新闻!下面是来自于jQuery的官方网站翻译(英语高手请勿拍砖!): 在jQuery的4岁生日之时,jQuery开发团队很高兴地发布最新的jQuery1.4版本!其他的代码演示、测试、文档的更新也会陆续进行更新发 布。

jQuery Minified (23kb Gzipped)
jQuery Regular (154kb)

此外,谷歌已经提供了jQuery1.4副本,jquery团队上传到了Google服务器托管服务中。这jQuery1.4的版本是自动minified和gzip 的,地址为:
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

jquery1.4所有的变化和功能添加到jQuery1.4文档中。

--EOF--

看到jQuery又添加了这么多的新功能,实在为自己的行为感到惭愧,一直在用它,却从未为他做过贡献。

新闻来源:http://www.cnbeta.com/articles/102208.htm