一、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){

        //处理程序

    }

}
XMLHttpRequest对象的常用属性
属性　 说明
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用户名存在检测的更多相关文章

  1. 用ajax实现用户名的检测（JavaScript方法）

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. JQuery的Ajax实现注册检测用户名

    Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 实现方法一:比较原始没有封装的方法: //核对用 ...

  3. thinkphp中ajax用户名校验

    ajax实在是太神奇了,刚刚接触,不足之处,请大家指正. 采用Ajax方式进行页面无刷新提示,来检测用户名是否存在. 搭建一个thinkphp的环境,在index.html中,ajax代码如下: &l ...

  4. ajax用户名案例(重点)

      要求:失去焦点时如下效果 主页代码 <body> 用户名:<input type="text" id="a" /><div i ...

  5. updatepanel局部刷新功能，实现注册时对用户名的检测

    updatepanel的使用 通过将控件放入到updatepanel中,实现局部刷新. 前台代码:<asp:ScriptManager ID="ScriptManager1" ...

  6. ajax用户名校验demo详解

    //用户名校验的方法 //这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互 var xmlhttp; function verify(){ //1.使用dom的方式获取文本框中的 ...

  7. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  8. 2016/4/5 Ajax ①用户名 密码 登陆 注册 ② 判断用户名是否已存在 ③点击按钮出现民族选项下拉菜单 ④DBDA类 加入Ajaxquery方法 数组变字符串 字符串拆分

    ①登陆   注册    查表匹配    0405Ajax.php   ②判断用户名是否存在 <!DOCTYPE html> <html lang="en"> ...

  9. Struts2+Ajax实现检测用户名是否唯一

    搞了慢慢两天,终于弄明白了怎么在Struts2框架中使用Ajax检测用户名的存在了.虽然,比起那些大牛们来,这速度确实够慢的,不过,最终弄出来还是满满的成就感啊. 闲话休提,言归正传.直接上代码: A ...

随机推荐

  1. 二进制编译安装httpd服务

    systemctl stop httpd yum remove httpd-----------------------(在做之前 先删掉httpd) 安装编译环境 yum -y groupinsta ...

  2. LAN

    一. 局域网(LAN) 是一个覆盖地理范围相对较小的高速容错数据网络,它包括工作站.个人计算机.打印机和其它设备.LAN 为计算机用户提供了资源共享的设备访问,如打印.文件交换.电子邮件交换等等. 局 ...

  3. Jmeter（三）Test-Plan、Thread-Group

    思量再三,还是再记一会,看到技术群里边的讨论,真的是压力山大,学习一刻也不能耽搁.继续来回顾Jmeter的知识吧. Test-Plan,是所有Jmeter脚本的根节点,Test-Plan中包含名称.注 ...

  4. 0000 - Spring Cloud 概述

    1.概述 Spring Cloud是一系列框架的有序集合,它利用Spring Boot的开发便利性简化了分布式系统的开发,比如服务发现.服务网关.服务路由.链路追踪等.Spring Cloud并不重复 ...

  5. 2018-7-23到quectel报道

    以后和quectel产品相关的技术都会用这个blog来记录

  6. solr 请求参数过长报错，Solr配置maxBooleanClauses属性不生效原因分析

    博客分类:   上次已经写过一篇关于solr中,查询条件过多的异常的文章,这次在总结扩展一下: 有时候我们的查询条件会非常多,由于solr的booleanquery默认设置的条件数为1024,所以超过 ...

  7. CSS浏览器兼容性与解决

    一.超链接访问后hover样式不出现 1.现象描述: 同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了. 2.解决方法: 调整样式顺序为先a:vis ...

  8. jieba gensim 用法

    简单的问答已经实现了,那么问题也跟着出现了,我不能确定问题一定是"你叫什么名字",也有可能是"你是谁","你叫啥"之类的,这就引出了人工智能 ...

  9. ES6入门箭头函数

    箭头函数: 箭头函数可以与变量结构相结合(箭头函数返回对象的时候必须要在对象外边加()) 注意: 1️⃣函数体内的this是定义时所在的对象,而不是使用时的对象 2️⃣不可以当成构造函数,不可用new ...

  10. android_自定义布局例子

    为什么要写自定义布局: 1.在实现大量重复的子按键或者子布局时,如果一个一个去复写工作量庞大,就需要创建自定义布局直接导入布局里,可以节省大量的时间 创建自定义布局的步骤: 1.编写一个自定义xml布 ...