PHP与Ajax的交互更新页面

PHP与Ajax的交互更新页面

本次主要学习ajax的概念以及怎么与PHP之间进行交互操作

1.什么是Ajax？

国内翻译常为“阿贾克斯”和阿贾克斯足球队同音，AJAX 是一种用于创建快速动态网页的技术，他不是新语言，而是一种使用现有标准的新方法。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这样就可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.使用Ajax

XMLHttpRequest 是 AJAX 的基础，用于和服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）

①创建 XMLHttpRequest 对象

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象为了适应所有的现代浏览器 你可以加一个判断来实例化这个对象

[javascript] view plaincopyprint?

  1. var xmlhttp;
  2. if (window.XMLHttpRequest)
  3. {
  4. // code for IE7+, Firefox, Chrome, Opera, Safari
  5. xmlhttp=new XMLHttpRequest();
  6. }
  7. else
  8. {
  9. // code for IE6, IE5
  10. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  11. }
② 向服务器发送请求

我们使用 XMLHttpRequest 对象的 open() 和 send() 方法 如下：
XMLHttpRequest .open("GET","index.html",true);

XMLHttpRequest .send();

③AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

[javascript] view plain copy

print?

  1. <span style="font-family:Comic Sans MS;">          xmlhttp.onreadystatechange=function()
  2. {
  3. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  4. {
  5. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  6. }
  7. }</span>

3.代码实例

你在百度搜索框中搜索时，你有没有发现当你输入关键词时，搜索框下方是不是有很多提示？当我输入"怎么"关键词，下方有很多提示！这些提示当然是百度服务器响应过来，但是数据传送到你的浏览器上显示时，页面并没有刷新。这样做，有几个好处 1.减轻服务器端的压力(部分数据更新) 2.提高用户交互性 ，今天我这个实例就是要实现类似效果，其实很简单，只有十几行代码，主要用到Ajax和php技术。文章最后我会提供实例下载地址。

ajax.js

[javascript] view plain copy

print?

  1. <span style="font-family:Comic Sans MS;">var xmlhttp;
  2. function showHint(str)
  3. {
  4. // 请求参数长度为0
  5. if (str.length==0)
  6. {
  7. document.getElementById("txtHint").innerHTML="";
  8. return;
  9. }
  10. // 创建XMLHttpRequest对象
  11. if (window.XMLHttpRequest)
  12. {// code for IE7+, Firefox, Chrome, Opera, Safari 现代浏览器
  13. xmlhttp=new XMLHttpRequest();
  14. }
  15. else
  16. {// code for IE6, IE5 用户低版本ie
  17. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  18. }
  19. // 设置请求类型,请求地址，以及是否启用异步处理请求，大多数设置开启 true
  20. xmlhttp.open("GET","gethint.php?q="+str,true);
  21. // 将请求发送至服务器
  22. xmlhttp.send();
  23. // 处理onreadystatechange事件 我们规定当服务器响应已做好被处理的准备时所执行的任务
  24. xmlhttp.onreadystatechange=function()
  25. {
  26. // 4,200 不知道可以看看上面我贴出来的介绍
  27. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  28. {
  29. document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  30. }
  31. }
  32. }</span>

先创建XMLHttpRequest对象 ，再设置请求方法，请求地址，设置事件onreadystatechange，当这个事件触发后，会执行一个功能函数，就是把服务器返回回来的text数据(通过xmlhttp.responseText返回)通过js显示在html页面上。

当服务器返回的是文本数据你就需要用responseText属性，返回的是XML数据你就可以使用responseXML 属性
按理说XML也属于文本，只是responseXML 属性返回的变量可以进行XML解析，很方便。下面我介绍个用rospongseXML属性得到数据并解析XML的例子，请看下面的代码：

[javascript] view plain copy

print?

  1. <span style="font-family:Comic Sans MS;"><html>
  2. <head>
  3. <script type="text/javascript">
  4. function loadXMLDoc()
  5. {
  6. var xmlhttp;
  7. var txt,x,i;
  8. if (window.XMLHttpRequest)
  9. {// code for IE7+, Firefox, Chrome, Opera, Safari
  10. xmlhttp=new XMLHttpRequest();
  11. }
  12. else
  13. {// code for IE6, IE5
  14. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15. }
  16. xmlhttp.onreadystatechange=function()
  17. {
  18. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  19. {
  20. xmlDoc=xmlhttp.responseXML;
  21. txt="";
  22. x=xmlDoc.getElementsByTagName("title");
  23. for (i=0;i<x.length;i++)
  24. {
  25. txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  26. }
  27. document.getElementById("myDiv").innerHTML=txt;
  28. }
  29. }
  30. xmlhttp.open("GET","/example/xmle/books.xml",true);
  31. xmlhttp.send();
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <h2>My Book Collection:</h2>
  37. <div id="myDiv"></div>
  38. <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
  39. </body>
  40. </html></span>

这是 W3school的例子  你会发现代码里是向 http://www.w3school.com.cn//example/xmle/books.xml 这个地址发送GET请求，然后用xmlDoc=xmlhttp.responseXML 来接收XML数据，接着解析出books.XML文档里所有的title标签，这样就可以解析出书籍名称。是不是很简单很方便！

我们Demo是要实现一个百度搜索时有相关提示的效果，上面的Ajax,js 只是一个请求，接收数据的中间件，后台php得到ajax请求的数据后返回你想要的数据给Ajax，我们再通过js更改前端HTML的代码，客户就可以看到百度的那种效果，而网页并没有刷新。php代码如下：

[php] view plain copy

print?

  1. <span style="font-family:Comic Sans MS;"><?php
  2. // 用名字来填充数组
  3. $a[]="Anna";
  4. $a[]="Brittany";
  5. $a[]="Cinderella";
  6. $a[]="Diana";
  7. $a[]="Eva";
  8. $a[]="Fiona";
  9. $a[]="Gunda";
  10. $a[]="Hege";
  11. $a[]="Inga";
  12. $a[]="Johanna";
  13. $a[]="Kitty";
  14. $a[]="Linda";
  15. $a[]="Nina";
  16. $a[]="Ophelia";
  17. $a[]="Petunia";
  18. $a[]="Amanda";
  19. $a[]="Raquel";
  20. $a[]="Cindy";
  21. $a[]="Doris";
  22. $a[]="Eve";
  23. $a[]="Evita";
  24. $a[]="Sunniva";
  25. $a[]="Tove";
  26. $a[]="Unni";
  27. $a[]="Violet";
  28. $a[]="Liza";
  29. $a[]="Elizabeth";
  30. $a[]="Ellen";
  31. $a[]="Wenche";
  32. $a[]="Vicky";
  33. //获得来自 URL 的 q 参数
  34. $q=$_GET["q"];
  35. //如果 q 大于 0，则查找数组中的所有提示
  36. if (strlen($q) > 0)
  37. {
  38. $hint="";
  39. for($i=0; $i<count($a); $i++)
  40. {
  41. if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
  42. {
  43. if ($hint=="")
  44. {
  45. $hint=$a[$i];
  46. }
  47. else
  48. {
  49. $hint=$hint." , ".$a[$i];
  50. }
  51. }
  52. }
  53. }
  54. // 如果未找到提示，则把输出设置为 "no suggestion"
  55. // 否则设置为正确的值
  56. if ($hint == "")
  57. {
  58. $response="no suggestion";
  59. }
  60. else
  61. {
  62. $response=$hint;
  63. }
  64. //输出响应
  65. echo $response;
  66. ?>
  67. </span>

HTML页面，JS脚本，PHP文件，在本次Demo中 三者关系可以用一张图来表示

首先用户在HTML页面输入关键词触发(onkeyup事件)js脚本，js脚本获取你输入的内容把它发给后端服务器(PHP)做出反应，然后返回相应结果给js脚本，最后js脚本把内容显示在HTML页面上。

源码奉上DOWNLOAD ！！！！

转载请保留原文地址：http://blog.csdn.net/manymore13/article/details/10049379

时间： 2024-07-28 22:35:37

PHP与Ajax的交互更新页面的相关文章

spring mvc 和ajax异步交互完整实例(转自CSDN） 附下载地址

spring mvc 和ajax异步交互完整实例 spring MVC 异步交互demo: demo下载地址:http://download.csdn.net/download/quincylk/9521375 1.jsp页面: [java] view plain copy print? <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

struts2+jquery 实现ajax无刷新更新数据

前几天为了实现一个struts 的 ajax无刷新更新数据的例子,发现网上资料很少,很多已经过时或者链接都失效了 不过整合他们的资料,加上自己的研究,终于实现了效果 要求:1.各个学院提交学生数据到服务器,要求ajax 无刷新更新数据, 2.服务器端返回"更新成功"的提示窗口: 3.之后,使用jquery 更新input输入框的value值,为实现jquery 打印页面局部数据做准备. 此处使用struts2的第二种方法,(修改struts 配置文件,增加ajax package 的方

Ajax方法实现登录页面

Note: ajax技术 不用刷新页面,做局部刷新不用form表单,因为不需要提交,通过JQuery控制必须要有id如果要用ajax可以用JQuery也可以用js写,推荐JQuery 因为简单,直接引入JQuery包 js和JQuery是不能操作数据库的,如果需要处理数据库还需要用php语言 JQuery中不能直接嵌php代码,所以需要创建一个新的页面来写php代码JQuery里面就需要传递数据过去,提交到php页面处理 1.输入用户名,密码后点击登录.输入正确跳转页面,输入错误出现提示对话框

ajax异步交互梳理

最近在学习ajax,开始的时候感觉步骤有些混乱,老是记不住,自己梳理了下,觉得很好玩,就顺便记下来. ajax异步交互的步骤: 1.创建XMLHttpRequest核心对象 2.与服务器建立连接(open) 3.向服务器端发送请求(send) 4.接收服务器端的响应数据onreadystatechange 如同生意场上一样,A公司(客户端)有事情求B公司(服务器端)帮忙,于是 1.先在内部选定了一个主题XMLHttpRequest(创建核心对象), 2.委托open,与位于url地址的B公司接洽

易轩网络更新页面————————2014.12.13发布

易轩网络更新页面: 最新更新动态: ★易轩★改软件标题工具—)—)豪华版              出炉! 工具大小:52.0 MB(若大于该大小则视为病毒文件处理) 工具功能:更改你想要更改软件的标题(则运行时的名称) 工具版本:v1.0.0.0 工具是否达标:是 工具是否报毒:暂未测试(若大小一致却依然报毒,请添加信任或关闭杀毒软件) 工具下载地址:http://yunpan.cn/cfxEAPKpPxzfg  提取码 ba30 工具作者:易轩 联系方式:邮箱:[email protecte

Ajax滚动加载页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>  <m

ajax 异步交互

<script>     $(function(){         $("#sub").click(function () {             $.ajax({                 url: 'CheckPvUv.php',                 data: {                     act:'login',                     un:$("#un").val(),          

关于ansible基础入门和功能实现教程的更新页面

最近发现MDT推出去的系统的有不同问题,其问题就不说了,主要是策略权限被域继承了.比如我们手动安装的很多东东都是未配置壮态,推的就默认为安全壮态了,今天细找了一下,原来把这个关了就可以了. 关于ansible基础入门和功能实现教程的更新页面

ajax用get刷新页面元素在IE下无效解决~~

总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Internet 临时文件的选项改为每次访问网页时也可以 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数