ajax(一) 文本格式操作 get和post 实例

最新推荐文章于 2023-01-26 03:22:53 发布

蟹道人

最新推荐文章于 2023-01-26 03:22:53 发布

阅读量673

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/csdt_csdt/article/details/18910079

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>用户注册</title>
		<meta http-equiv = "content-type" content = "text/html;charset=utf-8"/>
		<script type = "text/javascript" language = "javascript">
			//创建ajax引擎
			function getXmlHttpObject()
				{
				  var xmlHttp=null;
				  //不同的浏览器获取对象xmlhttprequest 对象方法不一样
				  try
				    {
				    // Firefox, Opera 8.0+, Safari
				    xmlHttp=new XMLHttpRequest();
				    }
				  catch (e)
				    {
				    // Internet Explorer
				    try
				      {
				      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				      }
				    catch (e)
				      {
				      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				      }
				    }
				  return xmlHttp;
				}
				
				var myXmlHttpRequest="";
				
				//验证用户名是否已经存在
				function checkName(){
					
					myXmlHttpRequest=getXmlHttpObject();
					//判断创建是否成功
					/*if(myXmlHttpRequest){
						//通过myXmlHttpRequest对象发送请求道服务器的某个页面
						//第一个参数表示请求的方式， get || post
						//第二个参数指定url，对哪个页面发出ajax请求（即http请求）
						//第三个参数 true表示异步机制 false表示不适用异步机制
						//使用myTime="+new Date()+"为了达到时时更新的效果 而不是从cache中取数据
						var url="/ajax/registerprocess.php?myTime="+new Date()+"&userName1="+$("userName").value;
						//window.alert(url);
						//打开请求
						myXmlHttpRequest.open("get",url,true);
						//指定回调函数  onreadystatechange状态改变事件触发器
						myXmlHttpRequest.onreadystatechange=chuli;
						//发送请求,如果是get请求 填写null即可
						myXmlHttpRequest.send(null);
					}*/
					//如果使用post方式提交则用下面的代码 
					//建议使用post方法 因为 已经解决了中文乱码问题，可以传送大量数据
					if(myXmlHttpRequest){
						
						var url="/ajax/registerprocess.php";
						var data1="userName1="+$("userName").value;
						
						//打开请求
						myXmlHttpRequest.open("post",url,true);
						//必须加的一句话
						myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
						//指定回调函数  onreadystatechange状态改变事件触发器
						myXmlHttpRequest.onreadystatechange=chuli;
						//发送请求,如果是get请求 填写null即可
						myXmlHttpRequest.send(data1);
					}
				}
				
				//回调函数
				function chuli(){
					//window.alert("处理函数被调用"+myXmlHttpRequest.readyState);//readyState 对象状态
					//取出从 服务器页面返回的数据
					if(myXmlHttpRequest.readyState==4){
						//取出值，根据返回信息的格式定 text || xml ||json
						//window.alert(myXmlHttpRequest.responseText);
						//window.alert("服务器返回"+myXmlHttpRequest.responseText);
						$("myres").value=myXmlHttpRequest.responseText;
					}
				}
				
				//封装一个方法
				function $(id){
					return document.getElementById(id);
				}
		</script>
	</head>
<body>
<form action="???" method="post">
	用户名字：<input type = "text" name = "userName" id = "userName">
	<input type = "button" onclick = "checkName()" value = "验证用户名">
	<input style = "border-width:0;color:red" type = "text" id = "myres"> 
	<br/>
	用户密码：<input type = "password" name = "password"><br>
	电子邮件：<input type = "text" name = "email"><br/>
	<input type = "submit" value = "用户注册">
</form>	

<form action="???" method="post">
	用户名字：<input type = "text" name = "userName2" id = "userName2">
	<input type = "button" value = "验证用户名">
	<input style = "border-width:0;color:red" type = "text" id = "myres2"> 
	<br/>
	用户密码：<input type = "password" name = "password"><br>
	电子邮件：<input type = "text" name = "email"><br/>
	<input type = "submit" value = "用户注册">
</form>	
</body>	
</html>

<?php
	
	//这两句话很重要，第一句告诉浏览器返回的数据是xml格式的
	//header("Content-Type: atext/xml;charset=utf-8");
	//告诉浏览器不要缓存数据
	//header("Cache-Control: no-cache");
	
	//接收数据 POST || GET 根据前面的请求方式而定
	$username=$_POST["userName1"];
	if($username=="zs"){
		echo '用户名被占用，对不起！';
	}else{
		echo '用户名可以用，恭喜！';
	}
	//echo  '用户名是'.$username;

	
?>

蟹道人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax(一) 文本格式操作 get和post 实例

用户注册 //创建ajax引擎 function getXmlHttpObject() { var xmlHttp=null; //不同的浏览器获取对象xmlhttprequest 对象方法不一样 try { // Firefox, Opera 8.0+, Safari xmlHtt
复制链接

扫一扫