PHP与Ajax的交互更新页面
本次主要学习ajax的概念以及怎么与PHP之间进行交互操作
1.什么是Ajax?
2.使用Ajax
①创建 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 .open("GET","index.html",true);
③AJAX - onreadystatechange 事件
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
- <span style="font-family:Comic Sans MS;"> xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- }
- }</span>
3.代码实例
你在百度搜索框中搜索时,你有没有发现当你输入关键词时,搜索框下方是不是有很多提示?当我输入"怎么"关键词,下方有很多提示!这些提示当然是百度服务器响应过来,但是数据传送到你的浏览器上显示时,页面并没有刷新。这样做,有几个好处 1.减轻服务器端的压力(部分数据更新) 2.提高用户交互性 ,今天我这个实例就是要实现类似效果,其实很简单,只有十几行代码,主要用到Ajax和php技术。文章最后我会提供实例下载地址。
- <span style="font-family:Comic Sans MS;">var xmlhttp;
- function showHint(str)
- {
- // 请求参数长度为0
- if (str.length==0)
- {
- document.getElementById("txtHint").innerHTML="";
- return;
- }
- // 创建XMLHttpRequest对象
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari 现代浏览器
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5 用户低版本ie
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- // 设置请求类型,请求地址,以及是否启用异步处理请求,大多数设置开启 true
- xmlhttp.open("GET","gethint.php?q="+str,true);
- // 将请求发送至服务器
- xmlhttp.send();
- // 处理onreadystatechange事件 我们规定当服务器响应已做好被处理的准备时所执行的任务
- xmlhttp.onreadystatechange=function()
- {
- // 4,200 不知道可以看看上面我贴出来的介绍
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
- }
- }
- }</span>
先创建XMLHttpRequest对象 ,再设置请求方法,请求地址,设置事件onreadystatechange,当这个事件触发后,会执行一个功能函数,就是把服务器返回回来的text数据(通过xmlhttp.responseText返回)通过js显示在html页面上。
按理说XML也属于文本,只是responseXML 属性返回的变量可以进行XML解析,很方便。下面我介绍个用rospongseXML属性得到数据并解析XML的例子,请看下面的代码:
- <span style="font-family:Comic Sans MS;"><html>
- <head>
- <script type="text/javascript">
- function loadXMLDoc()
- {
- var xmlhttp;
- var txt,x,i;
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- xmlDoc=xmlhttp.responseXML;
- txt="";
- x=xmlDoc.getElementsByTagName("title");
- for (i=0;i<x.length;i++)
- {
- txt=txt + x[i].childNodes[0].nodeValue + "<br />";
- }
- document.getElementById("myDiv").innerHTML=txt;
- }
- }
- xmlhttp.open("GET","/example/xmle/books.xml",true);
- xmlhttp.send();
- }
- </script>
- </head>
- <body>
- <h2>My Book Collection:</h2>
- <div id="myDiv"></div>
- <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
- </body>
- </html></span>
- <span style="font-family:Comic Sans MS;"><?php
- // 用名字来填充数组
- $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";
- //获得来自 URL 的 q 参数
- $q=$_GET["q"];
- //如果 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];
- }
- }
- }
- }
- // 如果未找到提示,则把输出设置为 "no suggestion"
- // 否则设置为正确的值
- if ($hint == "")
- {
- $response="no suggestion";
- }
- else
- {
- $response=$hint;
- }
- //输出响应
- echo $response;
- ?>
- </span>
HTML页面,JS脚本,PHP文件,在本次Demo中 三者关系可以用一张图来表示
PHP与Ajax的交互更新页面的更多相关文章
- 微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...
- 关于AJAX 的交互模型、交互流程及代码示范
AJAX = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- Ajax异步交互
一.简介 Ajax(Asynchronous JavaScript and XML).一般都写为Ajax. Ajax是与服务器交换数组并更新部分网页的艺术.最初的使用时2005中Google Sugg ...
- ajax 、ajax的交互模型、如何解决跨域问题
1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...
- 【Django入坑之路】Django与Query Ajax的交互
1:Jquery.ajax后端交互数据 $.ajax({ Url: /路由处理/, Type: GET/POST, #传送请求类型 Data: {user: “ XXXX”,pass:”XXXX”}, ...
- ajax用get刷新页面元素在IE下无效解决~~
总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- ajax 如何接受 PHP页面返回的json数组
JSON JSON(JavaScript Object Notation)是Douglas Crockford提出的.他是一个轻量级的数据交换格式,基于JavaScript对象字面量. 我们可以将之前 ...
随机推荐
- 一种奇特的DEDE隐藏后门办法
转自:http://www.91ri.org/6462.html 一种奇特的DEDE隐藏后门办法 单位某站用的dedecms,今天被某黑阔getshell了,提交到了wooyun. 为了还原黑阔入 ...
- linux下报错处理经验
这是训练中文vocab做的句子相似度的程序: /home/xbwang/torch/install/bin/luajit: /home/xbwang/newtextsimilarity/util/Vo ...
- XMLHttpRequest 2.0与FileReader接口的方法
jsonpd的实现: var jsonp = function (options) { var url = options.url, params = options.params || {}, ca ...
- 2016-2017 CT S03E05: Codeforces Trainings Season 3 Episode 5 (2016 Stanford Local Programming Contest, Extended) B
链接:http://codeforces.com/gym/101116 学弟做的,以后再补 #include <iostream> #include <stdio.h> #in ...
- 2016年10月18日 星期二 --出埃及记 Exodus 19:2
2016年10月18日 星期二 --出埃及记 Exodus 19:2 After they set out from Rephidim, they entered the Desert of Sina ...
- linux 开启wifi热点
1,在网络连接管理中创建一个wifi连接,点击 Add,然后选Wi-Fi 2,设置wifi热点名字.wifi接连名字 3,设置 Mode 选 Ad-hoc,其它默认. 4,在 Wi-Fi Securi ...
- Linux内核中的GPIO系统之(3):pin controller driver代码分析
一.前言 对于一个嵌入式软件工程师,我们的软件模块经常和硬件打交道,pin control subsystem也不例外,被它驱动的硬件叫做pin controller(一般ARM soc的datash ...
- MIME协议生成邮件
MIME协议生成一封复杂的邮件 MIME协议是对RFC822文档的升级和补充,用MIME协议能生成一封有文字.图片和附件的复杂邮件.首先要导入activation.jar和mail.jar.Mail. ...
- Python命令行解析argparse常用语法使用简介
查看原文:http://www.sijitao.net/2000.html python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argp ...
- CUBRID学习笔记 46 PREPARED set Do
cubrid的中sql查询语法PREPARED set Do c#,net,cubrid,教程,学习,笔记欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650 ...