首页 > 代码库 > 一个ajax的简单例子——用户名存在检测
一个ajax的简单例子——用户名存在检测
一、ajax请求的四个步骤:
1、创建ajax对象
var xmlhttp=new XMLHttpRequest();//IE5,IE6以外的浏览器var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
2、连接服务器
open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步(默认为异步),它是个布尔值,true 为异步,false 为同步。
xmlhttp.open(‘GET‘,url,true);
3、发送ajax请求
当请求为GET方式时,可以在不指定参数或使用null参数的情况下调用send()方法。
xmlhttp.send();
4、接收返回值
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。当请求完成加载(readyState值为4)并且响应已经成功(http状态值为200)时,就可以调用一个javascript函数来处理该响应内容。
xmlhttp.onreadystatechange=RequestCallBack;//设置回调函数function RequestCallBack(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ //处理程序 }}
属性 | 说明 |
onreadystatechange | 每次状态改变都会触发这个事件处理器,通常会调用一个javascript函数 |
readyState | 请求的状态,有以下5个取值 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了 |
responseText | 服务器的响应,表示为字符串 |
reponseXML | 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status | 返回服务器的http状态码,如: 200=>成功 202=>请求被接受,但尚未成功 400=>错误的请求 404=>文件未找到 500=>内部服务器错误 |
statusText | 返回http状态码对应的文本 |
二、异步检测用户名的例子
html请求页面test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ajax用户名存在检测</title><style>.bad{ color:red;}.good{ color:green;}</style></head><body><form> <label for="username" >用户名:</label><input type="text" onblur="checkname()" id="username"/><span id="tip">请输入用户名</span></form><script type="text/javascript">var checkname=function(){ var username=document.getElementById(‘username‘).value.trim(); var tip=document.getElementById(‘tip‘); if(username!=""){ var xmlhttp=null; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","check.php?username="+username,true); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ if(xmlhttp.responseText==1){ tip.className="good"; tip.innerHTML="用户名可用!"; } else if(xmlhttp.responseText==0){ tip.className="bad"; tip.innerHTML="用户名已被占用!"; } } } }else{ tip.className=""; tip.innerHTML="请输入用户名"; }}</script></body></html>
php检测页面check.php:
<?php$username=$_GET[‘username‘];$conn=mysql_connect(‘localhost‘,‘root‘,‘123‘) or die("连接数据库服务器失败!".mysql_error());mysql_select_db("test",$conn);$result=mysql_query("select username from tb_user where username=‘$username‘",$conn);if(mysql_num_rows($result)>0){ echo 0;}else{ echo 1;}?>
三、效果图
图一
图二
图三
一个ajax的简单例子——用户名存在检测
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。