首頁 > 開發者 > PHP

ajax+php+xml 實現線上考試問答系統

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html>
<head>
<title>Ajax應用</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<style type="text/css">
<!--CSS樣式表用於定義頁面的顯示外觀，將內容和顯示分離
#answershow{ border:#E2FAFA; color:#000099; font-size:12px;}
#main{visibility:hidden;}
#begin{
    visibility:visible;
 position:absolute;
 left:135px;
 top:103px;
 width:37px;
 height:16px;
 z-index:1;
}
-->
</style>
</head>
<body>
<div id="begin"><input type="button" id="startq" value="開始"></div>
<h1>簡單測試系統</h1><p><b>問題:</b> <span id="question">歡迎使用本考試系統，請單擊開始！</span></p>
<div id="main">
<p><b>答案:</b><input type="text" id="answer">
<input type="button" value="Submit" id="submit">
<br><b> 提示：</b><span id="answershow"></span>
</div>
<script language="JavaScript" type="text/javascript" src="manage.js"></script>
</body>
</html>

ajax.js檔案

var ajaxreq=false, ajaxCallback;
function ajaxRequest(filename) {
   try {
    ajaxreq= new XMLHttpRequest();
   } catch (error) {
    try {
      ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (error) {
      return false;
    }
   }
   ajaxreq.open("GET",filename);
   ajaxreq.onreadystatechange = ajaxResponse;
   ajaxreq.send(null);
}
function ajaxResponse() {
   if (ajaxreq.readyState !=4) return;
   if (ajaxreq.status==200) {
      if (ajaxCallback) ajaxCallback();
   } else alert("Request failed: " + ajaxreq.statusText);
   return true;
}
是很簡單的建立xmlhttp哦，更實用健全的xmlhttp建立方法最好的xmlhttp建立方法

mange.js 檔案，

var qn=0,questions,right=0;
function getQuestions() {    //getElementById用於定位到要操作的頁面元素
   document.getElementById("main").style.visibility="visible";
   document.getElementById("begin").style.visibility="hidden";
   document.getElementById("answer").focus();
   obj=document.getElementById("question");
   obj.firstChild.nodeValue="正在載入.....";
   ajaxCallback = nextQuestion;
   ajaxRequest("questions.xml");     //從伺服器端XML文本載入問題
}
function nextQuestion() {        //顯示下一個問題
   questions = ajaxreq.responseXML.getElementsByTagName("ask");
   obj=document.getElementById("question");
   if (qn < questions.length) {
      q = questions[qn].firstChild.nodeValue;
      obj.firstChild.nodeValue=q;
   } else {           //使用者回答完使用題時，給予評分
   var anobj=document.getElementById("answershow");     
   anobj.innerHTML="您的分數為："+right/questions.length*100;
   }
}
function checkAnswer() {       //即時檢查使用者作答情況
   answers = ajaxreq.responseXML.getElementsByTagName("key");
   a = answers[qn].firstChild.nodeValue;
   answerfield = document.getElementById("answer");
   if(answerfield.value==""){ var anobj=document.getElementById("answershow");//使用者沒有作答時提示
  var anobj=document.getElementById("answershow");
     anobj.innerHTML="對不起，你還沒有回答";
  answerfield.focus();
     return;}
   else if (a.toLowerCase() == (answerfield.value).toLowerCase()) {  //使用者答對時的提示
    right++;
    var anobj=document.getElementById("answershow");
     anobj.innerHTML="回答正確!";
   answerfield.focus();
   }
   else {
       var anobj=document.getElementById("answershow");  //使用者打錯時的提示
      anobj.innerHTML="答案錯誤,答案應為:"+a;
      answerfield.focus();
    }
   qn = qn + 1;
   answerfield.value="";
   nextQuestion();
}
//下面幾行為按鈕建立事件處理
obj=document.getElementById("startq");
obj.onclick=getQuestions;
ans=document.getElementById("submit");
ans.onclick=checkAnswer;
這個檔案是分析節點，判斷答案是否正確的。

questions.php

<?php
 $link=mysql_connect("localhost","root","");
 mysql_select_db("quiz",$link);
 mysql_query("set names gb2312");
 $sql=mysql_query("select * from questions");
 echo "<?xml version='1.0' encoding='gb2312'?><questions>";
 
 while($info=mysql_fetch_array($sql)){
  echo "<ask>".$info[question]."</ask><key>".$info[answer]."</key>";
  };
 echo "</questions>";
?>

questions.xml

<?xml version="1.0" encoding="gb2312" ?>
<questions>
  <ask>傳統的web開發模式與Ajax開發模式相比，哪個效率更高？</ask>
  <key>Ajax</key>
  <ask>Ajax技術的核心對象是什嗎？</ask>
  <key>XMLHttpResponse</key>
  <ask>Ajax技術中使用什麼方法來定位你需要操作的元素？</ask>
  <key>getElementById</key>
  <ask>Ajax用來定義顯示的是什麼技術？</ask>
  <key>CSS</key>
   <ask>服務端對瀏覽端的響應儲存在XMLHttpResponse的哪個屬性中(作為xml文檔)？</ask>
  <key>responseXML</key>
</questions>

就這麼簡單哦，下面來看看這款吧。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
w3schools ajax php ajax php json debug ajax php javascript ajax php php ajax json php ajax post php ajax proxy
相關文章
監控伺服器swap並重啟php的Shell指令碼_linux shell
PHP(5)“最長公用首碼”演算法問題
30個很棒的PHP開源CMS內容管理系統
php調用dll經驗小結
PHP匯入匯出Excel方法
PHP 擷取當前url的函數及參數

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More