用户gmail邮箱格式

1.
1Ajax概述Ajax全称是AsynchronousJavaScriptandXML,即异步JavaScript和XML,这也概括了Ajax应用程序的基本特点:由JavaScript编写、程序异步执行、用XML来封装和传输数据.
Ajax并不是什么新技术,而是将各种已经存在的成熟技术,采用一种崭新的开发模式重新揉合在一起,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天.
具体来说,Ajax主要由以下技术组成:HTMLCSSDOM(HTMLDOM和XMLDOM)JavaScriptXMLXMLHttpRequest1.
1.
1关键技术:XMLHttpRequest可以看到,除了XMLHttpRequest技术,其他技术都是目前得到理解和广泛使用的基于Web标准的技术.
而XMLHttpRequest技术正是整个Ajax技术体系的核心,是Ajax得以区分传统Web应用程序的标志.

XMLHttpRequest最初叫做XMLHTTP,由微软(Microsoft)于1999年在IE5.
0中率先推出.
XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面内与服务器通信的手段,这样就使得页面内的JavaScript可以在不刷新页面的前提下,向服务器提交数据,及从服务器获取数据.

XMLHttpRequest的出现打破了传统Web应用程序的固有模式,即Web应用程序再也不一定是由一组连续的页面组成.
在传统的Web应用程序中,用户大部分交互性的操作,都需要等待页面的切换并刷新整个页面,而在页面刷新的间隙中,用户只能"傻傻地"等待,什么也做不了.
XMLHttpRequest的出现改变了这一笨拙的开发模式,使得用户可以不切换页面就能提交数据到服务器,并能局部更新页面以显示更新后的数据,为用户提供了更好的用户体验.

正是由于XMLHttpRequest的优越性,使得其他厂商的浏览器纷纷开始支持XMLHttpRequest.
几乎所有的主流浏览器,例如IE、Firefox、Netscape、Opera以及苹果(Apple)公司推出的Safari,全部都支持这个技术.
如今,XMLHttpRequest已经成为事实标准.

1.
1.
2Ajax名词的由来虽然XMLHttpRequest的出现已经有近十个年头,但是Ajax这个概念却是直到2005年2月才被AdaptivePath公司负责用户体验策略的主管JesseJamesGarrett正式提出.
他在2005年2月18日发表了一篇题为《Ajax:ANewApproachtoWebApplications》(Ajax:一个Web应用的新途径)的论文,明确地将Ajax定义为AsynchronousJavaScriptandXML,这就是Ajax这个名词的由来.
而Ajax技术应用的先驱和主要推动者则是著名的搜索引擎公司:Google.
Google在2005年推出的Gmail,充分展示了Ajax的魅力所在,吸引了无数用户.
从此,在全世界范围内逐渐刮起了一阵Ajax的旋风.

Google公司在之后相继推出的新版GoogleGroups、GoogleSuggest和GoogleMaps中,都给予了Ajax充分的表现空间.
GoogleSuggest能够根据用户的输入立刻显示关键词的建议和相关条目的搜索结果数量.
GoogleMaps给用户呈现出可以任意放大、缩小和移动地图的超凡体验.
而后,Google公司更是基于Ajax构建出了GmailChat、电子表格、日历等接近传统桌面应用程序体验的Web应用程序,将Ajax和Web的发展又往前推进了一大步.
与此同时,其他厂商也不甘示弱.
微软在推出的MSNSpace和MSNVirtualEarth服务中都大量采用了Ajax技术,并且还提供了一个名为Atlas的基于ASP.
NET2.
0的Ajax开发框架(最终被命名为ASP.
NETAjax).
另一个广为人知的Ajax应用,则是被雅虎收购的Flickr.
com提供的一种基于Ajax技术的图片管理服务.
虽然其功能并不是十分强大,但是用户可以非常方便地在浏览器中对图片的标题、描述和标签等内容进行修改,这些改变在用户结束输入的同时就被保存了下来,并留在了网页上.

随着Ajax应用的逐渐广泛和深入,Ajax应用程序的开发效率成为了一个重要的问题.
在这时,先后涌现出了一大批优秀的Ajax应用框架:从底层开发框架Prototype.
js到UI框架YUI/YUI-ext,再到代码组织框架JSVM等;从早期单纯的客户端框架,到后期与服务端整合的开发框架,如ASP.
NETAjax、GWT等,都标志着Ajax技术正在逐渐走向成熟和辉煌.
1.
2经典案例1:搜索关键词建议系统(GoogleSuggest)1.
1节向读者介绍了Ajax的基本概念和发展历史.
为了让读者对Ajax技术有更深刻和直观的了解,本节和1.
3节特别准备了两个经典的Ajax应用案例给读者.
这两个案例来自1.
1节中提到的Ajax技术主要的推动者:Google公司,其分别是搜索关键词建议系统GoogleSuggest和邮件服务系统Gmail.
GoogleSuggest是Google公司推出的一项搜索关键词建议系统.
在中文版的Google网站,是默认开启这项功能的,读者可以直接访问http://www.
google.
cn来体验GoogleSuggest的功能.
而在英文版的Google网站中,GoogleSuggest默认被关闭了,所以需要访问专门的页面http://www.
google.
com/webhpcomplete=1&hl=en.
中文版的Google搜索界面如图1.
1所示.
GoogleSuggest的概念其实非常简单,就是当用户在搜索框输入关键词时,程序自动根据用户输入的一部分关键词来检索相关建议词及其搜索结果的数量,并以下拉列表框的样式将这些建议词显示在输入框的下方,供用户选择.

如图1.
2所示,在搜索框中输入"AJAX"后,搜索框下方出现了一个下拉列表框,GoogleSuggest自动选择了10条建议词,并显示在这个列表框中.
当用户改变输入框中的关键词时,下拉列表框中的建议词也会立即随之发生相应的改变.
如图1.
3所示,在搜索框中继续输入"框架"后,下面的下拉列表框的内容马上切换成了与"AJAX框架"相关的建议词内容.

图1.
2GoogleSuggest效果图1图1.
3GoogleSuggest效果图2据分析,这些建议词是按照搜索次数由大到小排列的,而每次显示的建议词不会超过10个.
当用户单击选择其中一个建议词,或者用键盘上的方向键选择一个建议词并按确认键(Enter键)后,页面就会跳转而显示相应的搜索结果,效果如图1.
4和图1.
5所示.

图1.
4选择建议词图1.
5搜索结果通过上面的演示,读者可以发现,在建议词显示和更新的过程中,整个页面并没有任何刷新的行为发生,这些建议词好像一开始就写在页面中一样,但显然这是不可能的.
那么,这些建议词的数据是如何获取,并更新显示在页面上的呢(1)当用户输入关键词时,自动触发GoogleSuggest的监听程序.
(2)程序获取用户输入的内容,然后以Ajax的方式,在页面内部制造HTTP请求,将输入内容发送给Google的数据服务器.
(3)数据服务器接收到请求后立即按照用户输入的内容进行检索和组织数据,然后返回给驻留在页面内部的GoogleSuggest程序.
(4)程序接收到数据服务器返回的数据后,立即对数据进行分析和再组织,然后将建议词显示在页面上供用户选择.
在用户输入关键词后极短的时间内,GoogleSuggest就已经完成了一次与服务器的交互,在用户毫无察觉的情况下,就已经获取了服务器即时返回的数据来供用户进一步操作.
整个流程如图1.
6所示.
图1.
6GoogleSuggest序列图对GoogleSuggest的介绍就到这里,1.
3节将向读者介绍优秀的电子邮件服务系统:Gmail.
1.
3经典案例2:优秀的电子邮件服务系统(Gmail)1.
2节向读者介绍了一个经典的Ajax案例:GoogleSuggest.
本节将会向读者介绍一个更为庞大和复杂的经典Ajax案例:Google公司出品的优秀电子邮件服务系统Gmail.
1.
3.
1注册Gmail注册Gmail和普通的邮箱几乎没有区别,步骤如下:(1)使用浏览器访问http://www.
gmail.
com,进入Gmail的登录界面,如图1.
7所示.
(2)单击屏幕右下角的SignupforGmail超链接,可以建立新的Gmail账号.
注册界面如图1.
8所示.
(3)在填写登录名时,可以使用"checkavailability!
"按钮来检测所填写的登录名是否可用,检测结果将无刷新的显示在文本框下面,这也是Ajax技术的典型应用.
效果如图1.
9所示.
图1.
7Gmail登录界面图1.
8Gmail注册界面图1.
9检查登录名是否可用在注册完成后,就可以登录使用Gmail了.
1.
3.
2Gmail主界面登录后,Gmail的主界面如图1.
10所示.
图1.
10Gmail主界面Gmail的主界面主要由页面左边的导航区域和右边的工作区域两部分组成.
整个界面简洁明快,没有多余的装饰性图片和其他的广告,在提供用户良好的视觉体验的同时,也减少了页面加载所需要的时间.

先看导航栏.
Inbox按钮被一个蓝色的半圆角矩形的色块所包围,从而标明当前所处的位置是Inbox.
值得注意的是,这些导航按钮并没有用到a标签,而是使用span标签,其HTML代码如下所示.