PHP中Ajax使用总结

PHP中Ajax处理总结:

Ajax的全称是“AsynchronousJavaScript And XML”,它不是一门新语言,而是一种新技术,它可以创建更好、更快及交互性更强的Web应用程序。Ajax使用了JavaScript脚本在Web客户端与Web服务端之间传递和接收数据,通过在幕后与服务器端进行数据交互,并不是每当用户做出改变时重载整个页面,Ajax可以使网页更快得响应。(技术讨论群:489451956(新)

 

一、Ajax的特性

1、基于JavaScript、XML、HTML及CSS的开放标准;

这些开放标准得了所有主要浏览器的支持,而且被很好的定义,所以它的兼容问题得到了很好的解决,另外,Ajax 独立于浏览器和平台,是一种跨平台跨浏览器的一门技术。

2、可替代传统的HTML表单提交

基于开放的标准,它的使用度已经很广泛,被很多开发人员所接受和熟悉,我们可以把大多的Web应用程序通过使用Ajax技术进行重写,来替代传统的HTML表单数据交互处理。

3、异步发送和接收数据,减少服务端请求信息量

Ajax是基于浏览器运行的,使用浏览器和服务端异步数据传递,使网页从服务端请求少许的数据,而不是整个页面数据,所以不论在响应速度、资源消耗及交互体验上都很优秀。

 

 

二、Ajax的使用

这里举个用户名字,实时请求服务端并将返回信息传递给前端现实例子,具体包括一个HTML、一个JavaScript及一个PHP,如下:

HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src="__PUBLIC__/htmls/js/jquery-1.8.3.min.js"></script>

<link rel="stylesheet"href="__PUBLIC__/htmls/css/usercenter/userlogin.css"/>

</head>

<body style="background-color:#ededed;">

   <form>

      名字:

      <input type="text"id="hint" onkeyup="showHint(this.value)">

   </form>

  

   <p>匹配提示: <span id="txtHint"></span></p>

</body>

</html>

 

JavaScript:

<script type="text/javascript">

   var xmlHttp = null;

   /*鼠标移开触发事件*/

   showHint= function(str) {

      if(str.length==0) {

         document.getElementById("account_hint").innerHTML="";

         return;

      }

      // 获得XMLHTTPRequest对象

      xmlHttp= GetXMLHTTPRequest();

      if(null == xmlHttp) {

         alert("Broswer is not support HTTPrequest!");

         return;

      }

     

      // 拼接url及参数

      var url="http://127.0.0.1/Study/Php/ajaxCheckAccount";

      url=url+"?param="+str;

      url=url+"&id="+Math.random();

     

      // 发送请求到服务器

      xmlHttp.onreadystatechange= stateChanged ;

      xmlHttp.open("GET",url,true);

      xmlHttp.send(null);

   };

  

   /*状态返回处理*/

   stateChanged= function(){

      if(xmlHttp.readyState == 4 ||xmlHttp.readyState == "complete") {

         document.getElementById("txtHint").innerHTML = xmlHttp.responseText;

      }

   };

  

   /*创建XMLHTTPRequest*/

   GetXMLHTTPRequest= function(){

      var xmlHttp = null;

     

      try {

         // Firefox, Opera 8.0+, Safari

         xmlHttp=new XMLHttpRequest();

         } catch (e) {

          // Internet Explorer

          try {

                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 6 中可用

              } catch (e) {

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //  Internet Explorer 5.5 及其后版本中可用

            }

       }

      return xmlHttp;

   };

  

</script>

 

PHP:

<?php

      // 该数组是从参考资料copy下来的

      $a[] = "Anna";

      $a[] = "Brittany";

      $a[] = "Cinderella";

      $a[] = "Diana";

      $a[] = "Eva";

      $a[] = "Fiona";

      $a[] = "Gunda";

      $a[] = "Hege";

      $a[] = "Inga";

      $a[] = "Johanna";

      $a[] = "Kitty";

      $a[] = "Linda";

      $a[] = "Nina";

      $a[] = "Ophelia";

      $a[] = "Petunia";

      $a[] = "Amanda";

      $a[] = "Raquel";

      $a[] = "Cindy";

      $a[] = "Doris";

      $a[] = "Eve";

      $a[] = "Evita";

      $a[] = "Sunniva";

      $a[] = "Tove";

      $a[] = "Unni";

      $a[] = "Violet";

      $a[] = "Liza";

      $a[] = "Elizabeth";

      $a[] = "Ellen";

      $a[] = "Wenche";

      $a[] = "Vicky";    

      // get the q parameter from URL

      $q= $_GET ["param"];

     

      // lookup all hints from array iflength of q>0

      if (strlen ( $q ) > 0) {

         $hint= "";

         for($i = 0; $i < count ( $a ); $i ++) {

            if (strtolower ( $q ) == strtolower ( substr ($a [$i], 0, strlen ( $q ) ) )) {

               if ($hint == "") {

                  $hint= $a [$i];

               }else {

                  $hint= $hint . " , ". $a [$i];

               }

            }

         }

      }

     

      // Set output to "nosuggestion" if no hint were found

      // or to the correct values

      if ($hint == "") {

         $response= "";

      } else {

         $response= $hint;

      }

     

      // return

      echo $response;

 

?>

 

简单描述下例子的过程,首先用户在浏览器输入框输入名字,每当用户键盘挺住时都会请求下服务端,以获得匹配的名字并返回,当然使用的是JavaScript脚本的XMLHTTPRequest(例子中对它进行了兼容处理)请求,及时很好可及时返回并填充指定页面内容,不需要刷新真个页面,具体的可查看代码中的注释。

 

效果如下:

 

 

注:

后面会对XML进行介绍总结。

 

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云水之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值