欢迎光临
我们一直在努力
当前位置：IDC资讯中心 > 网络编程 > Ajax教程 > 正文

ajax的server部分(php版)_ajax教程

2007-08-24 分类：Ajax教程 阅读(852) 评论(0)
建站超值云服务器，限时71元/月

Server端的任务通常是根据Client的请求，进行逻辑操作，并将结果响应返回。这个响应通常为XML格式(因此server端需要使用PHP的DOM创建XML响应)


1.PHP使用DOM创建XML响应，供client端的JS解析然后在页面中显示;(因此需要熟练PHP的DOM API)
其实，PHP生成XML的方法有两种：
使用DOM API；（方法一）
另一种是直接将XML的内容echo出去即可；（方法二）
见示例：
HTML页面(包含三个JS触发函数：onmouseover, onmouseout, onclick; 分别触发自己的函数)
<!doctype html public “-//w3c//dtd html 4.0 tRANSITIONAL//en”>
<html>
<head>
<title> Server PHP Ajax </title>
<script type=”text/javascript” src=”http://www.knowsky.com/js.js”></script>
</head>


<body>
<span onmouseover=”PHPechoXML()” onmouseout=”PHPDOMXML()”>Default Words</span>
<div id=”show”></div>
divide<input type=”text” id=”firstNumber”/>by
<input type=”text” id=”secondNumber”/>
<input type=”button” value=”Send” onclick=”CSparameter()”/>
<div id=”result”></div>
</body>
</html>
JS页面(分别定义三个JS触发函数：PHPechoXML, PHPDOMXML, 以及CSparameter)
其中有XMLHttpRequest对象创建函数，以及各自的Server响应处理函数
///////1. 创建XMLHttpRequest对象
var xmlHttp = createXmlHttpRequestObject();


function createXmlHttpRequestObject()
…{
  var xmlHttp;


  try
  …{
    // try to create XMLHttpRequest object
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  …{
    // assume IE6 or older
    var XmlHttpVersions = new Array(MSXML2.XMLHTTP.6.0,
                                    MSXML2.XMLHTTP.5.0,
                                    MSXML2.XMLHTTP.4.0,
                                    MSXML2.XMLHTTP.3.0,
                                    MSXML2.XMLHTTP,
                                    Microsoft.XMLHTTP);
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
    …{
      try
 
      …{
        // try to create XMLHttpRequest object
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch (e) …{}
    }
  }
  if (!xmlHttp)
    alert(“Error creating the XMLHttpRequest object.”);
  else
    return xmlHttp;
}



///////2. JavaScript事件响应函数(onmouseover触发)
// read a file from the server
function PHPechoXML()
…{
  // only continue if xmlHttp isnt void
  if (xmlHttp)
  …{
    // try to connect to the server
    try
    …{
      // initiate reading a file from the server
      //向Server端的PHPechoXML.php文件发送异步请求
      xmlHttp.open(“GET”, “PHPechoXML.php”, true);
      xmlHttp.onreadystatechange = handleRequestStateChange;
      xmlHttp.send(null);
    }
    // display the error in case of failure
    catch (e)
    …{
      alert(“Cant connect to server: ” + e.toString());
    }
  }
}


///////3. JavaScript事件响应函数(onmouseout触发)
function PHPDOMXML()
…{
  // only continue if xmlHttp isnt void
  if (xmlHttp)
  …{
    // try to connect to the server
    try
    …{
      // initiate reading a file from the server
      //向Server端的PHPDOMXML.php文件发送异步请求
      xmlHttp.open(“GET”, “PHPDOMXML.php”, true);
      xmlHttp.onreadystatechange = handleRequestStateChange;
      xmlHttp.send(null);
    }
    // display the error in case of failure
    catch (e)
    …{
      alert(“Cant connect to server: ” + e.toString());
    }
  }
}


// handles the response received from the server，Server端状态回调函数
function handleRequestStateChange()
…{


  if (xmlHttp.readyState == 4)
  …{
    // continue only if HTTP status is “OK”
    if (xmlHttp.status == 200)
    …{
      try
      …{
          // read the message from the server
          var xmlResponse = xmlHttp.responseXML;


            //捕获IE和Opera潜在的错误
            if(!xmlResponse||!xmlResponse.documentElement)
            …{
                throw(“Invalid XML structure:  “+xmlHttp.responseText);
            }
            //捕获FireFox的潜在错误
            var rootNodeName=xmlResponse.documentElement.nodeName;
            if(rootNodeName==”parsererror”)
            …{
                throw(“Invalid XML structure: “+xmlHttp.responseText);
            }


            //获取Server端响应的XML响应并解析，到网页中显示
          // obtain the XMLs document element
          xmlRoot = xmlResponse.documentElement; 
          // obtain arrays with book titles and ISBNs
          cityArray=xmlRoot.getElementsByTagName(“city”);
          // generate HTML output
          var html = “”; 
          // iterate through the arrays and create an HTML structure
          for (var i=0; i<cityArray.length; i++)
            html += cityArray.item(i).firstChild.data + “<br/>”;
          // obtain a reference to the <div> element on the page
          myDiv = document.getElementById(“show”);
          // display the HTML output
          myDiv.innerHTML = “Server says: <br />” + html;
      }
      catch(e)
      …{
        // display error message
        alert(“Error reading the response: ” + e.toString());
      }
    }
    else
    …{
      // display status message
      alert(“There was a problem retrieving the data: ” +
            xmlHttp.statusText);
    }
  }
}


 


///////4. JavaScript事件响应函数(onclick触发)
function CSparameter()
…{
  // only continue if xmlHttp isnt void
  if (xmlHttp)
  …{
    // try to connect to the server
    try
    …{


    //获取form中的值
    var firstNumber=document.getElementById(“firstNumber”).value;
    var secondNumber=document.getElementById(“secondNumber”).value;


    //设置为参数，对Server端的CSparameter.php进行异步请求
   var param=”firstNumber=”+firstNumber+”&secondNumber=”+secondNumber;


      // initiate reading a file from the server
      xmlHttp.open(“GET”, “CSparameter.php?”+param, true);
      xmlHttp.onreadystatechange = handleRequestStateChangePara;
      xmlHttp.send(null);
    }
    // display the error in case of failure
    catch (e)
    …{
      alert(“Cant connect to server: ” + e.toString());
    }
  }
}


//Server状态改变回调函数（Server端接受Client端传来的参数经过逻辑计算之后返回XML响应，Client端对XML进行解析，返回更新到页面中）
// handles the response received from the server
function handleRequestStateChangePara()
…{


  if (xmlHttp.readyState == 4)
  …{
    // continue only if HTTP status is “OK”
    if (xmlHttp.status == 200)
    …{
      try
      …{
          // read the message from the server
          var xmlResponse = xmlHttp.responseXML;
         
            //捕获IE和Opera潜在的错误
            if(!xmlResponse||!xmlResponse.documentElement)
            …{
                throw(“Invalid XML structure:  “+xmlHttp.responseText);
            }
            //捕获FireFox的潜在错误
            var rootNodeName=xmlResponse.documentElement.nodeName;
            if(rootNodeName==”parsererror”)
            …{
                throw(“Invalid XML structure: “+xmlHttp.responseText);
            }


          // obtain the XMLs document element
          xmlRoot = xmlResponse.documentElement; 
           
          cityArray=xmlRoot.getElementsByTagName(“result”);
          // generate HTML output
          var html = “”; 
          // iterate through the arrays and create an HTML structure
          for (var i=0; i<cityArray.length; i++)
            html += cityArray.item(i).firstChild.data + “<br/>”;
          // obtain a reference to the <div> element on the page
          myDiv = document.getElementById(“result”);
          // display the HTML output
          myDiv.innerHTML = “Server says: <br />” + html;
      }
      catch(e)
      …{
        // display error message
        alert(“Error reading the response: ” + e.toString());
      }
    }
    else
    …{
      // display status message
      alert(“There was a problem retrieving the data: ” +
            xmlHttp.statusText);
    }
  }
}


Server端的PHP脚本(负责接受Client端的异步请求做出响应，并以XML格式返回到Client端)
PHPechoXML.php（PHP生成XML响应的第一种方法，echo输出XML内容）
<?php
//server端的PHP生成XML文件的第一种方法，直接echo出XML
header(Content-Type: text/xml);
// generate XML header
echo <?xml version=”1.0″ encoding=”UTF-8″ standalone=”yes”?>;


echo <cities>;
$cityArray=array(Paris,London,NewYork,Beijing,Tokoy);
foreach ($cityArray as $city)
{
    echo <city>.$city.</city>;
}
echo </cities>;


?>


PHPDOMXML.php(PHP生成XML响应的第二种方法，使用PHP的DOM API，输出XML格式的响应)
<?php
  header(Content-Type: text/xml);
 
  $cityArray=array(Shanghai,Beijing,Shanxi,Shandong);
  //创建一个XML文档
  $dom=new DOMDocument();
  //最外层的Tag
  $citiesTag=$dom->createElement(cities);
  $dom->appendChild($citiesTag);
  //里面的Tag可以通过循环产生
  foreach ($cityArray as $city)
  {
    $cityTag=$dom->createElement(city);
    $cityName=$dom->createTextNode($city);
    $cityTag->appendChild($cityName);
    $citiesTag->appendChild($cityTag);
  }
  //将XML结构保存为字符串并输出
  $xmlString=$dom->saveXML();
  echo $xmlString; 
?>


2. client端的与Server端的参数传递：
client端的网页中可以有form，这样可以将参数传递到server端<GET或POST方法，变量或XML>，server端根据传递的参数，生成满足要求的XML响应；(实现了client端和server端的参数交互)
见示例：
与1中一样，参数传递的PHP端的脚本如下CSparameter.php(接受Client端form异步请求的参数，进行逻辑处理，并生成XML响应发回Client端)<?php
//自定义Server端的错误处理函数
require_once(error_handler.php);
header(Content-Type: text/xml);


//接受Client端异步请求的参数
$firstNumber=$_GET[firstNumber];
$secondNumber=$_GET[secondNumber];


//进行逻辑计算
$result=$firstNumber/$secondNumber;


//生成XML格式的响应向Client端返回
$dom=new DOMDocument();
$resultsTag=$dom->createElement(results);
$dom->appendChild($resultsTag);


$resultTag=$dom->createElement(result);
$resultText=$dom->createTextNode($result);
$resultTag->appendChild($resultText);
$resultsTag->appendChild($resultTag);


$xmlString=$dom->saveXML();
echo $xmlString;


?>
3. PHP端的错误异常(这里说的错误或异常都是指逻辑错误)处理：
a)PHP默认情况下，发生错误或异常的时候，不会将异常抛出(这是因为php.ini中display_errors的默认置为off,错误将被保存在Apache错误日志记录中)，因此编写起来很难调试。<往往浏览器显示的错不太容易定位>


b)但如果将display_errors设置为on后，错误将显示出来，但是不友好的出错信息.
http://www.knowsky.com/
c)可以编写自己的PHP错误异常处理函数(不一定要求display_errors设置为on)，将错误以明显的方式显示出来，便于调试；
通常自己编写异常处理函数如下：
显示定义的Server端错误异常抛出函数error_handler.php(PHP程序中可以方便地复用)
<?php
//set a user-defined error handler function用户自定义出错异常处理方法
set_error_handler(error_handler, E_ALL);
function error_handler($errNo,$errStr,$errFile,$errLine)
{
    //如果输出缓存非空，将其置空
    if(ob_get_length()) ob_clean();
    //定义自定义输出   
    $error_message=ERRNO: .$errNo.chr(10).TEXT: .$errStr.chr(10).LOCATION: .$errFile., Line.$errLine;
    echo $error_message;
    exit;
}
?>


4.server端存取数据库<使用MySQL存取数据，从而实现真正的动态>
这个已经很经典了，可以使用MySQL或MSSQL、Oracle等
a）打开数据库；b)SQL语句Query c)关闭数据库


5.server端PHP程序封装和体系结构(server端php程序引入设计模式)
a) appname.php    <接受client端请求>
b) appname.class.php    <将server端的逻辑、数据库操作、错误处理等封装成类，包含属性、方法、构造函数、析构函数>
c) config.php
d) error_handler.php


一个server端引入设计模式的例子：(设计Server端PHP脚本的程序架构，增强扩展性和重用性)
一个很简单的Keywords Suggest程序：(包括index.html, css/style.css, js.js以及PHP代码php/suggest.php, suggest.class.php, error_handler.php, config.php 支持数据库)
index.html(css/style.css, js.js; 注意两个JS客户端事件触发onkeyup,onclick)
onkeyup在用户输入的时候实时异步地向Server端发送请求，Server给出响应；onclick在用户点击search的时候，向Server发送请求
<!doctype html public “-//w3c//dtd html 4.0 tRANSITIONAL//en”>
<html>
<head>
<title> Design Pattern PHP AJAX (keywords suggest DEMO) </title>
<link type=”text/css” rel=”stylesheet” href=”css/style.css”/>
<script type=”text/javascript” src=”http://www.knowsky.com/js.js”></script>
</head>
<body>
    <noscript>
        <strong>This example requires a JavaScript-enabled browser!</strong>
    </noscript>
    <div class=”project”>
        <span class=”title”>Welcome to Design Pattern PHP AJAX (keywords suggest DEMO) </span>
        <br />
        <br />
        <div class=”news”>
        <br /><input type=”text” id=”keyword” onkeyup=”keyup()” /><input type=”button” id=”search” onclick=”search()” value=”search”><br /><br />
            suggest keywords:
            <div id=”show”></div>
        </div>
    </div>
</body>
</html>
css/style.css
body
{…}{
    font-family: Arial;
    font-size: small;
    background-color: #fff;
}
.title
{…}{
    font-size:x-large;
}
div.project
{…}{
    background-color: #99ccff;
    padding:5px;
    border:#000099 1px solid;
}
div.news
{…}{
    background-color:#fffbb8;
    padding:2px;
    border: 1px dashed;
}
#show
{…}{
    color: #008000;
    font-style: italic;
}js.js(JS中定义响应函数以及Client处理Server响应的回调函数)
///////////////////////////////////////////////////////////
//1.创建XMLHttpRequest对象
///////////////////////////////////////////////////////////
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
…{
  var xmlHttp;
  try
  …{
    // try to create XMLHttpRequest object
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  …{
    // assume IE6 or older
    var XmlHttpVersions = new Array(MSXML2.XMLHTTP.6.0,
                                    MSXML2.XMLHTTP.5.0,
                                    MSXML2.XMLHTTP.4.0,
                                    MSXML2.XMLHTTP.3.0,
                                    MSXML2.XMLHTTP,
                                    Microsoft.XMLHTTP);
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
    …{
      try
 
      …{
        // try to create XMLHttpRequest object
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch (e) …{}
    }
  }
  if (!xmlHttp)
    alert(“Error creating the XMLHttpRequest object.”);
  else
    return xmlHttp;
}


//向id为show的div显示server端响应的正确
function display(message)
…{
    showDIV=document.getElementById(“show”);
    showDIV.innerHTML=message;
}
//向id为show的div显示server端响应的错误信息
function displayError(errormessage)
…{
    //显示出错信息
    display(“Error retrieving the new message!<br/>”+errormessage);
}


///////////////////////////////////////////////////////////
//2. event-driven函数(keyup函数)
///////////////////////////////////////////////////////////
var keyupAddress=”php/suggest.php?action=keyup&keyword=”;
function keyup()
…{
    if(xmlHttp)
    …{
        //server不忙的时候发送异步请求
        if(xmlHttp.readyState==0||xmlHttp.readyState==4)
        …{
            try
            …{
                var keyword=document.getElementById(“keyword”).value;
                //发出异步请求
                xmlHttp.open(“GET”,keyupAddress+keyword,true);
                xmlHttp.onreadystatechange=handlereadystatechange;
                xmlHttp.send(null);
            }
            catch(e)
            …{
                displayError(e.toString);
            }           
        }
    }
}
///////////////////////////////////////////////////////////
//3. 回调函数,server端响应状态发生变化后激发该函数
///////////////////////////////////////////////////////////
function handlereadystatechange()
…{
    if(xmlHttp.readyState==4)
    …{
        if(xmlHttp.status==200)
        …{
            try
            …{
                //获取server端响应
                var xmlResponse = xmlHttp.responseXML;
                suggestArray=xmlResponse.getElementsByTagName(“suggest”);
                var showText=””;
                for(var i=0;i<suggestArray.length;i++)
                …{
                    var textNodes=suggestArray[i].getElementsByTagName(“text”);
                    var timesNodes=suggestArray[i].getElementsByTagName(“times”);
                    for(var j=0;j<textNodes.length;j++)
                    …{
                        showText+=textNodes[j].childNodes[0].nodeValue+” (“+timesNodes[j].childNodes[0].nodeValue+”) <br />”;   
                    }
                }
                //显示响应到页面中
                display(showText);
            }
            catch(e)
            …{
                displayError(e.toString());
            }
        }
    }
}
///////////////////////////////////////////////////////////
//2. event-driven函数(search函数)
///////////////////////////////////////////////////////////
var searchAddress=”php/suggest.php?action=search&keyword=”;
function search()
…{
    if(xmlHttp)
    …{
        //server不忙的时候发送异步请求
        if(xmlHttp.readyState==0||xmlHttp.readyState==4)
        …{
            try
            …{
                var keyword=document.getElementById(“keyword”).value;
                //发出异步请求
                xmlHttp.open(“GET”,searchAddress+keyword,true);
                xmlHttp.onreadystatechange=handlereadystatechange;
                xmlHttp.send(null);
            }
            catch(e)
            …{
                displayError(e.toString);
            }           
        }
    }
}


最后注意：Server端PHP脚本的程序架构(suggest.php为Server端的主要处理函数，另外suggest.class.php,error_handler.php,config.php等)
suggest.php(获取Client端的参数，并调用suggest类的两个方法，生成XML格式的响应发回到Client端)
<?php
require_once(suggest.class.php);
header(Content-Type: text/xml);
//确定用户浏览器不会缓存结果
header(Expires: Wed, 23 Dec 1980 00:30:00 GMT);
header(Last-Modified: .gmdate(D, d M Y H:i:s). GMT );
header(Cache-Control: no-cache, must-revalidate);
header(Pragma: no-cache);


$action=$_GET[action];
$keyword=$_GET[keyword];


$oSuggest=new suggest();
if($action==keyup&&$keyword!=)
{
    $suggestXML=$oSuggest->getSuggests($keyword);
}
if($action==search&&$keyword!=)
{
    $suggestXML=$oSuggest->submitKeyword($keyword);
}
echo $suggestXML;
?>suggest.class.php类
<?php
require_once(error_handler.php);
require_once(config.php);
class suggest
{
    //成员变量
    private $conn;


    //构造函数, 数据库链接
    function __construct()
    {
        $this->conn=new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
        if (mysqli_connect_errno()) {
            printf(“Connect failed: %s “, mysqli_connect_error());
            exit();
        }
    }
    //析构函数,断开数据库链接
    function __destruct()
    {
        $this->conn->close();
    }
    //getSuggests成员函数(该函数主要响应Client端action=keyup，即用户正在输入时候的异步请求)
    public function getSuggests($keyword)
    {
        //产生suggest(产生数据库中与所输入关键词前半部分相同的关键词)         
        $suggest_query=select * from keywords where keyword like .$keyword.% order by times desc limit 5;
        $suggest_result=$this->conn->query($suggest_query);
        $suggest_num=$suggest_result->num_rows;          


        $strOUT=<?xml version=”1.0″ encoding=”UTF-8″ standalone=”yes”?>;
        if($suggest_num==0)
        {
            //$strOUT=$strOUT.<suggests><suggest><text>.$keyword.</text><times>0</times></suggest></suggests>;
        }
        else
        {
            $strOUT=$strOUT.”<suggests>”;
            for($i=0;$i<$suggest_num;$i++)
            {
              $suggest_row = $suggest_result->fetch_row();
              $strOUT=$strOUT.<suggest><text>.$suggest_row[1].</text><times>.$suggest_row[2].</times></suggest>;
            }
           $strOUT=$strOUT.</suggests>;            
        }
       return $strOUT;
    }
    //submitKeyword成员函数(该函数主要响应Client端action=search，即用户点击search时候的异步请求)
    public function submitKeyword($keyword)
    {
        $select_query=select * from keywords where keyword=.$keyword.;
        $select_result=$this->conn->query($select_query);
        $select_num=$select_result->num_rows;
       
        //遇到新的keywords添加到数据库中，遇到已有的keywords增加次数
        $strOUT=<?xml version=”1.0″ encoding=”UTF-8″ standalone=”yes”?>;       
        //已经存在,增加次数
        if($select_num!=0)
        {
            $select_row = $select_result->fetch_row();
            $times_now=$select_row[2];
            $times_now=$times_now+1;
            $update_query=update keywords set times =.$times_now. where keyword=.$keyword.;
            $update_result=$this->conn->query($update_query);               
            $strOUT=$strOUT.<suggests><suggest><text>.$keyword.</text><times>.$times_now.</times></suggest></suggests>;
        }
        else
        {
        //不存在保存插入
            $insert_query=insert into keywords(keyword, times) values (.$keyword.,1);
            $insert_result=$this->conn->query($insert_query);
            $strOUT=$strOUT.<suggests><suggest><text>.$keyword.</text><times>1</times></suggest></suggests>;
        }
       return $strOUT;
    }
}
?>
最后两个函数，config.php保存应用程序配置信息(如 数据库配置信息)
<?php
define(DB_HOST, localhost);
define(DB_USER,phpajaxuser);
define(DB_PASSWORD,phpajaxuser);
define(DB_DATABASE,phpajax);
?>
error_handler.php保存自定义异常处理
<?php
//设置用户自定义错误处理函数
set_error_handler(error_handler, E_ALL);


function error_handler($errNo,$errStr,$errFile,$errLine)
{
    if(ob_get_length()) ob_clean();


    $error_message=ERRNO: .$errNo.chr(10).TEXT: .$errStr.chr(10).LOCATION: .$errFile. Line: .$errLine;
    echo $error_message;
    exit;
}
?>最后还需要sql语句向数据库中添加用于保存keywords的database
CREATE TABLE `keywords` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `keyword` varchar(32) NOT NULL default ,
  `times` int(10) unsigned NOT NULL default 0,
  PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=1 ;


6.关于PHP的小知识，以后研究：
PHP从远程服务器读取数据的方法(有点儿类似Web Crawl)：
file_get_contents;
或者CURL<Client URL Library>www.php.net/curl

赞(0)
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » ajax的server部分(php版)_ajax教程
分享到： 更多 (0)

相关推荐

热门标签

ldquo (1370)win (1324)活动 (1166)ios (1162)rdquo (818)微信 (747)iphone (728)小米 (722)windows (706)手机 (698)酷跑 (686)飞车 (540)天天 (492)qq (491)网站 (457)全民 (442)discuz (408)充值 (389)安装 (368)更新 (321)华为 (300)浏览器 (292)支付宝 (289)三星 (266)note (264)教程 (262)预览版 (261)小编 (258)越狱 (254)linux (248)

热门文章

分类目录