今天，我想分享一个“使用Ajax技术检测用户名是否存在”的例子。利用Ajax技术检测用户名存在的原理流程图：。

最终结果截图：

复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8'/titleAjax检测用户名/title脚本类型=' text/JAVAScript ' src=' http : AJax . js '/脚本/headbody表单名称=' myform '用户名：输入类型=' text '名称=' user ' on bull=' check name()；'span id=' checkbox '/span/form/body/html代码说明：实现这个功能的核心代码是ajax.js，所以需要引入来命名表单，因为后面我们需要用js来获取输入框中的值来给输入框添加一个“onblur”事件。即当“焦点”丢失时，事件被触发(即流程图的“触发控制”)。span id='checkbox'/span用于放服务器发回的数据(即“用户名已经存在”等)。).复制的代码如下：php mysql_connect('localhost '，' root '，' ')；MySQL _ select _ db(' test ')；$sql='从ajax中选择* '，其中name=' $ _ GET[id]'；$ query=MySQL _ query($ SQL)；if(is _ array(MySQL _ fetch _ array($ query)){ echo ' font color=red用户名已经存在/font '；} else { echo ' font color=绿色用户名可以使用/font '；} ?代码：通过ajax的open方法，将用户输入的“用户名”通过id(即$_GET[id])传入，然后查询指定的数据库表，检查“用户名”是否存在。ajax.js复制代码的代码如下：//JavaScript文档var xhr//定义一个全局对象函数createXHR(){ //首先，我们要创建一个XMLHttpRequest对象if(window。ActiveXObject){//IE的低版本类xhr=new ActiveX object(' Microsoft . xmlhttp ')；//之前IE垄断了整个浏览器市场，没有遵循W3C标准，所以这个代码就产生了。但是在IE6 } Elseif(window . XMLHttpRequest){//不是IE系列的浏览器，但是包含IE7 IE8 XHR=new XMLHttpRequest()；} } function check name(){ var username=document . my form . user . value；createXHR()；XHR.open('GET '，' checkname.php？id=' username，true)；//true:表示不等待send()方法返回结果的异步传输，这是Ajax xhr . onreadystatechange=by honor ei的核心思想；//当状态改变时，调用byhongfei，我们为方法的内容定义XHR.send(null)。}函数by honorei () {if (xhr。readystate==4){//关于Ajax引擎对象中的方法和属性，请参考我的另一篇博文：http://www.cnblogs.com/honorei/archive/2011/11/29/2265377.htmlif(xhr。document.getElementById(“复选框”)。innerHTML=textHTML}}}代码说明：首先我们需要声明一个ajax引擎对象：XHR(随便说出一个名字)；由于微软较低版本的IE和其他浏览器创建ajax对象的方式不同，现在IE和其他浏览器几乎占据了一半的市场份额，所以这两个方面我们都要考虑，IE-ActiveX object；Other - XMLHttpRequest。我将她封装在一个函数中：createXHR 我们在index.html中指定了当“焦点”丢失时将触发checkname()函数。那么我们如何捕捉用户输入的“用户名”呢？这里，document.myform.user.value可以通过使用js很容易地捕捉到(现在你知道表单和输入为什么命名了，这一步对应于流程图中的“获取要填写的内容”)。感兴趣的博主可以尝试在createXHR()的第一行输入代码(alert(username))并弹出捕获的用户名。ajax引擎有几种方法和属性(请参考我的另一篇博文：看图理解：普通交互模式和ajax交互模式的区别)。在使用它之前，我们必须调用函数craateXHR来创建一个Ajax对象。使用Ajax对象，需要三种方法：open()、onreadystatechange和send()。要将请求发送到服务器，请使用open()和send()方法。open()方法的第一个参数表示应该通过GET或POST传输。

open()方法的第二个参数指示要请求的URL地址(这里，我们请求的是一个checkname.php文件)，它可以是绝对或相对地址。open()方法的第三个参数async指示是否采用异步请求，如果采用true。这种情况下，不需要通过ajax和js等待服务器响应，而是：在等待服务器响应的同时执行其他脚本；准备就绪后处理响应。一般来说，async=false对于一些小请求是可以的，但是此时不要写onreadyStatechange函数。onreadystatechange事件：当ajax的readystate属性更改时，会触发此事件。在这种情况下，当服务器响应准备好被处理时(即readyState=4，status=200)，我们指定让服务器做什么任务。在这里，我们指定从数据库中检索的结果应该输出到id为“checkbox”的span标记中。通过checkname.php查询数据库后，我们会得到查询结果(即服务器的响应，对应流程图中的“Query Database”)，而数据还在ajax引擎中。如果我们需要从服务器获取响应，我们需要使用XMLHttpRequest对象的responText或responseXML属性。并通过DOM属性innerHTML将服务器响应的数据设置为带有id="checkbox "的span标记的值。注意：使用ajax监控邮箱是有道理的。我们还可以使用ajax实时监控用户输入的密码强度。此时，我们需要将on bulr事件更改为onfocus事件。打包下载原始cnblogs肖飞源代码/201112/马援/check name _ php.rar。