简明现代魔法 -> Ajax技术 -> Ajax Post 与 Get 实例

Ajax Post 与 Get 实例

2010-03-12

学习 Ajax 那么多的理论,这里有两个不错的 Ajax Post 与 Get 的实例,让我们去学习下吧。

先是学习 Ajax 的 Post,程序效果请参看 Ajax 的 Post 传值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Post 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
	//获取接受返回信息层
	var msg = document.getElementById("msg");

	//获取表单对象和用户信息值
	var f = document.user_info;
	var userName = f.user_name.value;
	var userAge   = f.user_age.value;
	var userSex   = f.user_sex.value;

	//接收表单的URL地址
	var url = "ajax_output1.php";

	//需要POST的值,把每个变量都通过&来联接
	var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

	//实例化Ajax
	//var ajax = InitAjax();


	var ajax = false;
	//开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest) 
	{ 	//Mozilla 浏览器
		ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) 
		{	//设置MiME类别
            ajax.overrideMimeType("text/xml");
        }
	}
	else if (window.ActiveXObject) 
	{ 	// IE浏览器
		try 
		{
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
    	} 
		catch (e) 
		{
        	try 
			{
            	ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } 
			catch (e) {}
         }
	}
    if (!ajax) 
	{ 	// 异常,创建对象实例失败
		window.alert("不能创建XMLHttpRequest对象实例.");
		return false;
	}

	//通过Post方式打开连接
	ajax.open("POST", url, true);

	//定义传输的文件HTTP头信息
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

	//发送POST数据
	ajax.send(postStr);

	//获取执行状态
	ajax.onreadystatechange = function() 
	{ 
   		//如果执行状态成功,那么就把返回信息写到指定的层里
   		if (ajax.readyState == 4 && ajax.status == 200) 
		{ 
    		msg.innerHTML = ajax.responseText; 
   		} 
	} 
}
</script>

<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名:<input type="text" name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />
<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>
</body>
</html>

然后是 Ajax 的 Get,用途是从服务器获取值。

程序效果请参看 Ajax 的 Get 传值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Get 传值</title>
</head>

<script language="javascript">
function saveUserInfo()
{
	//获取接受返回信息层
	var msg = document.getElementById("msg");

	//获取表单对象和用户信息值
	var f = document.user_info;
	var userName  = f.user_name.value;
	var userAge   = f.user_age.value;
	var userSex   = f.user_sex.value;

	//接收表单的URL地址
	var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

	//实例化Ajax
	//var ajax = InitAjax();

	var ajax = false;
	//开始初始化XMLHttpRequest对象
	if(window.XMLHttpRequest) 
	{ 
		//Mozilla 浏览器
        ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) 
		{//设置MiME类别
        	ajax.overrideMimeType("text/xml");
		}
	}
	else if (window.ActiveXObject) 
	{ 	// IE浏览器
    	try 
		{
        	ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } 
		catch (e) 
		{
			try 
			{
            	ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
	}
    if (!ajax) 
	{ 	
		// 异常,创建对象实例失败
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
    }               

	//通过Post方式打开连接
	ajax.open("GET", url, true);

	//发送GET数据,已经在URL中赋了值所以send那里只要加个空参.
	ajax.send(null);

	//获取执行状态
	ajax.onreadystatechange = function() 
	{ 
   		//如果执行状态成功,那么就把返回信息写到指定的层里
   		if (ajax.readyState == 4 && ajax.status == 200) 
		{ 
    		msg.innerHTML = ajax.responseText; 
   		} 
	} 
}
</script>

<body>
<div id="msg"></div>
<form name="user_info" method="post" action="">
<input type="text" name="user_name" style="display:none;" />
<input type="text" name="user_age" style="display:none;" />
<input type="text" name="user_sex" style="display:none;" />
<input type="button" value="获取服务器变量" onClick="saveUserInfo()">
</form>
</body>

ajax_output2.php

<?
	 $user_name = "Gonn";
	 echo $user_name;
	 $user_age = "24";
	 echo $user_age;
	 $user_sex = "Man";
	 echo $user_sex;
?>
  
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们