AJAX实现无刷新检测用户名功能

先来看看原理图

register.php

！DOCTYPE html html head meta charset=' utf-8 '/title Ajax无刷新检测/title style type=' text/CSS ' body { margin :0；划水：0;}.内容{ width :800 pxmargin 33600 auto } ul，Li { list-style : none；余量：0划水：0;} tr { width :200 px } TD { width :80 pxpadd :5 px 0；}td输入，textarea{border: 1px实心# 79 ABFE }/样式/头体div class='内容'脚本myXmlHttpRequest .content TYPe=(' text/XML；字符集=UTF-8 '；//创建创建交互式、快速动态网页应用的网页开发技术引擎(1号线)函数getXmlHttpObject(){ var xmlHttpRequest；//不同浏览器获取对象xmlHttpRequest方法不一样如果(窗口ActiveX对象){ xmlHttpRequest=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else { XMlhttprequest=new XMlhttprequest()；}返回xmlHttpRequest} //验证用户名是否存在var myXmlHttpRequest=//因为李俶也用到了，所以要定义为全局变量//创建方法(2号线超文本传送协议(超文本传输协议的缩写)请求)函数checkName(){ //创建对象myXmlHttpRequest=getXmlHttpObject()；//判断是否创建如果(myXmlHttpRequest){ //通过myXmlHttpRequest对象发送请求到服务器的某个页面var url=' ./RegisterPro1。PHP '；//要发送的数据定义变量数据='用户名=' $('用户名').价值；//打开请求myXmlHttpRequest.open('post '，url，true)；//真实表示使用异步机制//POST方法myxmlhttprequest。setrequestheader(' Content-Type '，' application/x-www-form-URL编码')；//指定回调函数，李俶是函数名(registerPro里的数据返回给李俶函数)myxmlhttprequest。onreadystatechange=李俶；//开始发送数据，如果是得到请求则填入空即可，如果是邮政请求则填入实际的数据myXmlHttpRequest.send(数据);} } //回调函数(4号线)函数李俶(){ //取出从registerPro.php页面返回的数据(4表示完成，200表示成功)if(myxmlhttprequest。ready state==4){ if(myxmlhttprequest。status==200){//、取出值，根据返回信息的格式定文本(html) //$("结果")。value=myxmlhttprequest。responsetext//、取出可扩展标记语言格式数据（解析) //获取信息(消息的简写)节点、这里的信息(消息的简写)返回的是节点列表（不知道有几个mes)//var mes=myxmlhttprequest。回应。getelementsbytagname(' mes ')；//取出信息(消息的简写)节点值//mes[0]-表示取出第一个信息(消息的简写)节点//mes[0].子节点[0]-表示取出信息(消息的简写)节点的第一个子节点//var mes_val=mes[0].子节点[0]。nodeValue//$("结果")。value=mes _ val//、、json格式//var mes=myxmlhttprequest。responsetext//使用评价评价函数，将信息(消息的简写)字串转为对象//var mes _ obj=eval('(' mes ')')；//$("结果")。值=obj.res//、json格式扩展var mes=myxmlhttprequest。responsetextvar mes _ obj=eval('(' mes ')')；$("结果")。值=mes_obj[0].res} } } //封装一个函数，通过编号号获取对象函数$(id){返回文档。getelementbyid(id)；}/script br/strong style=' color : red '发表留言/strong表单操作=' # '方法=' POST '名称=' frm '表格单元格填充=' 0 '单元格间距=' 0 ' tr TD留言标题：/TD TD输入类型=' text '名称=' title '自动完成=' off '/TD/tr tr TD网名：/td td输入id=' username ' on key up=' CheckNAmE()；'type=' text ' name=' username ' autocomplete=' off '/TD input id=' result ' type=' text ' style=' width :110 px；font-size : 12px边框宽度：0;'td /td /tr留言内容：/TD tdtextarea name=' content ' cols=' 26 ' row=' 5 '自动完成=' off '/onclick=' showNotice(this)'/textarea/TD/tr TD/TD tdinput class=' BTN ' type=' submit ' name=' submit ' value='提交//TD/tr/table/form/div/body/HTMlRegisterpro1。服务器端编程语言（Professional Hypertext Preprocessor的缩写）

？Php //将数据(文本格式、xml格式、json格式)返回给ajax引擎(第3行http响应)//header(' content-type : text/XML；charset=utf-8 ')；//告诉浏览器返回的标题为xml格式(' content-type : text/html；charset=utf-8 ')；//告诉浏览器返回的格式是text/JSON $ username=$ _ POST[' username ']；////if($ username==' ABC '){//echo '网名不可用'；//}else{//echo' net name可用'；//}////$ info=' '；//if ($ username==' ABC') {//$ info。=' resmes网络名称不可用/mes/RES '；//}else{//$info。='resmes可用网络名称/mes/RES '；//}//echo $ info；////$ info=' '；//if($ username=' ABC '){////这里的$info返回一个字符串//$info。='{'res': '不可用'，' id':'123 '，' age':'5'}。//}else{//$info。='{'res': '可用'，' id':'3 '，' age ' : ' 1 ' }//}//echo $ info；//$ info=' '；If($username=='abc'){ //这里的$info返回一个字符串$info。='[{'res': '不可用'，' id' :' 123 '，' age' :' 5'}，{'res' }else{ $info。='[{'res': '可用'，' id' :' 1 '，' age' :' 15'}，{'res' 3360 '可用'，' id' :' 83 '，} echo $ info？渲染：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。