ajax的server部分(php版)

十字路口388

十字路口388

2016-02-19 22:25

下面是个超简单的ajax的server部分(php版)教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

  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="js.js"/script
  /head

  body
  span onmouseover="PHPechoXML()" onmouseout="PHPDOMXML()"Default Words/span
  div id="show"/div
  divideinput 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; iXmlHttpVersions.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 isn't 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("Can't connect to server: " + e.toString());
      }
    }
  }

  ///////3. JavaScript事件响应函数(onmouseout触发)
  function PHPDOMXML()
  ...{
    // only continue if xmlHttp isn't 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("Can't 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);
              }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

              //获取Server端响应的XML响应并解析,到网页中显示
            // obtain the XML's 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; icityArray.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 isn't void
    if (xmlHttp)
    ...{
      // try to connect to the server
      try
      ...{

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

      //获取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("Can't 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 XML's 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; icityArray.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://school.cnd8.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="js.js"/script
  /head
  body
      noscript
          strongThis 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; iXmlHttpVersions.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;isuggestArray.length;i++)
                  ...{
                      var textNodes=suggestArray[i].getElementsByTagName("text");
                      var timesNodes=suggestArray[i].getElementsByTagName("times");
                      for(var j=0;jtextNodes.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.'suggestssuggesttext'.$keyword.'/texttimes0/times/suggest/suggests';
          }
          else
          {
              $strOUT=$strOUT."suggests";
              for($i=0;$i$suggest_num;$i++)
              {
                $suggest_row = $suggest_result-fetch_row();
                $strOUT=$strOUT.'suggesttext'.$suggest_row[1].'/texttimes'.$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.'suggestssuggesttext'.$keyword.'/texttimes'.$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.'suggestssuggesttext'.$keyword.'/texttimes1/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;
  或者CURLClient URL Librarywww.php.net/curl

展开更多 50%)
分享

猜你喜欢

ajax的server部分(php版)

Web开发
ajax的server部分(php版)

AJAX 请求php页面

Web开发
AJAX 请求php页面

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PHP用户指南-cookies部分

PHP
PHP用户指南-cookies部分

jQuery Ajax文件上传(php)

Web开发
jQuery Ajax文件上传(php)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AJAX在PHP中的简单使用

Web开发
AJAX在PHP中的简单使用

php AJAX POST的使用实例代码

Web开发
php AJAX POST的使用实例代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何通过热键或者启动项进行手动备份与恢复电脑系统?

如何通过热键或者启动项进行手动备份与恢复电脑系统?

利用AJAX技术实现网页无刷新进度条显示

利用AJAX技术实现网页无刷新进度条显示
下拉加载更多内容 ↓