AJAX之表单即时验证

最近互联网上比较火热的话题当然是关于WEB2.0的应用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用，它包括  
使用XHTML和CSS标准化呈现；  
使用DOM实现动态显示和交互；  
使用XML和XSLT进行数据交换与处理；  
使用XMLHttpRequest进行异步数据读取；  
最后用JavaScript绑定和处理所有数据；  
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。  
我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用：  
(1) 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在；  
(2) 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在；  

首先，我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求， XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。 后来Mozilla、Netscape、Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。  

对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：  

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0  
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");  
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");  

由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。  

对于Mozilla、Netscape、Safari等浏览器，创建XMLHttpRequest 方法如下：  

xmlhttp_request = new XMLHttpRequest();  

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。  

xmlhttp_request = new XMLHttpRequest();  
xmlhttp_request.overrideMimeType('text/xml');  

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：  

try{  
if( window.ActiveXObject ){  
for( var i = 5; i; i-- ){  
try{  
if( i == 2 ){  
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );  
}else{  
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );  
}  
xmlhttp_request.setRequestHeader("Content-Type","text/xml");  
xmlhttp_request.setRequestHeader("Content-Type","gb2312");  
break;}  
catch(e){  
xmlhttp_request = false;  
}  
}  
}else if( window.XMLHttpRequest ){  
xmlhttp_request = new XMLHttpRequest();  
if (xmlhttp_request.overrideMimeType) {  
xmlhttp_request.overrideMimeType('text/xml');  
}  
}  
}catch(e){  
xmlhttp_request = false;  
}  

在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：  

xmlhttp_request.open('GET', URL, true);  
xmlhttp_request.send(null);  

open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。  
第二个参数是请求页面的URL。  
第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。  

用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：  


xmlhttp_request.onreadystatechange =FunctionName;  

FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：  

xmlhttp_request.onreadystatechange = function(){  
// JavaScript代码段  
};  

在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。  

readyState的取值如下：  
0 (未初始化)  
1 (正在装载)  
2 (装载完毕)  
3 (交互中)  
4 (完成)  

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：  


if (http_request.readyState == 4) {  
// 收到完整的服务器响应  
} else {  
// 没有收到完整的服务器响应  
}  

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。  

在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据：  

(1) 以文本字符串的方式返回服务器的响应  
(2) 以XMLDocument对象方式返回响应  

实例一： 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在  

首先，我们登陆网易通行证注册页面，可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断，格式为：  
reg.163.com/register/checkssn.jsp?username=用户名  

根据上面讲到的方法，我们可以利用AJAX技术对网易通行证用户名进行检测：  

第一步：新建一个基于Xhtml标准的网页，在<head>区域插入Javascript函数如下：  

<script type="text/javascript" language="javascript">  
function getXMLRequester( ){  
var xmlhttp_request = false;  
try{  
if( window.ActiveXObject ){  
for( var i = 5; i; i-- ){  
try{  
if( i == 2 ){  
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );  
}else{  
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );  
xmlhttp_request.setRequestHeader("Content-Type","text/xml");  
xmlhttp_request.setRequestHeader("Content-Type","gb2312");  
}  
break;}  
catch(e){  
xmlhttp_request = false;  
}  
}  
}else if( window.XMLHttpRequest ){  
xmlhttp_request = new XMLHttpRequest();  
if (xmlhttp_request.overrideMimeType) {  
xmlhttp_request.overrideMimeType('text/xml');  
}  
}  
}catch(e){  
xmlhttp_request = false;  
}  
return xmlhttp_request ;  
}  

function IDRequest(n) {//定义收到服务器的响应后需要执行的JavaScript函数  
url=n+document.getElementById('163id').value;//定义网址参数  
xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数  
xmlhttp_request.onreadystatechange = doContents;//调用doContents函数  
xmlhttp_request.open('GET', url, true);  
xmlhttp_request.send(null);  
}  
function doContents() {  
if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应  
if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK  
document.getElementById('message').innerHTML = xmlhttp_request.responseText;  
//将服务器返回的字符串写到页面中ID为message的区域  
} else {  
alert(http_request.status);  
}  
}  
}  
</script>  

在<body>区域建立一个文本框，id为163id  

<input type="text" id="163id" onpropertychange="IDRequest('http://reg.163.com/register/checkssn.jsp?username=')" />  

再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示)：  

<div id="message"></div>  

这样，一个基于AJAX技术的用户名检测页面就做好了，不过这个页面将返回服务器响应生成页面的所有字符串，当然还可以对返回的字符串进行一些操作，便于应用到不同的需要当中。  

实例二： 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在  

在上面的例子中，当服务器对HTTP请求的响应被收到后，我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应，此时将不再需要reponseText属性而使用responseXML属性。  

首先登陆金山通行证注册页面，我们发现金山通行证用户名的检测方式为：  
pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:  

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>  
<response>  
<method>isExistedUid</method>  
<result>-2</result>  
</response>  

当result值为-1时表示此用户名已被注册，当result值为-2时表示此用户名尚未注册，因此通过对result值的判断可以知道用户名是否被注册。  

对上例代码进行修改：  

首先找到  

document.getElementById('message').innerHTML = xmlhttp_request.responseText;  

改为:  

var response = xmlhttp_request.responseXML.documentElement;  
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据  
if(result ==-2){  
document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";  
}  
else if(result ==-1){  
document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";  
}  

通过以上两个实例说明了AJAX的客户端基础应用，采用的是网易和金山现成的服务器端程序，当然为了开发合适自己页面的程序，还需要对自己编写服务器端程序，这设计到程序语言及数据库的操作，对于有一定程序基础的读者一定不是很难的事情，本文着重讨论了客户端AJAX的应用体验，广大读者可以根据本文讲的原理结合各种样式表现手法作出绚丽多彩的应用，希望本文能够起到抛砖引玉的作用。

转载于:https://www.cnblogs.com/alon/archive/2009/04/17/1438273.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/463511.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

黄聪：PHP获取MAC地址（转）

黄聪：PHP获取MAC地址（转）

<?php /** 获取网卡的MAC地址原码&#xff1b;目前支持WIN/LINUX系统 获取机器网卡的物理&#xff08;MAC&#xff09;地址 **/ class GetMacAddr{ var $return_array array(); // 返回带有MAC地址的字串数组 var $mac_addr; function GetMacAddr($o…
阅读更多...
Tcmalloc

Tcmalloc

Tcmalloc Ptmalloc在性能上还是存在一些问题的&#xff0c;比如不同分配区&#xff08;arena&#xff09;的内存不能交替使用&#xff0c;比如每个内存块分配都要浪费8字节内存等等&#xff0c;所以一般倾向于使用第三方的malloc。 Tcmalloc是Google gperftools里的组件之一。…
阅读更多...
今天学习的成果

今天学习的成果

其实主要搞的是数组 还有就是宏的使用。 现将数组代码列出如下&#xff1a; array(){ int a[10],i; printf("Please Input array value"); for(i0;i<10;i) scanf("%d",&a[i]); for(i0;i<10;i) printf("a[%d]%d\n",i,a[i]);} 功能很简…
阅读更多...
JVM自动内存管理机制——Java内存区域（下）

JVM自动内存管理机制——Java内存区域（下）

一、虚拟机参数配置 在上一篇《Java自动内存管理机制——Java内存区域&#xff08;上&#xff09;》中介绍了有关的基础知识&#xff0c;这一篇主要是通过一些示例来了解有关虚拟机参数的配置。 1、Java堆参数设置 a&#xff09;下面是一些简单的使用参数 其中最后一个是一个运…
阅读更多...
PHP版选择排序法

PHP版选择排序法

2019独角兽企业重金招聘Python工程师标准>>> <?php// 选择排序法函数function selection_sort(&$array) {$array_length count($array); // 数组的长度$temp 0; // 交换时用到的临时变量for ($i 0; $i < $array_length - 1; $i) {// 认为数组第$i个元…
阅读更多...
boost::stable_vector简单解析

boost::stable_vector简单解析

由于vector底层实现的机制是一个动态数组&#xff0c;因此使用std::vector<T>时&#xff0c;如果海量数据量时&#xff0c;会导致vector底层的数组很大很大&#xff0c;这样就会导致database很快就会出现内存不足而导致系统停止运行或卡住&#xff0c;这时就要考虑是否用…
阅读更多...
PHP程序员面试中经常被提问的问题【转载】

PHP程序员面试中经常被提问的问题【转载】

1&#xff0e; Include 与 require的区别&#xff0c;require和require_once的效率哪个高&#xff1f; Php在遇到include时就解释一次&#xff0c;如果页面中出现10次include&#xff0c;php就解释10次&#xff0c;而php遇到require时只解释一次&#xff0c;即使页面出现多次re…
阅读更多...
【转】英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析

【转】英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析

http://hi.baidu.com/lovegenggeng/blog/item/5d5c594c240830fed72afcd0.html英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析 黄龙旺　　龚汉忠 (上海交通大学学报编辑部, 200030,上海) 在英文论文的编辑加工中,常会遇到such as, for example, e. g…
阅读更多...
理解zookeeper选举机制

理解zookeeper选举机制

转载&#xff1a;https://www.cnblogs.com/shuaiandjun/p/9383655.html 一、zookeeper集群 配置多个实例共同构成一个集群对外提供服务以达到水平扩展的目的&#xff0c;每个服务器上的数据是相同的&#xff0c;每一个服务器均可以对外提供读和写的服务&#xff0c;这点和red…
阅读更多...
使用交互环境

使用交互环境

使用交互环境许多脚本语言的解释器都提供了交互环境&#xff0c;我们可通过此环境与计算机沟通交流。为什么叫做交互环境&#xff1f;因为我们在这里通过编程语言与计算机沟通&#xff0c;让它做任何事情&#xff0c;它都会立刻照办并给予我们反馈。运行REBOL 解释器的方式很简…
阅读更多...
[原创]K8 cping 3.0大型内网渗透扫描工具

[原创]K8 cping 3.0大型内网渗透扫描工具

[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器&#xff1f;其实也是插件化&#xff0c;但Cscan不需要编程同样可实现自定义功能&#xff0c;这比单纯插件化更容易实现插件功能Cscan旨在为用户提供一个高…
阅读更多...
std::string的resize()与reserve()的区别

std::string的resize()与reserve()的区别

std::string的resize()与reserve()的区别: resize()&#xff1a;改变的是size()与capacity()的大小 (1)、比原来的变小之后&#xff0c;后面的会被截断 (2)、比原来的变大之后&#xff0c;后面的会被填充新的东西&#xff0c;不同的编译器可能会不同 reserve()&#xff1a;…
阅读更多...
iMouse - 快速切换鼠标左右键

iMouse - 快速切换鼠标左右键

(此Blog是iMouse软件的官网)【名称】&#xff1a;iMouse【版本】&#xff1a;v1.2 (v1.2是首个公开发布版本&#xff0c;也是最新版&#xff0c;之前版本没有对外发布)【时间】&#xff1a;2012-01-06【关键词】&#xff1a;腱鞘炎、Swap、Mouse、切换、鼠标、鼠标手【功能】&a…
阅读更多...
基本排序算法及分析（二）：冒泡排序

基本排序算法及分析（二）：冒泡排序

冒泡排序和改进的冒泡排序 1/**//*------------------------------------------------------------------------------------------- 2Bubble_sort.h 3冒泡排序&#xff1a; 时间复杂度为O(N^2) 4改进的冒泡排序&#xff1a; 时间复杂度仍为O(N^2) 5 一般的冒泡排序方法有可…
阅读更多...
洛谷负环板子题

洛谷负环板子题

洛谷负环板子题 差点没笑死我 之前的题解都在清一色diss bfs&#xff0c;吹爆dfs 如今改了数据bfs又崛起了&#xff0c;dfs回家种地了&#xff0c;哈哈哈哈哈 dfs版 1 // luogu-judger-enable-o22 #include<iostream>3 #include<cstdio>4 #include<queue>5 #…
阅读更多...
std::vector中resize()和reserve()区别

std::vector中resize()和reserve()区别

在STL容器中vector用的还是比较多的&#xff0c;但是在使用时&#xff0c;会对resize()和reserve()的使用产生迷惑&#xff0c;现在就对这一情况做个对比&#xff1a; resize()&#xff1a;改变的是size()与capacity()的大小 (1)、比原来的变小之后&#xff0c;后面的会被截断…
阅读更多...
设计师和开发人员更快完成工作需求的35个惊人的jquery插件教程（下）

设计师和开发人员更快完成工作需求的35个惊人的jquery插件教程（下）

jQuery是一个快速&#xff0c;简洁的工具&#xff0c;它可以遍历HTML文档&#xff0c;处理事件&#xff0c;执行动画&#xff0c;并添加AJAX。jQuery赋予web开发更多的选择机会&#xff0c;使网站产生令人难以置信的元素效果不像之前需要写下几十行代码实现相同的效果&#xff…
阅读更多...
C#中一些格式的转换

C#中一些格式的转换

1、DateTime 数字型 System.DateTime currentTimenew System.DateTime(); 1.1 取当前年月日时分秒 currentTimeSystem.DateTime.Now; 1.2 取当前年 int 年currentTime.Year; 1.3 取当前月 int 月currentTime.Month;1.4 取当前日 int 日currentTime.Day; 1.5 取当前时 int 时cu…
阅读更多...
红黑树相关的信息

红黑树相关的信息

转载&#xff1a;https://www.cnblogs.com/wuchanming/p/4444961.html 红黑树相关的知识点&#xff0c;提高自己和面试应该用的到 1.stl中的set底层用的什么数据结构&#xff1f; 2.红黑树的数据结构怎么定义的&#xff1f; 3.红黑树有哪些性质&#xff1f; 4.红黑树的…
阅读更多...
spring restTemplate使用方法

spring restTemplate使用方法

https://github.com/lenve/SimpleSpringCloud/tree/master/RestTemplate在Spring Cloud中服务的发现与消费一文中&#xff0c;当我们从服务消费端去调用服务提供者的服务的时候&#xff0c;使用了一个很好用的对象&#xff0c;叫做RestTemplate&#xff0c;当时我们只使用了Res…
阅读更多...
最新文章

Copyright @ 2022~2023