刊名: 教育研究
主办: 中国教育科学研究院
周期: 月刊
出版地:北京市
语种: 中文;
开本: 大16开
ISSN: 1002-5731
CN: 11-1281/G4
邮发代号:2-277
历史沿革:
专题名称:教育理论与教育管理
期刊荣誉:社科双效期刊;国家新闻出版总署收录;中国期刊网核心源刊;CSSCI 中文社会科学引文索引来源期刊;北京大学《中文核心期刊要目总览》来源期刊;
创刊时间:1979
使用jQuery的异步认证和注册技术
【作者】 张宇明
【机构】 云南省德宏职业学院
【摘要】【关键词】
【正文】 摘 要:本文在介绍jQuery特点和使用方法的基础上,探讨如何利用JQuery简化JavaScript编写,灵活方便用户异步认证和注册技术,为用户提供非常友好的注册界面。
关键词:JavaScript,Ajax,jQuery,异步认证
引言
传统的用户注册和认证都必须重新加载整个网页面才可以验证用户名的有效性,使用Ajax异步更新技术可以在不重新加载整个网页的情况下,对网页的某部分进行更新,从而验证用户名等信息的有效性。jQuery是新兴的JavaScript框架,它精准简单的查询和精彩多样的插件使其在网页设计中有着不俗的功用。
1 JavaScript、Jquery 和 AJAX 技术
1.1 JavaScript
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,是浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
1.2 Jquery
Jquery其实就是一个JavaScript库,Jquery是又一个优秀的轻量级的JavaScript库。它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML文档、事件及实现动态效果,并且方便地为网站提供交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可,通过ID就可以对它们进行一系列的操作。
1.3AJAX 技术
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),它是指一种创建交互式网页应用的网页开发技术。它是一种用于创建快速动态网页的技术。打破了传统网页更新内容时,必须重新加载整个网页面。AJAX可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行实时更新。
1.4Jquery和AJAX技术相结合实现异步更新
Jquery与AJAX技术在网页设计特别在网页交互方面有很好的效果,一般通过Jquery来将AJAX开发简单化,使代码简洁易读。不用像传统网页一样用Load()函数来导入整个网页,用Jquery提供的函数可以简化程序代码,让网页信息变得更简化。
2实现用户注册异步认证及程序部分代码
用户注册时填写一个即将注册的用户名,此时用Jquery和AJAX技术向服务器发送一个认证请求,服务器处理后就可以告诉用户此用户名是否已经被注册,这样就可以减少数据的处理量,同时也提高了界面的友好性。
2.1Jquery加载及传递用户名数据
对于文本型的用户名可采用Document对象的方法进行读取信息,一般有三种方法可以获取用户名信息:
第1种:Document.getElementById(“ID”).Value;
第2种:Document.getElementsByName(“Name”).Value;
第3种:Document.getElementsByTagName(“Name”).Value;
这里的三种方法都是通过Jquery中的Document的函数来处理事件的,当网页的DOM就绪时,这些函数就可以调用了。但一般只用第一种即Document.getElementById(“ID”)来获取用户名信息,因为只有它得到的信息是唯一的,其它两个方法得到的信息一般不只一个而是是一个集合。如:
UserName= Document.getElementById(“UN”).Value;
2.2 Ajax操作Jquery的实现过程
Ajax在网页加载时主要通过两种方式进行值传递,即:get/post。
(1)post方式
$.post(Url,{UName:UserName},success(data));
(2)get方式
$.get(Url,{UName:UserName},success(data));
以上两种方法都是请求从服务器加载数据,功能类似,这里我们以post为列探讨它的功能和用法。
此方法中Url是一个检测页面CheckUName.asp;{UName:UserName}是向该页传递的数据;success(data)是请求成功时执行的回调函数;data是CheckUName.asp页面返回的数据。
使用get/post后发送用户名信息到CheckUName.asp页面,并接收从服务器返回一个值,存储在data里,再通过success函数对data的数据进行分析,从而判断输入用户名的有效性。
2.3 参数传递及返回结果
验证页面CheckUName.asp的关键代码:
UserName=Request("UName");此处为接收post传过来的用户名,然后用“select * from user where un=UserName”在数据库中查找是否已经存在,如果存在则返回0告诉用户此用户名已经存在不能注册,不存在则返回1告诉用户此用户名可以注册。
3结语
网页注册方式的用户验证在各种网站建设使用中得到了应用广泛,为了告诉用户此用户名是否可用,过去一般使用整个网页提交的方式验证用户名的有效性,现在通过使用jQuery异步认证方式,这样不但简化了程序代码,提高了界面的友好性,而且这种方法易于实现,简单实用。
参考文献:
[1] W3School 在线教程 JavaScript教程,jQuery 教程,AJAX教程;
[2] 百度知道、百度文库、百度贴吧等;
[3] 网络相关帮助文档;
关键词:JavaScript,Ajax,jQuery,异步认证
引言
传统的用户注册和认证都必须重新加载整个网页面才可以验证用户名的有效性,使用Ajax异步更新技术可以在不重新加载整个网页的情况下,对网页的某部分进行更新,从而验证用户名等信息的有效性。jQuery是新兴的JavaScript框架,它精准简单的查询和精彩多样的插件使其在网页设计中有着不俗的功用。
1 JavaScript、Jquery 和 AJAX 技术
1.1 JavaScript
JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,是浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
1.2 Jquery
Jquery其实就是一个JavaScript库,Jquery是又一个优秀的轻量级的JavaScript库。它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML文档、事件及实现动态效果,并且方便地为网站提供交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可,通过ID就可以对它们进行一系列的操作。
1.3AJAX 技术
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),它是指一种创建交互式网页应用的网页开发技术。它是一种用于创建快速动态网页的技术。打破了传统网页更新内容时,必须重新加载整个网页面。AJAX可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行实时更新。
1.4Jquery和AJAX技术相结合实现异步更新
Jquery与AJAX技术在网页设计特别在网页交互方面有很好的效果,一般通过Jquery来将AJAX开发简单化,使代码简洁易读。不用像传统网页一样用Load()函数来导入整个网页,用Jquery提供的函数可以简化程序代码,让网页信息变得更简化。
2实现用户注册异步认证及程序部分代码
用户注册时填写一个即将注册的用户名,此时用Jquery和AJAX技术向服务器发送一个认证请求,服务器处理后就可以告诉用户此用户名是否已经被注册,这样就可以减少数据的处理量,同时也提高了界面的友好性。
2.1Jquery加载及传递用户名数据
对于文本型的用户名可采用Document对象的方法进行读取信息,一般有三种方法可以获取用户名信息:
第1种:Document.getElementById(“ID”).Value;
第2种:Document.getElementsByName(“Name”).Value;
第3种:Document.getElementsByTagName(“Name”).Value;
这里的三种方法都是通过Jquery中的Document的函数来处理事件的,当网页的DOM就绪时,这些函数就可以调用了。但一般只用第一种即Document.getElementById(“ID”)来获取用户名信息,因为只有它得到的信息是唯一的,其它两个方法得到的信息一般不只一个而是是一个集合。如:
UserName= Document.getElementById(“UN”).Value;
2.2 Ajax操作Jquery的实现过程
Ajax在网页加载时主要通过两种方式进行值传递,即:get/post。
(1)post方式
$.post(Url,{UName:UserName},success(data));
(2)get方式
$.get(Url,{UName:UserName},success(data));
以上两种方法都是请求从服务器加载数据,功能类似,这里我们以post为列探讨它的功能和用法。
此方法中Url是一个检测页面CheckUName.asp;{UName:UserName}是向该页传递的数据;success(data)是请求成功时执行的回调函数;data是CheckUName.asp页面返回的数据。
使用get/post后发送用户名信息到CheckUName.asp页面,并接收从服务器返回一个值,存储在data里,再通过success函数对data的数据进行分析,从而判断输入用户名的有效性。
2.3 参数传递及返回结果
验证页面CheckUName.asp的关键代码:
UserName=Request("UName");此处为接收post传过来的用户名,然后用“select * from user where un=UserName”在数据库中查找是否已经存在,如果存在则返回0告诉用户此用户名已经存在不能注册,不存在则返回1告诉用户此用户名可以注册。
3结语
网页注册方式的用户验证在各种网站建设使用中得到了应用广泛,为了告诉用户此用户名是否可用,过去一般使用整个网页提交的方式验证用户名的有效性,现在通过使用jQuery异步认证方式,这样不但简化了程序代码,提高了界面的友好性,而且这种方法易于实现,简单实用。
参考文献:
[1] W3School 在线教程 JavaScript教程,jQuery 教程,AJAX教程;
[2] 百度知道、百度文库、百度贴吧等;
[3] 网络相关帮助文档;