PHP+ajaxで実現する県市連携機能-PHPチュートリアル-php.cn

この記事では、主にPHP+独自のajaxで実装された州と市の連携機能を紹介し、ajax連携の原理と実装方法、およびPHPとajaxを組み合わせて州と市を実現するための関連操作スキルを詳細に分析します。リンクドロップダウンメニュー機能。必要な友達はそれを行うことができます。参考までに、詳細は次のとおりです:

Ajax のコアは JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは Internet Explorer 5 で初めて導入され、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。

XMLHttpRequest XMLHttpRequest オブジェクトはほとんどのブラウザーに実装されており、ユーザーの現在の操作を中断することなくクライアントからサーバーにデータを渡すことができるシンプルなインターフェイスを備えています。 XMLHttpRequest を使用して送信されるデータは、名前から XML 形式のデータを示唆していますが、任意の形式にすることができます。

開発者は、他の多くの XML 関連テクノロジーにすでに精通しているはずです。 XPath は XML ドキュメント内のデータにアクセスできますが、XML DOM を理解する必要があります。同様に、XSLT は、XML データから HTML または XML を生成する最も簡単かつ迅速な方法です。多くの開発者はすでに Xpath と XSLT に精通しているため、AJAX がデータ交換形式として XML を選択するのは理にかなっています。 XSLT はクライアント側とサーバー側の両方で使用でき、JavaScript で記述された大量のアプリケーションロジックを削減できます。

Internet Explorerの場合:

インターネット5.0-6.0:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

ログイン後にコピー

インターネット7.0以降:

xmlhttp_request = new XMLHttpRequest();

ログイン後にコピー

自動判定コード:

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

ログイン後にコピー

実際のアプリケーションでは、多くの異なるバージョンのブラウザーと互換性を持たせるために、XMLHttpRequest クラスを作成するメソッドは通常、次の形式で記述されます:

try {
  if (window.ActiveXObject) {
    for (var i = 5; i; i--) {
      try {
        if (i == 2) {
          xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
          xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
          xmlhttp_request.setRequestHeader("Content-Type", "text/xml");
          xmlhttp_request.setRequestHeader("Charset", "gb2312");
        }
        break;
      } catch(e) {
        xmlhttp_request = false;
      }
    }
  } else if (window.XMLHttpRequest) {
    xmlhttp_request = new XMLHttpRequest();
    if (xmlhttp_request.overrideMimeType) {
      xmlhttp_request.overrideMimeType(&#39;text/xml&#39;);
    }
  }
} catch(e) {
  xmlhttp_request = false;
}

ログイン後にコピー

リクエストを送信を呼び出すことができます。 HTTP リクエストクラスの open() メソッドと send() メソッドは次のとおりです。

xmlhttp_request.open(&#39;GET&#39;,URL,true);
xmlhttp_request.send(null);

ログイン後にコピー

の最初のパラメータ

は、HTTP リクエストメソッド - GET、POST などのサーバーです。ご希望の通話方法をサポートします。 HTTP 仕様によれば、このパラメータは大文字にする必要があります。そうしないと、一部のブラウザ (Firefox など) がリクエストを処理できない可能性があります。 open()2 番目のパラメータ

は、リクエストされたページの URL です。

3 番目のパラメータ

は、リクエストが非同期モードであるかどうかを設定します。 TRUE の場合、JavaScript 関数はサーバーからの応答を待たずに実行を継続します。これは「AJAX」の「A」です。

サーバー応答

これは、この応答を処理するためにどの JavaScript 関数を使用するかを HTTP 要求オブジェクトに伝える必要があります。次のように、オブジェクトの onreadystatechange 属性に、使用する JavaScript 関数の名前を設定できます。

xmlhttp_request.onreadystatechange =FunctionName;

ログイン後にコピー

FunctionName は、JavaScript で作成した関数名です。 FunctionName( と記述しないように注意してください。 ) もちろん、onreadystatechange の後に JavaScript コードを直接作成することもできます。例:

xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};

ログイン後にコピー

まずリクエストのステータスを確認します。完全なサーバー応答を受信した場合にのみ、関数は応答を処理できます。 XMLHttpRequest は、サーバーの応答を判断するための readState 属性を提供します。

readyState

の値は次のとおりです: 0 (初期化されていない) 1 (ロード中)

2 (ロード完了)

3 (対話中)
4 (完了)

したがって、readyState の場合のみ=4 完全なサーバー応答を受信すると、関数はその応答を処理できます。具体的なコードは次のとおりです。

if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}

ログイン後にコピー

readyState=4 の場合、完全なサーバー応答が受信されている場合、関数は HTTP サーバー応答のステータス値をチェックします。完全なステータス値は、W3C ドキュメントに記載されています。 HTTP サーバーの応答値が 200 の場合は、状態が正常であることを示します。

サーバーから取得したデータを処理する

これらのデータを取得するには、2つの方法があります:

(1) サーバーの応答をテキスト文字列として返す

(2) 応答をXMLDocumentオブジェクトとして返す

アプリケーションアーキテクチャアプリケーションフレームワーク

(小さな例 1)--------demo5.php--値を渡すメソッドを取得

<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#" method="post">
  用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
  密码<input type="password" value="" name="upwd" id="upwd"/> <br />
  <input type="submit" value="注册"/> <br />
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 //全局对象
 var http = null;
 var uname = $("uname");
 uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
 // FF GOOLE IE 8 9 10
  http = new XMLHttpRequest();
 }else{
 //IE 6 7
  http = new ActiveXObject("Micrsoft.XMLHTTP");
 }
//2:准备url地址与参数 ?? bug
 var url = "demo51_do.php?uname="+$("uname").value;
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;GET&#39;,url,true);//异步
 http.send(null);
 };
 //5:接收服务器返回结果
 function result(){
//6:判断状态 接收完成 0 初始 1 发送 2处理 3 发送结果
//4:发送结果结束
//404 not found
//200 ok 正确响就能
//7:判断状态 数据正确
 if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseText;
 //9:显示结果
 var ms = "";
 if(rs == 1){
  ms = "己存在";
 }else{
  ms = "可以使用";
 }
 $("msg").innerHTML = ms;
 }
}
</script>
 </body>
</html>

ログイン後にコピー

demo51_do.php

<?php
header("content-type:text/html;charset=utf-8");
$uname = $_GET[&#39;uname&#39;];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = &#39;{$uname}&#39;";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
  if($row[0] == 1){
   echo "1";//己存在
  }else{
   echo "0";//不存在可以使用
  }
}
mysql_free_result($rs);
mysql_close($link);
?>

ログイン後にコピー

(小さな例 2)

Post 値の転送メソッド Demon6.php

<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#" method="post">
  用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
  密码<input type="password" value="" name="upwd" id="upwd"/> <br />
  <input type="submit" value="注册"/> <br />
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
var http = null;
var uname = $("uname");
uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
  http = new XMLHttpRequest();
 }else{
  http = new ActiveXObject("Microsoft.XMLHTTP");
 }
//2:准备url地址与参数
 var url = "demo6_do.php";
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;POST&#39;,url,true);
 http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 http.send("uname="+$("uname").value);
};
//5:接收服务器返回结果
function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseText;
 var ms = "";
 if(rs == 1){
  ms = "己存在";
 }else{
  ms = "可以使用";
 }
 //9:显示结果
 $("msg").innerHTML = ms;
}
}
</script>
 </body>
</html>

ログイン後にコピー

demo6_do.php

<?php
header("content-type:text/html;charset=utf-8");
$uname = $_POST[&#39;uname&#39;];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = &#39;{$uname}&#39;";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
  if($row[0] == 1){
   echo "1";//己存在
  }else{
   echo "0";//不存在可以使用
  }
}
mysql_free_result($rs);
mysql_close($link);
?>

ログイン後にコピー

(小さな例 3)----xml

demo7 .php

<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#">
  省
  <select name="sel" id="sel">
    <option value=&#39;0&#39;>--请选择--</option>
    <option value=&#39;1&#39;>--河北--</option>
    <option value=&#39;2&#39;>--河南--</option>
    <option value=&#39;3&#39;>--广东--</option>
  </select>
  市
  <select name="city" id="city">
    <option value=&#39;0&#39;>--请选择--</option>
  </select>
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 var http = null;
 var sel = $("sel");
 sel.onchange = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
 http = new XMLHttpRequest();
 }else{
 http = new ActiveXObject("Microsoft.XMLHTTP");
 }
//2:准备url地址与参数
 var url = "demo7_do.php?shen="+$("sel").value;
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;GET&#39;,url,true);
 http.send(null);
 };
 //5:接收服务器返回结果
 function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
 if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseXML;
 var citys = rs.getElementsByTagName("city");
 for(var i = 0;i < citys.length;i++){
  var o = document.createElement("option");
  o.value = ""+(i+1);
  o.text = citys[i].firstChild.data;
  $("city").add(o,null);
 }
 //9:显示结果
 }
 }
</script>
 </body>
</html>

ログイン後にコピー

demo7_do.php

<?php
header("content-type:text/xml;charset=utf-8");
$shen = $_GET[&#39;shen&#39;];
if($shen == "1"){
 $city = "<root><city>石家庄</city><city>保定</city><city>沧州</city></root>";
}else if($shen == "2"){
 $city = "<root><city>郑州</city><city>新乡</city><city>登封</city></root>";
}else if($shen == "3"){
 $city = "<root><city>东莞</city><city>中山</city><city>广州</city></root>";
}
echo $city;
?>

ログイン後にコピー