php综合web开发(6)

来源:互联网 发布:网络主播面试什么条件 编辑:程序博客网 时间:2024/05/23 19:18
本博客介绍了进行php综合web开发需要的技术与方法。

Ajax技术

Ajax的含义是异步的JavaScript和XML,使用内置在JavaScript中的方法从后台在浏览器与服务器间传递数据。

使用XMLHttpRequest:

需要确保代码适用所有的主浏览器:
<script>  function ajaxRequest()  {    try // Non IE Browser?    {   // Yes      var request = new XMLHttpRequest()    }    catch(e1)    {      try // IE 6+?      {   // Yes        request = new ActiveXObject("Msxml2.XMLHTTP")      }      catch(e2)      {        try // IE 5?        {   // Yes          request = new ActiveXObject("Microsoft.XMLHTTP")        }        catch(e3) // There is no AJAX Support        {           request = false        }      }    }    return request  }</script>

XMLHttpRequest对象的属性:
onreadystatechange——指定一个当对象的readyState属性改变时要被调用的事件处理函数
readyState——报告请求状态的一个整数属性,0=未初始化,1=加载,2=已加载,3=交互,4=完成
responseText——由服务器按文本格式返回的数据
responseXML——由服务器按XML格式返回的数据
status——由服务器返回的HTTP状态代码
statusText——由服务器返回的HTTP状态文本

XMLHttpRequest的方法:
abort()——放弃当前请求
getAllreseponseHeaders()——将所有的标题返回为一个字符串
getResponseHeader(param)——将param的值返回为一个字符串
open(‘method’,’url’,’asynch’)——指定HTTP方法使用、目标URL及是否同步处理请求
send(data)——用指定HTTP方法向目标服务器发送data
setRequestHeader(‘param’,’value’)——用一个param/value对设置一个标题

实例:
urlpost.html:

<!DOCTYPE html><html> <!-- urlpost.html -->  <head>    <title>AJAX Example</title>  </head>  <body style='text-align:center'>    <h1>Loading a web page into a DIV</h1>    <div id='info'>This sentence will be replaced</div>    <script>      params  = "url=amazon.com/gp/aw"        request = new ajaxRequest()      request.open("POST", "urlpost.php", true)      request.setRequestHeader("Content-type",        "application/x-www-form-urlencoded")      request.setRequestHeader("Content-length", params.length)      request.setRequestHeader("Connection", "close")      request.onreadystatechange = function()      {        if (this.readyState == 4)        {          if (this.status == 200)          {            if (this.responseText != null)            {              document.getElementById('info').innerHTML =                this.responseText            }            else alert("Ajax error: No data received")          }          else alert( "Ajax error: " + this.statusText)        }      }      request.send(params)      function ajaxRequest()      {        try        {          var request = new XMLHttpRequest()        }        catch(e1)        {          try          {            request = new ActiveXObject("Msxml2.XMLHTTP")          }          catch(e2)          {            try            {              request = new ActiveXObject("Microsoft.XMLHTTP")            }            catch(e3)            {              request = false            }          }        }        return request      }    </script>  </body></html>

Ajax处理的服务器部分:

<?php // urlpost.php  if (isset($_POST['url']))  {    echo file_get_contents('http://' . SanitizeString($_POST['url']));  }  function SanitizeString($var)  {    $var = strip_tags($var);    $var = htmlentities($var);    return stripslashes($var);  }?>

使用Ajax GET请求代替POST:

<!DOCTYPE html><html> <!-- urlget.html -->  <head>    <title>AJAX Example</title>  </head>  <body style='text-align:center'>    <h1>Loading a web page into a DIV</h1>    <div id='info'>This sentence will be replaced</div>    <script>      nocache = "&nocache=" + Math.random() * 1000000      request = new ajaxRequest()      request.open("GET", "urlget.php?url=amazon.com/gp/aw" + nocache, true)      request.onreadystatechange = function()      {        if (this.readyState == 4)        {          if (this.status == 200)          {            if (this.responseText != null)            {              document.getElementById('info').innerHTML =                this.responseText            }            else alert("Ajax error: No data received")          }          else alert( "Ajax error: " + this.statusText)        }      }      request.send(null)      function ajaxRequest()      {        try        {          var request = new XMLHttpRequest()        }        catch(e1)        {          try          {            request = new ActiveXObject("Msxml2.XMLHTTP")          }          catch(e2)          {            try            {              request = new ActiveXObject("Microsoft.XMLHTTP")            }            catch(e3)            {              request = false            }          }        }        return request      }    </script>  </body></html>

响应GET请求:

<?php // urlget.php  if (isset($_GET['url']))  {    echo file_get_contents("http://".sanitizeString($_GET['url']));  }  function sanitizeString($var)  {    $var = strip_tags($var);    $var = htmlentities($var);    return stripslashes($var);  }?>

发送XML请求:

<?php // xmlget.php  if (isset($_GET['url']))  {    header('Content-Type: text/xml');    echo file_get_contents("http://".sanitizeString($_GET['url']));  }  function sanitizeString($var)  {    $var = strip_tags($var);    $var = htmlentities($var);    return stripslashes($var);  }?>

请求html:

<!DOCTYPE html><html> <!-- xmlget.html -->  <head>    <title>AJAX Example</title>  </head>  <body>    <h1>Loading a web page into a DIV</h1>    <div id='info'>This sentence will be replaced</div>    <script>      nocache = "&nocache=" + Math.random() * 1000000      url     = "rss.news.yahoo.com/rss/topstories"      out     = "";      request = new ajaxRequest()      request.open("GET", "xmlget.php?url=" + url + nocache, true)      request.onreadystatechange = function()      {        if (this.readyState == 4)        {          if (this.status == 200)          {            if (this.responseText != null)            {              titles = this.responseXML.getElementsByTagName('title')              for (j = 0 ; j < titles.length ; ++j)              {                out += titles[j].childNodes[0].nodeValue + '<br>'              }              document.getElementById('info').innerHTML = out              }            else alert("Ajax error: No data received")          }          else alert( "Ajax error: " + this.statusText)        }      }      request.send(null)      function ajaxRequest()      {        try        {          var request = new XMLHttpRequest()        }        catch(e1)        {          try          {            request = new ActiveXObject("Msxml2.XMLHTTP")          }          catch(e2)          {            try            {              request = new ActiveXObject("Microsoft.XMLHTTP")            }            catch(e3)            {              request = false            }          }        }        return request      }    </script>  </body></html>

XML文档:

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0">  <channel>    <title>RSS Feed</title>    <link>http://website.com</link>    <description>website.com's RSS Feed</description>    <pubDate>Mon, 11 May 2020 00:00:00 GMT</pubDate>    <item>      <title>Headline</title>      <guid>http://website.com/headline</guid>      <description>This is a headline</description>    </item>    <item>      <title>Headline 2</title>      <guid>http://website.com/headline2</guid>      <description>The 2nd headline</description>    </item>  </channel></rss>
0 0