一个网站采用Ajax技术，不仅可以提升网站的用户体验，还可以大大节省宝贵的带宽，减少服务器上的负载(不再需要与整个网页内容交互，而是在本地交互)。

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

利用Ajax技术检测用户名存在的原理流程图；

最终结果截图：

复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /titleAjax检测用户名/title脚本类型=' text/JAVAScript ' src=' http : AJax . js '/脚本/headlebody form name=' my form '用户名：input type=' text ' name=' user ' on bull=' check name()；'span id=' checkbox '/span/form/body/html code说明：

(1)实现该功能的核心代码在ajax.js中，需要单独介绍。

给表单命名，因为我们以后需要用JS来获取输入框中的值。

在输入框中添加一个“on bulr”事件，即在“焦点”丢失时触发事件(即流程图的“触发控件”)。

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])传入，然后查询指定的数据库表，检查“用户名”是否存在。

复制的代码如下：//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。ready state==4){//关于Ajax引擎对象中的方法和属性，请参考以下文章：//www . JB 51 . net/article/29012 . htm if(xhr . status==200){ var text html=xhr . RES . document . getelementbyid(' checkbox ')。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查询数据库后，我们会得到查询结果(即服务器的响应，对应流程图中的“查询数据库”)。此时，数据仍在ajax引擎中。为了从服务器获取响应，我们需要使用XMLHttpRequest对象的responText或responseXML属性，并通过DOM属性innerHTML将从服务器返回的数据设置为带有ID=“checkbox”的span标记的值。

注意：使用ajax监控邮箱是有道理的。我们还可以使用ajax实时监控用户输入的密码强度。在这种情况下，我们需要将on bulr事件更改为onfocus事件。