AJAX实例之股票实时信息显示（ajax实时显示数据）

25-03-10 13

对于想了解AJAX实例之股票实时信息显示的读者，本文将提供新的信息，我们将详细介绍ajax实时显示数据，并且为您提供关于AJAXasp.net分页Ajax实时验证用户名/邮箱等是否已经存在的代码打包、

对于想了解AJAX实例之股票实时信息显示的读者，本文将提供新的信息，我们将详细介绍ajax实时显示数据，并且为您提供关于AJAX asp.net分页 Ajax实时验证用户名/邮箱等是否已经存在的代码打包、AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）、Ajax学习（二）—— 一个简单的Ajax实例、ajax实例之用户名即时验证的有价值信息。

本文目录一览：

AJAX实例之股票实时信息显示（ajax实时显示数据）
AJAX asp.net分页 Ajax实时验证用户名/邮箱等是否已经存在的代码打包
AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）
Ajax学习（二）—— 一个简单的Ajax实例
ajax实例之用户名即时验证

AJAX实例之股票实时信息显示（ajax实时显示数据）

实例内容

实例的具体内容是：服务端每隔指定时间产生股价，并计算涨幅，然后以json数据格式发送给客户端页面；客户端页面每隔指定时间重新获取服务端数据，解析json数据格式，并显示涨停。

实例来源于王兴魁Ajax教学视频，视频中用的是NetBeans环境Java语言编写的，使用NetBeans按教程编写不是很难，所以想着用VS2010环境C#编写，代码如下。

实例代码

Stocks.cs

Stock.cs，股票类代码：

/// <summary>
///股票信息类
/// </summary>
public class Stock
{
	public Stock(string id,string name,double yesterday)
	{
        this.sid = id;
        this.name = name;
        this.yesterday = yesterday;
        this.today = -1;
        this.highest = yesterday;
        this.current = yesterday;
        this.lowest = yesterday;
	}
    //股票ID
    private string sid;
    //股票名
    private string name;
    //昨日股价
    private double yesterday;
    //今日股价 
    private double today;
    //最高
    private double highest;
    //最低
    private double lowest;
    //当前股价
    private double current;
    //浮动
    private string range;
    /// <summary>
    /// 获取当前股价
    /// </summary>
    /// <returns></returns>
    public double GetCurrent()
    {
        return current; 
    }
    /// <summary>
    /// 获取昨日股价
    /// </summary>
    /// <returns></returns>
    public double GetYesterday()
    {
        return yesterday;
    }
    /// <summary>
    /// 获取今日股价
    /// </summary>
    /// <returns></returns>
    public double GetToday()
    {
        return today;
    }
    /// <summary>
    /// 获取最高股价
    /// </summary>
    /// <returns></returns>
    public double GetHighest()
    {
        return highest;
    }
    /// <summary>
    /// 获取最低股价
    /// </summary>
    /// <returns></returns>
    public double GetLowest()
    {
        return lowest;
    }
    /// <summary>
    /// 获取浮动值
    /// </summary>
    /// <returns></returns>
    public string GetRange()
    {
        return range;
    }
    public void SetRange(string range)
    {
        this.range = range;
    }
    /// <summary>
    /// 设置当前股票价格
    /// </summary>
    /// <param name="current">当前股指</param>
    public void SetCurrent(double current)
    {
        //计算涨幅
        double range = (current - this.yesterday ) / this.yesterday ;
        //如果涨幅超过10%
        if (range > 0.1)
        {
            current = Math.Round(1.1 * this.yesterday * 100) / 100.0;
        }
        //如果跌幅超过10%
        if (range < -0.1)
        {
            current = Math.Round(0.9 * this.yesterday * 100) / 100.0;
        }
        this.current = current;
        //尚未开盘时，利用第一次的current设置开盘股价
        if (this.today == -1)
        {
            this.today = current;
        }
        //根据涨跌形势设置今日股价
        if (this.current > this.highest)
        {
            this.highest = this.current;
        }
        else if (this.current < this.lowest)
        {
            this.lowest = this.current;
        }
        //
        this.range = range.ToString("p");
    }
}

xmlhttp.js

xmlhttp.js，自定义的MyXMLHttpRequest"类"，主要负责和服务端的交互：

// 使用封装方法的人只关心http的请求方法，URL地址，数据，成功和失败的回调方法
// 类的构造方法，主要职责是新建XMLHttpRequest对象
var MyXMLHttpRequest = function(){
    var xmlhttprequest;
    if(window.XMLHttpRequest){
        xmlhttprequest = new XMLHttpRequest();
        if(xmlhttprequest.overridemineType){
            xmlhttprequest.overridemineType("text/xml");
        }
    }else if (window.ActiveXObject) {
        var activeName = ["XSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (i = 0; i < activeName.length; i++) {
            try {
                xmlhttprequest = new ActiveXObject(activeName[i]);
                break;
            } catch (e) { 
                
            }
        }
    }
    if (xmlhttprequest == undefined || xmlhttprequest == null) {
        alert("xmlhttprequest对象创建失败！");
    }else{
        this.xmlhttp = xmlhttprequest;
    }
}
// 用户发送请求的方法
MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
    if (this.xmlhttp != undefined || this.xmlhttp != null) {
        method = method.toupperCase();
        if (method != "GET" && method != "POST") {
            alert("HTTP请求方法必须是GET或POST");
            return ;
        }
        if (url == undefined || url == null) {
            alert("http请求地址必须设置");
            return;
        }
    
        var tempxmlhttp = this.xmlhttp;
        tempxmlhttp.onreadystatechange = function(){
            if (tempxmlhttp.readyState == 4) {
                if (tempxmlhttp.status == 200) {
                    var responseText = tempxmlhttp.responseText;
                    var responseXML = tempxmlhttp.responseXML;
                    if (callback == undefined || callback == null) {
                        alert("没有设置处理数据正确返回的方法");
                        alert("返回的数据：" + responseText);
                    }
                    else{
                        callback(responseText,responseXML);
                    }
                }else {
                    if (failback == undefined || failback == null) {
                        alert("没有设置处理数据返回失败的处理方法");
                        alert("Http响应码信息：" + tempxmlhttp.status + "，响应码文本信息：" + tempxmlhttp.statusText)
                        return ;
                    }else{
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);
                    }
                }
            }
        }
        // 解决缓存的转换
        if (url.indexOf("?") >= 0) {
            url = url + "&t=" + (new Date()).valueOf();
        }else{
            url = url + "?t=" + (new Date()).valueOf();
        }
        // 解决跨域问题
        if (url.indexOf("http://") >= 0) {
            url.replace("?","&");
            url = url + "Proxy?url=";
        }
        this.xmlhttp.open(method,true);
    
        // 如果是POST方式，需要设置请求头
        if (method == "POST") {
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest对象创建失败，无法发送数据.");
    }
}
MyXMLHttpRequest.prototype.abort = function(){
    this.xmlhttp.abort();
}

Handler.aspx

一般处理文件Handler.ashx，用于处理客户端的请求：

<%@ WebHandler Language="C#"%>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
//StringBuilder所在命名空间
using System.Text;

public class Handler : IHttpHandler {
    //定义股票字典
    private Dictionary<string,Stock> stock;
    private System.Timers.Timer timer;
    /// <summary>
    /// 响应客户端请求
    /// </summary>
    /// <param name="context">请求信息</param>
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/html;charset=UTF-8";
        //Response.ContentType = "text/html;charset=UTF-8";
        ////初始化数据
        Init();
        //转换为json字符串
        Thread.Sleep(200);
        StringBuilder builder = new StringBuilder();
        builder.Append("({");
        //stockid数组
        string[] StockId = new string[stock.Count];
        //获取股票ID
        for (int i = 0; i < stock.Count; i++)
        {
            StockId[i] = stock.ElementAt(i).Key.ToString();
        }
        //根据股票ID 得到股票，拼接字符串
        for (int i = 0; i < stock.Count; i++)
        {
            string sid = StockId[i];
            Stock tempStock = stock[sid];
            builder.Append(sid).Append(":{yes:").Append(tempStock.GetYesterday()).Append(",tod:").Append(tempStock.GetToday()).Append(",high:").Append(tempStock.GetHighest()).Append(",low:").Append(tempStock.GetLowest()).Append(",cur:").Append(tempStock.GetCurrent()).Append(",ran:'").Append(tempStock.GetRange()).Append("'}");
            //每个项后面再添加“,”
            if (i < stock.Count)
            {
                builder.Append(",");
            }

        }
        //尾部添加}）
        builder.Append("})");
        //回复响应
         context.Response.Write(builder);
    }
    
    /// <summary>
    /// 初始化配置数据
    /// </summary>
    private void Init()
    {
        //新建四支股票
        Stock szzs = new Stock("300001","上证指数",300);
        Stock pfyh = new Stock("600000","浦发银行",25);
        Stock gsyh = new Stock("601398","工商银行",6.5);
        Stock zgsy = new Stock("601857","中国石油",19.1);
        //设定股票字典
        stock = new Dictionary<string,Stock>();
        //添加股票
        stock.Add("300001",szzs);
        stock.Add("600000",pfyh);
        stock.Add("601398",gsyh);
        stock.Add("601857",zgsy);
        //设置计时器参数，不要太大
        timer = new System.Timers.Timer(50);
        timer.Enabled = true;
        //执行计时器函数theout
       Random rdm = new Random();
        //每次只去一个，防止循环执行获取随机数
       double mdr = rdm.NextDouble();
        //timer的振荡事件，采用匿名函数方式执行
        timer.Elapsed += delegate(object source,System.Timers.ElapsedEventArgs e)
        {
            //股票变动范围
            //上涨浮动
            double sz = mdr * 30;
            double pf = mdr * 0.5;
            double gs = mdr * 0.1;
            double zg = mdr * 0.3;
            //下跌浮动
            if (mdr > 0.5)
            {
                sz = 0 - sz;
            }
            if (mdr > 0.5)
            {
                pf = 0 - pf;
            }
            if (mdr > 0.5)
            {
                gs = 0 - gs;
            }
            if (mdr > 0.5)
            {
                zg = 0 - zg;
            }
            //当前股票价格
            szzs.SetCurrent(Math.Round((szzs.GetCurrent() + sz) * 100) / 100.0);
            pfyh.SetCurrent(Math.Round((pfyh.GetCurrent() + pf) * 100) / 100.0);
            gsyh.SetCurrent(Math.Round((gsyh.GetCurrent() + gs) * 100) / 100.0);
            zgsy.SetCurrent(Math.Round((zgsy.GetCurrent() + zg) * 100) / 100.0);
        };
       
    }
    /// <summary>
    /// 实现接口自带的函数
    /// </summary>
    public bool IsReusable {
        get {
            return false;
        }
    }

}

refresh.html

refresh.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>
    <title></title>
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        #tooltip{
            display:none;
            position:absolute;
            border:1px solid black;
            background-color: white;
            z-index: 99;
            width:135px;
        }
    </style>
    <script src="Scripts/xmlhttp.js" type="text/javascript"></script>
    <script type="text/javascript"> 
            var xmlhttp;
            var stocks;
            var yesNode;
            var todNode;
            var highNode;
            var lowNode;
            var curNode;
            var ranNode;
            var tooltipNode;
            var tooltipSid;
            //获取tooltip下所有节点并交互
            function show() {
                // 获取tooltip相关的各个节点
                yesNode = document.getElementById('yes');
                todNode = document.getElementById('tod');
                highNode = document.getElementById('high');
                lowNode = document.getElementById('low');
                curNode = document.getElementById('cur');
                ranNode = document.getElementById('ran');
                tooltipNode = document.getElementById('tooltip');
                // 与服务端进行交互，获取到股票的最新消息
                getStock();
                // 以后每隔两秒再和服务端交互一次
                setInterval(getStock,5000);
            }

            // 与服务端进行交互，获取到股票的最新消息
            function getStock() {
                // 假如xmlhttp存在，则将上一次交互终止掉（防止两个交互返回的数据相互覆盖）
                if (xmlhttp) {
                    xmlhttp.abort();
                }
                // 利用XMLHttpRequest对象和服务器进行交互
                xmlhttp = new MyXMLHttpRequest();
                xmlhttp.send('GET','Handler.ashx','',failback);
            }
            function callback(responseText,responseXML) {
                try {
                    // 将服务端返回的JSON数据转换成js中的对象
                    stocks = eval(responseText);
                    // 更新ToolTip内容
                    updatetoolTip();
                    // 遍历所有的股票
                    for (var sid in stocks) {
                        var spanNode = document.getElementById(sid);
                        // 获取某一只股票的昨天收盘价和当前价
                        var stock = stocks[sid];
                        var cur = stock.cur;
                        var yes = stock.yes;
                        // 将当前价设置到span的节点里面
                        spanNode.innerHTML = cur;
                        // 根据当前价格设置span中的文本是红色还是绿色
                        if (cur >= yes) {
                            spanNode.style.color = 'red';
                        } else {
                            spanNode.style.color = 'green';
                        }
                    }
                } catch (exception) {
                    alert('解析服务器数据失败，错误内容为：' + exception.toString());
                }
            }
            function failback(status,statusText) {
                alert('回调函数失败：'+ statusText);
            }
            // 显示弹出框方法
            function showToolTip(aNode,event) {
                // 得到对应的股票代码
                tooltipSid = aNode.parentNode.getElementsByTagName('span')[0].id;
                // 更新ToolTip内容
                updatetoolTip();
                var myevent = window.event || event;
                var mouseX = myevent.clientX;
                var mouseY = myevent.clientY;
                tooltipNode.style.left = mouseX + 5 + 'px';
                tooltipNode.style.top = mouseY + 5 + 'px';
                tooltipNode.style.display = 'block';
            }
             隐藏弹出框方法
            function clearToolTip() {
                tooltipNode.style.display = 'none';
                tooltipSid = undefined;
            }
            // 更新tooltip中的内容
            function updatetoolTip() {
                if (tooltipSid) 
                {
                    // 当前股票的具体信息对象
                    var stock = stocks[tooltipSid];
                    // 设置昨收
                    var yes = stock.yes;
                    yesNode.innerHTML = yes;
                    // 设置今开
                    var tod = stock.tod;
                    todNode.innerHTML = tod;
                    if (tod >= yes) {
                        todNode.style.color = 'red';
                    } else {
                        todNode.style.color = 'green';
                    }
                    // 设置最高
                    var high = stock.high;
                    highNode.innerHTML = high;
                    // 设置最低
                    var low = stock.low;
                    lowNode.innerHTML = low;
                    if (low >= yes) {
                        todNode.style.color = 'red';
                    } else {
                        todNode.style.color = 'green';
                    }
                    // 设置当前价格和涨幅
                    var cur = stock.cur;
                    curNode.innerHTML = cur;
                    var ran = stock.ran;
                    ranNode.innerHTML = ran;
                    if (cur >= yes) {
                        curNode.style.color = 'red';
                        ranNode.style.color = 'red';
                    } 
                    else 
                    {
                        curNode.style.color = 'green';
                        ranNode.style.color = 'green';
                    }
                }
            }
    </script>
</head>
<body onload="show()">
<!--每支股票各占一个div-->
    <div>
    <a href="#" onmouSEOver="showToolTip(this,event)" onmouSEOut="clearToolTip()" >上证指数:</a> 
    <span id="300001"></span>
 </div>
    <div>
    <a href="#" onmouSEOver="showToolTip(this,event)" onmouSEOut="clearToolTip()" >浦发银行:</a>
    <span id="600000"></span>
</div>
    <div>
    <a href="#" onmouSEOver="showToolTip(this,event)" onmouSEOut="clearToolTip()" >工商银行:</a>
    <span id="601398"></span>
</div>
    <div>
    <a href="#" onmouSEOver="showToolTip(this,event)" onmouSEOut="clearToolTip()" >中国石油:</a>
    <span id="601857"></span>
</div>
    <!--tooltip框-->
    <div id="tooltip">
        <div>昨收：<span id="yes"></span></div>
        <div>今开：<span id="tod"></span></div>
        <div>最高：<span id="high"></span></div>
        <div>最低：<span id="low"></span></div>
        <div>当前：<span id="cur"></span></div>
        <div>涨幅：<span id="ran"></span></div>
    </div>
</body>
</html>

运行结果

下载及预告

因为是从NetBeans环境下的Java语言转换为VS2010下的C#语言，中间碰到不少问题，这些问题会在下篇博客介绍，另附本实例的代码下载地址：http://download.csdn.net/detail/lidaasky/4927691。

AJAX asp.net分页 Ajax实时验证用户名/邮箱等是否已经存在的代码打包

AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）

很多时候，我们在网上注册个人信息，在提交完页面后，总得等待页面刷新来告诉我们注册是否成功，遇到网络差的时候，如果注册了一大串的东西，在经过漫长的等待页面刷新后，得到的确是“您的用户名已被使用”或XXXXXXX不合法，我想大家的心情一定特别不爽，今天就介绍个AJAX实现页面不刷新注册＋实时检测用户信息的简单注册程序，希望对大家有所帮助。好的，先看注册界面代码：

· 用户名称:	> *	4-16个字符，英文小写、汉字、数字、最好不要全部是数字。
· 用户密码:	> *	密码字母有大小写之分。6-16位（包括6、16），限用英文、数字。
· 重复密码：	> *	请再次输入登录密码。

如图：

红色部分就是一会要调用的js函数了，当我们选定一个文本框后就会开始调用，现在我们看上面那个页面包含的ajaxreg.js文件的代码，里面就是包含了ajax框架和一些判断函数。
var http_request=false;
  function send_request(url){//初始化，指定处理函数，发送请求的函数
http_request=false;
      //开始初始化XMLHttpRequest对象
      if(window.XMLHttpRequest){//Mozilla浏览器
      http_request=new XMLHttpRequest();
      if(http_request.overrideMimeType){//设置MIME类别
         http_request.overrideMimeType("text/xml");
      }
      }
      else if(window.ActiveXObject){//IE浏览器
      try{
      http_request=new ActiveXObject("Msxml2.XMLHttp");
      }catch(e){
      try{
      http_request=new ActiveXobject("Microsoft.XMLHttp");
      }catch(e){}
      }
}
      if(!http_request){//异常，创建对象实例失败
      window.alert("创建XMLHttp对象失败！");
      return false;
      }
      http_request.>       //确定发送请求方式，URL，及是否同步执行下段代码
http_request.open("GET",url,true);
      http_request.send(null);
  }
  //处理返回信息的函数
  function processrequest(){
if(http_request.readyState==4){//判断对象状态
   if(http_request.status==200){//信息已成功返回，开始处理信息
      document.getElementById(reobj).innerHTML=http_request.responseText;
      }
      else{//页面不正常
      alert("您所请求的页面不正常！");
      }
}
  }
  function usercheck(obj){
var f=document.reg;
var username=f.username.value;
if(username==""){
document.getElementById(obj).innerHTML=" 用户名不能为空！";
      f.username.focus();
      return false;
}
else{
document.getElementById(obj).innerHTML="正在读取数据...";
send_request(''checkuserreg.php?username=''+username);
reobj=obj;
}
  }
  function pwdcheck(obj){
var f=document.reg;
      var pwd=f.userpwd.value;
      if(pwd==""){
      document.getElementById(obj).innerHTML=" 用户密码不能为空！";
      f.userpwd.focus();
      return false;
      }
      else if(f.userpwd.value.length       document.getElementById(obj).innerHTML=" 密码长度不能小于6位！";
      f.userpwd.focus();
      return false;
      }
      else{
      document.getElementById(obj).innerHTML=" 密码符合要求！";
      }
  }
  function pwdrecheck(obj){
var f=document.reg;
      var repwd=f.reuserpwd.value;
      if (repwd==""){
      document.getElementById(obj).innerHTML=" 请再输入一次密码！";
      f.reuserpwd.focus();
      return false;
      }
      else if(f.userpwd.value!=f.reuserpwd.value){
      document.getElementById(obj).innerHTML=" 两次输入的密码不一致！";
      f.reuserpwd.focus();
      return false;
      }
      else{
      document.getElementById(obj).innerHTML=" 密码输入正确！";
      }
  }
不难看出，数据是通过异步传输到checkuserreg.php接着回送回信息显示出来来达到实时检测用户名的目的，至于密码，只作了长度的实时判断，有兴趣的朋友可以扩充功能。来看下checkuserreg.php到底都做了什么：
  header(''Content-Type:text/html;charset=GB2312'');//避免输出乱码
  include(''inc/config.inc.php'');//包含数据库基本配置信息
  include(''inc/dbclass.php'');//包含数据库操作类
  $username=trim($_GET[''username'']);//获取注册名
  //-----------------------------------------------------------------------------------
  $db=new db;//从数据库操作类生成实例
  $db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
  $db->createcon();//调用创建连接函数
  //-----------------------------------------------------------------------------------
  $querysql="select username from cr_userinfo where username=''$username''";//查询会员名
  $result=$db->query($querysql);
  $rows=$db->loop_query($result);
  //若会员名已注册
  //-----------------------------------------------------------------------------------
  if($rows){
      echo" 此会员名已被注册，请更换会员名！";
  }
  //会员名未注册则显示
  //-----------------------------------------------------------------------------------
  else{
      echo" 此会员名可以注册！";
  }
  if($action==reg){
  $addsql="insert into cr_userinfo
      values(0,''$username'',''$userpwd'',''$time'',50,1,''$userquestion'',''$useranswer'')";
  $db->query($addsql);
  echo" AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）

AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）

恭喜您，注册成功！请点击这里登陆！";
  }
  $db->close();//关闭数据库连接
?>
注释写的还算详细，大家应该都能看懂，再看信息合法后我们提交注册信息实现无刷新注册的PHP代码,senduserinfo.php：
  header(''Content-Type:text/html;charset=GB2312'');//避免输出乱码
  include(''inc/config.inc.php'');//包含数据库基本配置信息
  include(''inc/dbclass.php'');//包含数据库操作类
  $username=trim($_GET[''username'']);//获取注册名
  $userpwd=md5(trim($_GET[''userpwd'']));//获取注册密码
  $time=date("Y-m-d");
  //-----------------------------------------------------------------------------------
  $db=new db;//从数据库操作类生成实例
  $db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
  $db->createcon();//调用创建连接函数
  //-----------------------------------------------------------------------------------
  //开始插入数据
  //-----------------------------------------------------------------------------------
  $addsql="insert into cr_userinfo values(0,''$username'',''$userpwd'',''$time'',50,1,''$userquestion'',''$useranswer'')";
  $db->query($addsql);
  echo" AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）

恭喜您，注册成功！请点击这里登录！";
$db->close();//关闭数据库连接
?>
OK！！大功告成，来看看效果图：
1.
PHP＋AJAX实现无刷新注册（带用户名实时检测）

怎么样？还不错吧，贴了这么多累死了，希望大家喜欢～～～～

以上就介绍了AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测），包括了AJAX asp.net分页方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

Ajax学习（二）—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。

1.实例功能：

当用户输入用户名，文本框失去焦点后，通过异步调用来判断该用户名是否已经存在。若存在，则在上图中红框处显示提示。当用户名可用时，提交按钮变为可用状态。

2.设计Html页面：

<spanhttps://www.jb51.cc/tag/ims/" target="_blank">imsun;font-size:18px;"><strong><spanhttps://www.jb51.cc/tag/ims/" target="_blank">imsun;font-size:18px;"><strong><body>
    <form name="myForm">
        用户名：<input type="text" name=" myName" onblur="checkName()" />
        <span id="myDiv"></span><br />
        密　码：<input type="text" name="myPwd"/><br />
        <input type="button" value=" 提交" name="submitButton" disabled />
    </form>
</body></strong></span></strong></span>

在“用户名”文本框后添加了一个span标签，该标签划分一个区域，用于显示用户名的验证信息。还要添加一个事件，当失去焦点时触发“checkName（）”。

3.javascript代码部分：

//定义用户存储XMLHttpRequest对象的变量
        var xmlHttp = null;
        //创建XMLHttpRequest对象
        function creatXMLHTTP()
        {
            //判断浏览器是否支持ActiveX控件，针对IE6及之前版本
            if (window.ActiveXObject)
            {
                //将所有可能出现的ActiveXObject版本都放在一个数组中
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
                //通过循环创建XMLHttpRequest对象
                for (var i=0;i<arrXmlHttpTypes.length;i++)
                {
                    try
                    {
                        //创建XMLHttpRequest对象
                        xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
                        //如果创建XMLHttpRequest对象成功，则跳出循环
                        break;
                    }
                    catch(ex)
                    {
                    }
                }
            }
            //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        //响应XMLHttpRequest对象状态变化的函数
        function httpStateChange()
        {
            if (xmlHttp.readyState==4)//异步调用完毕
            {
                if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功，在本机上调试
                {
                    //获得服务器返回的数据
                    var userNames = xmlHttp.responseText;
                    var arrUserName = userNames.split(";");//把获取到的一个字符串分割成字符串数组。

                    //定义一个变量，用于判断用户名是否已经存在
                    var bFlag = false;

                    for(i=0;i<arrUserName.length;i++)
                    {
                        if (arrUserName[i]==myForm.myName.value)
                        {
                            bFlag = true;//用户名存在
                            break;
                        }
                    }

                    //查找用于显示提示信息的节点
                    var node = document.getElementById("myDiv");
                    //更新数据
                    if (bFlag)
                    {
                        node.firstChild.nodeValue = "用户名已存在";
                        myForm.submitButton.disabled = true;//提交按钮不可用
                    }
                    else 
                    {
                        node.firstChild.nodeValue = "用户名不存在，可以使用";
                        myForm.submitButton.disabled = false;//提交按钮可用
                    }
                }
            }
        }
        //校验用户名是否有效
        function checkName()
        {
            //创建XMLHttpRequest对象，调用前面定义好的函数
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //创建响应XMLHttpRequest对象状态变化的函数
                xmlHttp.onreadystatechange = httpStateChange;
                //创建http请求
                xmlHttp.open("get","userName.txt",true);
                //发送http请求
                xmlHttp.send(null);
            }
            else
            {
                alert("您的浏览器不支持XMLHTTP");
            }
        }

注意：需要建一个userName.txt存储已存在的用户名，各个用户名之间用分号隔开。

通过这个小例子，我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他三大浏览器（Firefox，Opera，netscape）将其实现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同，但XMLHttpRequest对象拥有的方法和属性大致相同。下篇博客我们来一起揭开XMLHttpRequest对象的神秘面纱，深入解读上面的代码，敬请期待！

ajax实例之用户名即时验证

这个实例功能虽然不复杂，但是是一个综合型的实例，用到的很多方面的知识(html,css,js,ajax,PHP,MysqL,json)，很值得初学者实践一下。

先上几张效果图：

图一

图二

图三

图四

下面是代码，所有代码都在同一个文件中，注释没怎么写了。

<?PHP
	if(isset($_GET['id'])){//当有用户名提交时
		$username=trim($_GET['id']);
		$result=array();
		if(!preg_match('/^[a-z][a-z0-9]{3,19}$/i',$username)){
			$result['status']=0;
			$result['text']='用户名 '.$username.' 格式不正确';
			die(json_encode($result));
		}
		//连接数据库
		MysqL_connect("localhost",'root','8888'); 
		MysqL_select_db('test'); 
		$sql="select username from users where username='$username'"; 
		$query=MysqL_query($sql); 
		if(MysqL_num_rows($query)>0){ 
		 	$result['status']=0;
			$result['text']='用户名 '.$username.' 已存在';
		}else{ 
			$result['status']=1;
			$result['text']='用户名 '.$username.' 可用';
		} 
		
		echo json_encode($result);
		die();
	}
?>


<!DOCTYPE html> 
<head> 
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax实例之用户名即时检测</title> 
<style type="text/css">
body{background-color:#fff;}
p{font-size:20px;font-family:微软雅黑;}
form{font-size:14px;}
input{padding:4px;border:1px solid #dfdfdf;outline:none;border-radius:5px;}
span.info{font-size:12px;color:gray;}
span.ok{font-size:12px;color:green;}
span.bad{font-size:12px;color:red;}
</style>
<script type="text/javascript">

var ajax=null;  

function createajax(){ //创建ajax对象
	if(window.ActiveXObject){ 
		ajax=new ActiveXObject('Microsoft.XMLHTTP');
	}else if(window.XMLHttpRequest){
		ajax=new XMLHttpRequest(); 
	} 
} 

function checkname(){ //失去焦点时调用，检测用户名是否存在
	var username=document.myform.username.value;
	var tip=document.getElementById('tip');
	if(username==""){
		tip.className='bad';
		tip.innerHTML='用户名不能为空';
		return;
	}
	if(null==ajax) 
		createajax(); 
	ajax.open("GET","?id="+username,true);
	ajax.onreadystatechange=change_tip;
	ajax.send(null); 
} 

function change_tip(){ //状态改变时调用
	if(ajax.readyState == 4){
		if(ajax.status == 200){ 
			eval("var obj="+ajax.responseText);
			if(obj.status===1){
				tip.className='ok';
				tip.innerHTML=obj.text;
			}else{
				tip.className='bad';
				tip.innerHTML=obj.text;
			}
		} 
	} 
} 

function show_tip(){//获得焦点时调用，提示用户输入规则
	var tip=document.getElementById('tip');
	tip.className='info';
	tip.innerHTML="用户名,4-20位字母或数字,非数字开头";
}
</script> 
</head> 
<body> 
<p>ajax用户名检测<p><hr>
<form name="myform"> 
用户名 <input type="text" name="username" onblur="checkname();" onfocus="show_tip()"> 
<span id="tip">用户名,非数字开头</span> 
</form> 
</body> 
</html>

关于AJAX实例之股票实时信息显示和ajax实时显示数据的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于AJAX asp.net分页 Ajax实时验证用户名/邮箱等是否已经存在的代码打包、AJAX asp.net分页 PHP＋AJAX实现无刷新注册（带用户名实时检测）、Ajax学习（二）—— 一个简单的Ajax实例、ajax实例之用户名即时验证的相关信息，请在本站寻找。

本文标签：