最简单的AJAX初级教程

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

用户名:<input type="text" name="user_name">
密码:<input type="password" name="user_pass">
确认密码:<input type="password" name="user_pass1">

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

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

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 " 可以注册";
	}
};
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏developerHaoz 的安卓之旅

Android 一起来看看 HttpURLConnection 和 HttpClient 的区别

大部分需要联网的 Android 应用程序都会使用 HTTP 去发送和接收数据。Android 中包括两种方式来进行 HTTP 的请求:HttpURLConne...

873
来自专栏柠檬先生

jquery 操作ajax 相关方法

jQuery.get()   使用一个HTTP GET 请求从服务器加载数据。   jQuery.get(url [,data] [,success(dat...

31610
来自专栏java 成神之路

java.net.Socket 解析

3118
来自专栏协程

state thread协程小谈

为了打造高性能的服务器,通常思路有两种:1.多cpu利用,并发执行,如多进程和多线程 2、提高每个cpu的使用率,让每个cpu高效起来。

4681
来自专栏奔跑的蛙牛技术博客

java获取web数据和发送E-mail

java -classpath .:path/to/mail.jar path/to/message.txt 运行程序

1405
来自专栏非著名程序员

Android Volley核心源码解析

? 闲聊Volley Volley下载 Volley.jar及源码下载:http://download.csdn.net/detail/qq_172500...

2028
来自专栏菜鸟计划

跨域请求的常用方式及解释

同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与...

3639
来自专栏木宛城主

Unity应用架构设计(13)——日志组件的实施

对于应用程序而言,日志是非常重要的功能,通过日志,我们可以跟踪应用程序的数据状态,记录Crash的日志可以帮助我们分析应用程序崩溃的原因,我们甚至可以通过日志...

2065
来自专栏佳爷的后花媛

php基础(一)

static 是静态变量,在局部函数中存在且只初始化一次,使用过后再次使用会使用上次执行的结果; 作为计数,程序内部缓存,单例模式中都有用到。

2562
来自专栏前端知识分享

第113天:Ajax跨域请求解决方法

第五步:在监听函数中,判断readyState=4&&status=200表示请求成功

1631

扫码关注云+社区

领取腾讯云代金券