ajax与php交互的get和post两种实现方式
初始化ajax对象 InitAjax.js
/* 初始化一个xmlhttp对象 */
function InitAjax(){//ajax初始化
var ajax=false;
try{
ajax=new ActionXObject("Msxml2.XMLHTTP");
}catch(e){
try{
ajax=new ActionXObject("Miscrosoft.XMLHTTP");
}catch(e){
ajax=false;
}
}
if(!ajax&&typeof XMLHttpRequest!='undefined'){
ajax=new XMLHttpRequest();
}
return ajax;
}
===================================function InitAjax(){//ajax初始化
var ajax=false;
try{
ajax=new ActionXObject("Msxml2.XMLHTTP");
}catch(e){
try{
ajax=new ActionXObject("Miscrosoft.XMLHTTP");
}catch(e){
ajax=false;
}
}
if(!ajax&&typeof XMLHttpRequest!='undefined'){
ajax=new XMLHttpRequest();
}
return ajax;
}
调用页面 index.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="InitAjax.js" type="text/javascript"></script>
<script type="text/javascript">
//获取新闻(AJAX的GET方式)
function getNews(newsID)
{
//如果没有把newsID参数传过来
if(typeof(newsID) == 'undefined')
{
return false;
}
var url = "show.php?tag=show&id=" + newsID; //需要进行ajax的URL地址
var ajax = InitAjax(); //实例化Ajax对象
ajax.open("GET", url, true); //使用Get方式进行请求
ajax.onreadystatechange = updatePage; //调用执行状态
ajax.send(null); //向服务器发出请求
//获取执行状态
function updatePage()
{
//处于请求处理结束前，显示LODDING图
if(ajax.readyState < 4)
{
show_news.innerHTML = "<img src=lodding.gif>";
}
//请求处理结束，那么就把返回的内容赋值给上面指定的层
if (ajax.readyState == 4 && ajax.status == 200)
{
show_news.innerHTML = ajax.responseText;
}
}
}
//添加新闻(AJAX的POST方式)
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;
var url2 = "show.php?tag=add"; //接收表单的URL地址
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; //需要POST的值，把每个变量都通过&来联接
var ajax2 = InitAjax(); //实例化Ajax
ajax2.open("POST", url2, true); //通过Post方式打开连接
ajax2.onreadystatechange = updatePage2; //调用执行状态
ajax2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //定义传输的文件HTTP头信息
ajax2.send(postStr); //向服务器发出请求
//获取执行状态
function updatePage2()
{
if (ajax2.readyState == 4 && ajax2.status == 200)
{
msg.innerHTML = ajax2.responseText;
}
}
}
</script>
</head>
<body onload="saveUserInfo(); getNews(5); ">
<a onClick="getNews(5)" style="cursor:pointer">新闻1</a>
<div id="show_news"></div>
<form name="user_info">
姓名：<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>
<div id="msg"></div>
</body>
</html>
============================<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="InitAjax.js" type="text/javascript"></script>
<script type="text/javascript">
//获取新闻(AJAX的GET方式)
function getNews(newsID)
{
//如果没有把newsID参数传过来
if(typeof(newsID) == 'undefined')
{
return false;
}
var url = "show.php?tag=show&id=" + newsID; //需要进行ajax的URL地址
var ajax = InitAjax(); //实例化Ajax对象
ajax.open("GET", url, true); //使用Get方式进行请求
ajax.onreadystatechange = updatePage; //调用执行状态
ajax.send(null); //向服务器发出请求
//获取执行状态
function updatePage()
{
//处于请求处理结束前，显示LODDING图
if(ajax.readyState < 4)
{
show_news.innerHTML = "<img src=lodding.gif>";
}
//请求处理结束，那么就把返回的内容赋值给上面指定的层
if (ajax.readyState == 4 && ajax.status == 200)
{
show_news.innerHTML = ajax.responseText;
}
}
}
//添加新闻(AJAX的POST方式)
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;
var url2 = "show.php?tag=add"; //接收表单的URL地址
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; //需要POST的值，把每个变量都通过&来联接
var ajax2 = InitAjax(); //实例化Ajax
ajax2.open("POST", url2, true); //通过Post方式打开连接
ajax2.onreadystatechange = updatePage2; //调用执行状态
ajax2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //定义传输的文件HTTP头信息
ajax2.send(postStr); //向服务器发出请求
//获取执行状态
function updatePage2()
{
if (ajax2.readyState == 4 && ajax2.status == 200)
{
msg.innerHTML = ajax2.responseText;
}
}
}
</script>
</head>
<body onload="saveUserInfo(); getNews(5); ">
<a onClick="getNews(5)" style="cursor:pointer">新闻1</a>
<div id="show_news"></div>
<form name="user_info">
姓名：<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>
<div id="msg"></div>
</body>
</html>
服务端执行页面 show.php
<?php
include_once 'DB.class.php';
$tg = new DB('localhost', 'root', 'wangxiang', 'fenghua', 'UTF8');
if($_GET[tag]=='show')
{
$sql = "SELECT Id, title from news limit 0," . $_GET[id];
mysql_query("set names 'utf8'");
$item = $tg->getAll($sql);
sleep(1); //暂停1秒
for($i=0; $i<count($item); $i++)
{
echo "<a href=news.php?nid={$item[$i]['Id']}>{$item[$i]['title']}</a><br>";
}
}
else if($_GET[tag]=='add')
{
sleep(2);//暂停2秒
if($_POST[user_name] != '' && $_POST[user_age] != '' && $_POST[user_sex] != '')
{
$sql = "insert into news (title, pic_path, content) values ('".$_POST[user_name]."', '".$_POST[user_age]."', '".$_POST[user_sex]."')";
mysql_query("set names 'utf8'");
$insert_id = $tg->insert($sql);
if($insert_id > 0)
{
echo "插入成功!";
}
}
else
{
echo "资料填写不全";
}
}
?>
include_once 'DB.class.php';
$tg = new DB('localhost', 'root', 'wangxiang', 'fenghua', 'UTF8');
if($_GET[tag]=='show')
{
$sql = "SELECT Id, title from news limit 0," . $_GET[id];
mysql_query("set names 'utf8'");
$item = $tg->getAll($sql);
sleep(1); //暂停1秒
for($i=0; $i<count($item); $i++)
{
echo "<a href=news.php?nid={$item[$i]['Id']}>{$item[$i]['title']}</a><br>";
}
}
else if($_GET[tag]=='add')
{
sleep(2);//暂停2秒
if($_POST[user_name] != '' && $_POST[user_age] != '' && $_POST[user_sex] != '')
{
$sql = "insert into news (title, pic_path, content) values ('".$_POST[user_name]."', '".$_POST[user_age]."', '".$_POST[user_sex]."')";
mysql_query("set names 'utf8'");
$insert_id = $tg->insert($sql);
if($insert_id > 0)
{
echo "插入成功!";
}
}
else
{
echo "资料填写不全";
}
}
?>
