一个AJAX列子，通过读取后台数据库数据转换为xml格式进行输出
这几天把AJAX重新温习了，做了个列子，下面就把这个自己做的列子贴出来分享下，有不足的地方请各位童鞋指正，如有不好的，请文明发言，谢谢~
在写代码的过程中，遇到一个可能大家都会遇到的问题，就是responseXML.documentElement返回一个空值的情况，后面参考了很多解决方案，总算运行成功了。
结起来，有三个原因会导致返回xml时为null：
1. 那就是没有设置返回的内容格式，只要在write前添加Response.ContentType = "text/xml";就可以了
2. xml的内容格式不正确，可以通过将xml的内容输出，好好检查xml的格式是否正确
3.这是因为没有关闭，所以会输出页面所有的html标签，而不只是xml文件，所以会为空
//这是getuserinfo.aspx，读取后台数据库中数据，以xml的形式返回，数据库大家根据代码很快就能设计好吧
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data.SqlClient;
public partial class getuserinfo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(Request.QueryString["q"]))
{
Response.Redirect("getuserinfo.aspx");
}
else
{
Response.Expires = -1;
Response.ContentType = "text/xml";
Response.Charset = "UTF-8";
string str = "select * from custormer where id='" + Request.QueryString["q"] + "'";
SqlDataReader dr = DB.getdatareader(str);
while (dr.Read())
{
Response.Write("<?xml version='1.0' encoding='GB2312'?>");
Response.Write("<company>");
Response.Write("<compname>" + dr["companyname"] + "</compname>");
Response.Write("<contname>" + dr["contname"] + "</contname>");
Response.Write("<address>" + dr["address"] + "</address>");
Response.Write("<city>" + dr["city"] + "</city>");
Response.Write("<country>" + dr["country"] + "</country>");
Response.Write("</company>");
Response.End();//这句是关键，这是因为没有关闭，所以会输出页面所有的html标签，而不只是xml文件，所以会为空
}
}
}
}
//这是Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp = null;
function readyStateChangeHandle() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var xmlDoc = xmlHttp.responseXML.documentElement;
// alert(xmlDoc);测试
var companyname = document.getElementById("companyname");
var contactname = document.getElementById("contactname");
var address = document.getElementById("address");
var country = document.getElementById("country");
var city = document.getElementById("city");
try {
companyname.innerHTML = xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
contactname.innerHTML = xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
address.innerHTML = xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
country.innerHTML = xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
city.innerHTML = xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
}
catch (e) {
alert(e.message);
}
}
}
}
function ajaxRequest(str) {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "getuserinfo.aspx";
url += "?q=" + str;
url += "&id=" + Math.random();
xmlHttp.onreadystatechange = readyStateChangeHandle;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
<label>
选择客户：
<select name="id" onchange="ajaxRequest(this.value)">
<option value="1">1</option>
<option value="2 ">2</option>
<option value="3">3</option>
</select></label>
<br />
<b><span id="companyname"></span></b>
<br />
<span id="contactname"></span>
<br />
<span id="address"></span>
<br />
<span id="city"></span>
<br />
<span id="country"></span>
</body>
</html>