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文档格式否确确
效果展示
打开时
查询后
最后
做技术，要认真，要踏实。就这样！
扫一扫
5306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
