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+,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文档格式否确确
效果展示
打开时
查询后
最后
做技术，要认真，要踏实。就这样！
