一、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. 0000 - Spring Cloud 概述

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

  2. github----awesome-typescript-projects

    https://github.com/brookshi/awesome-typescript-projects

  3. Centos 7: 改变docker的image存放目录

    1.创建新的数据目录 mkdir /data/docker 2.关闭docker进程 systemctl stop docker 3.修改配置文件/usr/lib/systemd/system/doc ...

  4. 使用CacheCloud管理Redis实例

    转载来源:http://www.ywnds.com/?p=10610 一.CacheCloud是什么? 最近在使用CacheCloud管理Redis,所以简单说一下,这里主要说一下我碰到的问题.Cac ...

  5. 逻辑运算符&逻辑短路

    (1)and 逻辑与 全真则真,一假则假 print(True and True) #True print(False and True) #False print(False and False) ...

  6. POJ3635 Full Tank?

    [题解] 用dijkstra算法求最短路.同时考虑在每个节点加油(一单位)与否. [代码] #include <iostream> #include <map> #includ ...

  7. 第9课 基于范围的for循环

    1. 基于范围的for循环(range-based for) (1)语法:for(decl : coll){//statement} ①decl用于声明元素及类型,如int elem或auto ele ...

  8. CentOS 关闭图形用户界面

    1 centos 7以下版本 vim /etc/inittab :initdefault: #改为 :initdefault: 2. centos 7.x版本 rm -f /etc/systemd/s ...

  9. Hadoop2.6.5集群搭建

    一. Hadoop的分布式模型 Hadoop通常有三种运行模式:本地(独立)模式.伪分布式(Pseudo-distributed)模式和完全分布式(Fully distributed)模式.安装完成后 ...

  10. Java8 list根据对象某个属性去重

    1. 添加方法: import java.util.concurrent.ConcurrentHashMap; import java.util.function.Function; import j ...