您的位置：首页 > 其它

ajax xml 实现数据交互 小例子

2015-07-18 17:20 585 查看

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>


<?php
header("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文档格式否确确

效果展示

打开时



查询后



最后

做技术，要认真，要踏实。就这样！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航