ajax xml 实现数据交互 小例子
来源：互联网 发布：三维软件介绍 编辑：程序博客网 时间：2024/05/21 06:49
berfore:
虽然自己的方向一直是在Web上，但是自己总是急于求成，所以越是到后面，越发觉基础不牢固，导致有时在综合思考的一些问题寻找突破口的时候就难上加难。 所以在此告诫自己，做技术要认真，脚踏实地。做人做事都要脚踏实地。 只有这样，站的更稳，走的越坚强。
老规矩，学习类的内容都写在csdn上。
正题
ajax
什么是ajax呢
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所以现在大部分的网站 都是使用 ajax+xml 在后台实现数据交互。
前台通过 div 来更新页面。
就这样。为了加深理解，写了一个小例子
需求
search.html 为查询页面 选择指定产品，点击查询，然后会通过ajax向服务器发送查询信息，服务器返回xml数据。
html页面解析xml替换innerhtml显示返回结果
api.php
接受两种查询
第一种是接受参数c=list返回 产品名列表
第二种是接受c=search&pname=name返回每种产品的详细信息
写完了感觉没什么难的，不过其中写的时候有很多细节没有注意到。也感觉到了自己的js功底真是匮乏。
<!DOCTYPE html><html><head><meta charset="utf-8"><script language="javascript">window.onload=function(){ var xmlhttp=null; 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) { var xmlDoc=xmlhttp.responseXML; var elements = xmlDoc.getElementsByTagName("name"); for(var i=0;i<elements.length;i++) { var ele=elements[i].firstChild.nodeValue; var se=document.getElementById('product'); se.add(new Option(ele,ele)); } } } xmlhttp.open("GET","/api/api.php?c=list",true); xmlhttp.send();}function search(){ var xmlhttp=null; 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) { // var xmlDoc=xmlhttp.responseText; var xmlDoc=xmlhttp.responseXML; // <root><id>1</id><name>test</name><num>1</num><price>200</price></root> var id=xmlDoc.getElementsByTagName('id')[0].innerHTML; var name=xmlDoc.getElementsByTagName('name')[0].innerHTML; var num=xmlDoc.getElementsByTagName('num')[0].innerHTML; var price=xmlDoc.getElementsByTagName('price')[0].innerHTML; var res="" res+='id='+id+"<br/>"; res+='name='+name+"<br/>"; res+='num='+num+"<br/>"; res+='price='+price+"<br/>"; document.getElementById('result').innerHTML=res; } } var pname=document.getElementById('product').getElementsByTagName('option')[ document.getElementById('product').selectedIndex ].innerHTML; xmlhttp.open("GET","/api/api.php?c=search&pname="+pname,true); xmlhttp.send();}</script></head><body><form action="" style="margin-top: 15px;"><label>请选择一种产品:</label> <select name="product" id='product'><!-- <option value="test2">test2</option> --><input type="button" value="search" onclick="search();return false;" /><br/><hr/><br/><div id="result">这里显示结果</div></select></body></html><?phpheader("Content-type: text/xml; charset=utf-8"); /** * @authors:F001 * @blog: ev1l.cc *///api/api.php//class ArrayToXML{ /** * The main function for converting to an XML document. * Pass in a multi dimensional array and this recrusively loops through and builds up an XML document. * * @param array $data * @param string $rootNodeName - what you want the root node to be - defaultsto data. * @param SimpleXMLElement $xml - should only be used recursively * @return string XML */ public static function toXml($data, $rootNodeName = 'root', $xml=null) { // turn off compatibility mode as simple xml throws a wobbly if you don't. if (ini_get('zend.ze1_compatibility_mode') == 1) { ini_set ('zend.ze1_compatibility_mode', 0); } if ($xml == null) { $xml = simplexml_load_string("<?xml version='1.0' encoding='utf-8'?><$rootNodeName />"); } // loop through the data passed in. foreach($data as $key => $value) { // no numeric keys in our xml please! if (is_numeric($key)) { // make string key... // $key = "unknownNode_". (string) $key; $key='name'; } // replace anything not alpha numeric // $key = preg_replace('/[^a-z]/i', '', $key); // if there is another array found recrusively call this function if (is_array($value)) { $node = $xml->addChild($key); // recrusive call. ArrayToXML::toXml($value, $rootNodeName, $node); } else { // add single node. $value = htmlentities($value); $xml->addChild($key,$value); } } // pass back as string. or simple xml object if you want! return $xml->asXML(); }};$conn=mysql_connect('localhost','root','qtxz');if(!$conn){ die('can\'t connect to the mysql server');}mysql_selectdb('ajax');if(isset($_GET['c']) && $_GET['c']=='list'){ $sql='select name from product'; $rows=mysql_query($sql); $res=array(); while ($row=mysql_fetch_array($rows)) { array_push($res,$row['name']);}echo ArrayToXML::toXml($res);exit();}else if(isset($_GET['c']) && $_GET['c']=='search' && isset($_GET['pname'])){ $pname=$_GET['pname']; $sql="select * from product where name='".$pname."'"; $rows=mysql_query($sql); $res=mysql_fetch_assoc($rows); echo ArrayToXML::toXml($res);}mysql_close($conn);?>大体思路就是 前台一个简陋的 search.html
里面有select标签，当打开search.html的时候，会访问api.php?c=list 从服务器返回当前的产品列表,然后将每个产品add到select标签内，当点击查询的时候通过ajax产生形如api.php?c=search&pname=test，的请求返回有关该产品的详细信息xml， 通过解析xml 然后动态修改div id=result就可以显示返回的数据。
在var xmlDoc=xmlhttp.responseXML;时，多次遇到了返回xml为NUll但是如果改成responseText时还有数据的情况。总结一下，发现有以下几种原因。
1. 设置content type = text/xml
（本遇述问题由问题解决程序强制使用utf-8使用句header(“Content-Type: text/html;charset=UTF-8”)家已经知道）
2. 确定请求发送服务器并返
3. alert/检查 responseText候否看其些该信息（例xml信息）
4. 直接打浏览器打xml文档（浏览器输入请求页面能需要传递参数或者构建表单）浏览器告诉xml文档格式否确确
效果展示
打开时 
查询后
最后
做技术，要认真，要踏实。就这样！
0 0
- ajax xml 实现数据交互 小例子
- ajax与xml数据交互
- ajax通过xml交互数据
- Ajax实现xml文件数据插入数据库（二）--- ajax实现与jsp的数据交互
- Ajax实现xml文件数据插入数据库（二）--- ajax实现与jsp的数据交互
- nodejs+ajax实现数据交互
- 2.ajax数据交互xml和json
- spring mvc ajax json数据类型交互 小例子
- ajax获取新闻数据的小例子
- php +ajax +sql 实现数据交互
- Struts2 结合 Ajax 实现异步交互数据
- spring mvc ,Ajax实现数据交互
- Ajax、jquery实现前后台数据交互
- ajax+jquery实现简单的数据交互
- spring mvc+ajax实现数据交互
- prototype.js实现AJAX小例子
- Struts下实现ajax的小例子
- Struts下实现AJAX的小例子
- 黑马程序员——java基础——IO的学习总结
- sizeof,strlen,二级指针,gdb
- 如何在Windows下编译OpenSSL？
- BreezeJs使用
- redis源码分析 dict字典的实现和内部应用
- ajax xml 实现数据交互 小例子
- OC_属性
- java中的异常
- Spring定时任务的几种实现
- c++题目整理
- error: failed to push some refs【Linux】【Git】
- asp.net站点报错“对象的当前状态使该操作无效。”的解决办法
- 合并库命令
- RapidFloatingActionButton
