前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >最简单的AJAX初级教程

最简单的AJAX初级教程

作者头像
世纪访客
发布2018-08-02 15:50:12
4580
发布2018-08-02 15:50:12
举报
文章被收录于专栏:西枫里博客
...
...

    项目实现目标:验证邮箱是否已经注册 项目实现过程:用户注册页面输入完邮箱后即时提醒邮箱是否可以注册 先来看html表单代码

代码语言:javascript
复制
用户名:<input type="text" name="user_name">
密码:<input type="password" name="user_pass">
确认密码:<input type="password" name="user_pass1">

    接下来看AJAX代码,我写在了一个js文件里了

代码语言:javascript
复制
var XHR;	//定义一个全局对象
function createXHR(){  			//首先我们得创建一个XMLHttpRequest对象
	if(window.ActiveXObject){//IE的低版本系类
		XHR=new ActiveXObject('Microsoft.XMLHTTP');//之前IE垄断了整个浏览器市场,没遵循W3C标准,所以就有了这句代码。。。但IE6之后开始有所改观
	}else if(window.XMLHttpRequest){//非IE系列的浏览器,但包括IE7 IE8
		XHR=new XMLHttpRequest();
	}
}
 
function checkname(){  //这是我们html里面的自定义函数名
	var username=document.form1.user_name.value;  //获取表单值
	createXHR();	
	XHR.open("GET","chkreg.php?id="+username,true);//true:表示异步传输,AJAX就体现在这里了,是异步不是同步
	XHR.onreadystatechange=endcheck;//当状态改变时,调用endcheck这个方法
	XHR.send(null);
}
 
function endcheck(){
	if(XHR.readyState == 4){  //服务器响应已完成
		if(XHR.status == 200){	//浏览器返回200状态码表示成功
			var textHTML=XHR.responseText;			
			document.getElementById('checkbox').innerHTML=textHTML;//将服务器返回的信息写入id为checkbox的span标签
		}
	}
}

    最后看下后台处理数据的页面chkreg.php

代码语言:javascript
复制
require"conn.php";//引用你的连接文件
 
$user=$_GET['id'];//js文件中的异步传输那行中的链接,GET方式传的ID,所以这里接受传过来的ID
if(!$_POST['submit']){ //非POST过来的数据,考虑到后面要写入数据库这里简单过滤下
 
if (!preg_match("/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/", $user)){//正则表达式判断邮箱格式是否合法
      echo " 邮箱不正确";
      exit;
}else{
	$sql="select * from usercenter where user_name='$user'";
	$query=mysql_query($sql);
	if(mysql_num_rows($query)>0){//检索记录行数大于0表示有记录即已被注册,反之未注册
	   echo " 已被注册";
	}else{
	   echo " 可以注册";
	}
};
};
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档