初始化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;
}
===================================
調用頁面 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>
============================
服務端執行頁面 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 "資料填寫不全";
}
}
?>