一聚教程网:一个值得你收藏的教程网站

热门教程

ajax+php+xml 实现在线考试问答系统

时间:2022-07-02 10:11:10 编辑:袖梨 来源:一聚教程网



Ajax应用





简单测试系统

问题: 欢迎使用本考试系统,请单击开始!



答案:


提示:




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

 $link=mysql_connect("localhost","root","");
 mysql_select_db("quiz",$link);
 mysql_query("set names gb2312");
 $sql=mysql_query("select * from questions");
 echo "";
 
 while($info=mysql_fetch_array($sql)){
  echo "".$info[question]."".$info[answer]."";
  };
 echo "
";
?>

questions.xml



  传统的web开发模式与Ajax开发模式相比,哪个效率更高?
  Ajax
  Ajax技术的核心对象是什么?
  XMLHttpResponse
  Ajax技术中使用什么方法来定位你需要操作的元素?
  getElementById
  Ajax用来定义显示的是什么技术?
  CSS
   服务端对浏览端的响应存储在XMLHttpResponse的哪个属性中(作为xml文档)?
  responseXML

就这么简单哦,下面来看看这款吧。

热门栏目