AJAX/DOM在FF中工作,但在IE中不工作?[英] AJAX/DOM - Works in FF but not IE?

问题描述

大家好,

我对这一切都比较陌生,任何帮助将不胜感激.
我的目标是创建一些请求,以
1. 根据从数据库创建的 XML 搜索学生
2.如果学生多于一名,使用DOM列出所有学生
3. 最后,返回个别学生和注册.

下面是代码(抱歉,这会很长):
请求.php
------------------------------------------------------
<html>
<头>
<title>AJAX 请求测试</title>
<脚本语言="javascript">
<!--
函数 createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
其他{
ro = new XMLHttpRequest();
}
回滚;
}

http = createRequestObject();

函数 searchStudents() {
updateStatus(''show'', ''正在寻找学生...'', ​​''工作'');

var params = """;
var search_adno = document.getElementById(''search_adno'').value;
var search_forenames =
document.getElementById(''search_forenames'').value;
var search_surname = document.getElementById(''search_surname'').value;
var search_dob = document.getElementById(''search_dob'').value;

if (search_adno != "") 参数 += ''student_studentreference=''+
search_adno;

if (search_forenames != "") {
if (params != "") params += ''&student_forenames=''+ search_forenames;
其他参数 += ''student_forenames=''+ search_forenames;
}
if (search_surname != "") {
if (params != "") params += ''&student_surname=''+ search_surname;
else params += ''学生姓氏=''+ search_surname;
}
if (search_dob != "") {
if (params != "") params += ''&student_dob=''+ search_dob;
其他参数 += ''student_dob=''+ search_dob;
}

if (params != "") {
http.open(''post'', ''student.xml'');
//http.overrideMimeType(''text/xml'');
http.onreadystatechange = listStudents;
http.send(参数);
}
其他{
alert(''您必须输入搜索条件'');
}
}

函数列表学生(){
if(http.readyState == "4"){
updateStatus(''隐藏'');

var response = http.responseXML.documentElement;
var div = document.getElementById(''结果'');
var string = """;

var 结果 = response.getElementsByTagName(''学生'').length;

document.getElementById(''totalStudents'').innerHTML =
response.getElementsByTagName(''学生'').length;
document.getElementById(''results-outer'').style.display = "";

如果(结果 == 1){
getIndividualStudent(response.getElementsByTagName (''学生'')
[0].getAttribute(''id''));
}
否则如果(结果 0){
字符串 = ''<ul>'';

for (i=0; i字符串 += ''<li>'';
string += ''<a href="javas''+''cript:getIndividualStudent(\''''+
response.getElementsByTagName(''学生'')[i].getAttribute(''id'')
+''\'')">'';
字符串 += response.getElementsByTagName(''adno'')
[i].firstChild.nodeValue;
字符串 += '' - '';
string += response.getElementsByTagName(''forenames'')
[i].firstChild.nodeValue;
字符串 += '' '';
string += response.getElementsByTagName(''surname'')
[i].firstChild.nodeValue;
字符串 += ''</a>'';
字符串 += ''</li>'';
}

字符串 += ''</ul>'';

div.innerHTML = 字符串;
}
}
}

函数 getIndividualStudent(id) {
updateStatus(''show'', ''Getting Student...'', ​​''working'')
//隐藏旧的 Div's
document.getElementById(''search'').style.display = "none";
document.getElementById(''results-outer'').style.display = "none";
document.getElementById(''amendments'').style.display = "";

//获取学生并填充表单
http.open(''post'', ''individual.xml'');
http.onreadystatechange = populateStudentAmendmentForm;
http.send(''student_id=''+id);

}

函数 populateStudentAmendmentForm() {
如果(http.readyState == 4){
updateStatus(''show'', ''正在填充表单...'', ​​''working'')

var response = http.responseXML.documentElement;

document.getElementById(''a_id'').value =
response.getElementsByTagName(''学生'')[0].getAttribute(''id'');
document.getElementById(''a_forenames'').value =
response.getElementsByTagName(''forenames'')[0].firstChild.nodeValue;
document.getElementById(''a_surname'').value =
response.getElementsByTagName(''姓'')[0].firstChild.nodeValue;
document.getElementById(''a_adno'').value =
response.getElementsByTagName(''adno'')[0].firstChild.nodeValue;
document.getElementById(''a_dob'').value =
response.getElementsByTagName(''dob'')[0].firstChild.nodeValue;

document.getElementById(''a_address'').value =
response.getElementsByTagName(''地址'')[0].firstChild.nodeValue;
document.getElementById(''a_postcode'').value =
response.getElementsByTagName(''邮编'')[0].firstChild.nodeValue;
document.getElementById(''a_email'').value =
response.getElementsByTagName(''email'')[0].firstChild.nodeValue;
document.getElementById(''a_telephone'').value =
response.getElementsByTagName(''telephone'')[0].firstChild.nodeValue;
document.getElementById(''a_email'').value =
response.getElementsByTagName(''email'')[0].firstChild.nodeValue;
document.getElementById(''a_mobile'').value =
response.getElementsByTagName(''mobile'')[0].firstChild.nodeValue;

http.open(''post'', ''enrolments.xml'');
http.onreadystatechange = updateEnrolments;
http.send(''student_id=''+response.getElementsByTagName(''student'')
[0].getAttribute(''id''));
}
}

函数 updateEnrolments() {
如果(http.readyState == 4){
var response = http.responseXML.documentElement;
var div = document.getElementById(''结果'');
var string = """;

var results = response.getElementsByTagName(''enrolment'').length;

如果(结果 == 0){
//添加带有"无注册"的行
tbl = document.getElementById(''注册'');
var lastrow = tbl.rows.length;

var row = tbl.insertRow(lastrow);
var ne_cell = row.insertCell(0);

ne_cell.colSpan = 4;
var text = document.createTextNode(''没有当前注册...'');

ne_cell.appendChild(文本);
}
其他{
for (i=0; i{
var id = response.getElementsByTagName(''enrolment'')
[i].getAttribute(''id'');
var code = response.getElementsByTagName(''code'')
[i].firstChild.nodeValue;
var title = response.getElementsByTagName(''title'')
[i].firstChild.nodeValue;
var status = response.getElementsByTagName(''status'')
[i].firstChild.nodeValue;

addEnrolmentTableRow(id, code, title, status);
}
}

updateStatus(''隐藏'');
}
}

函数 addEnrolmentTableRow(id, 代码, 标题, 状态) {
tbl = document.getElementById(''enrolments'');
var lastrow = tbl.rows.length;

var 迭代 = lastrow - 1;

var row = tbl.insertRow(lastrow);

//添加隐藏ID
id_input = document.createElement(''input'');
id_input.type = ''隐藏'';
id_input.name = ''注册['' + lastrow + ''][id]'';
id_input.value = id;

document.getElementById(''amendments'').appendChild(id_input);

//编号单元格
var numbered_cell = row.insertCell(0);
var textNode = document.createTextNode(迭代);
numbered_cell.appendChild(textNode);

//添加带有输入框的代码单元
var code_cell = row.insertCell(1);

var code_input = document.createElement(''input'');
code_input.type = ''文本'';
code_input.name = ''注册['' + lastrow + ''][code]'';
code_input.size = 8;
如果(代码!= null){
code_input.value = 代码;
code_input.disabled = true;
}

code_cell.appendChild(code_input);

//添加带有输入框的标题单元格
var title_cell = row.insertCell(2);

var title_input = document.createElement(''input'');
title_input.type = ''文本'';
title_input.name = ''注册['' + lastrow + ''][title]'';
title_input.size = 15;
如果(标题!= null){
title_input.value = 标题;
title_input.disabled = true;
}

title_cell.appendChild(title_input);
//添加带有状态选择的状态单元格
var status_cell = row.insertCell(3);

var status_select = document.createElement(''select'');

status_select.name = ''enrolment['' + lastrow + ''][status]'';
status_select.options[0] = new Option(''Pre-Enrolled'', ''0'');
status_select.options[1] = new Option(''Current'', ''1'');
status_select.options[2] = new Option(''已完成'', ''2'');
status_select.options[3] = new Option(''撤回'', ''3'');
status_select.options[4] = new Option(''转移'', ''4'');
status_select.options[5] = new Option(''从未参加过'', ''W'');

开关(状态){
案例(状态="当前"):
status_select.selectedIndex = 1;
休息;
案例"已完成":
status_select.selectedIndex = 2;
休息;
案例"撤回":
status_select.selectedIndex = 3;
休息;
案例"转移":
status_select.selectedIndex = 4;
休息;
案例"从未参加":
status_select.selectedIndex = 5;
休息;
默认值:
status_select.selectedIndex = 0;
休息;
}

status_cell.appendChild(status_select);

//添加带输入框的日期单元格
var date_cell = row.insertCell(4);

var date_input = document.createElement(''input'');
date_input.type = ''文本'';
date_input.name = ''注册['' + lastrow + ''][日期]'';
date_input.size = 6;

date_cell.appendChild(date_input);
}

函数 updateStatus(showhide, text, image) {
if (showhide == "show")
document.getElementById(''status'').style.display=""";;
else if (showhide = "hide")
document.getElementById(''status'').style.display="n one";

status_image = document.getElementById(''status-image'');
status_text = document.getElementById(''status-text'');

if (text != null) status_text.innerHTML = text;
if (image != null) status_image.innerHTML = ''+''.gif';边界="0";alt ="状态图像"高度="16";/>'';
}
//-->
</脚本>

</头>
<身体>

<div id="状态">
<span id="状态图像"></span>
<span id="状态文本"></span>
</div>

<h1>学生修改表</h1>

<div id="搜索">
<h2>搜索学生</h2>
<表格边框="0"单元格间距="0";cellpadding="0">
<tr>
<caption>搜索学生</caption>
</tr>
<tr>
<td class="field">广告号:</td>
<td><输入类型="文本";名称="search_adno";id="search_adno"
大小="6";/></td>
</tr>
<tr>
<td class="字段">姓:</td>
<td><输入类型="文本";姓名="搜索姓氏"
id="搜索姓氏"/></td>
</tr>
<tr>
<td class="field">名字:</td>
<td><输入类型="文本";name="search_forenames"
id="search_forenames";/></td>
</tr>
<tr>
<td class="field">出生日期:</td>
<td><输入类型="文本";名称="search_dob";id="search_dob";/></td>
</tr>
<tr>
<td colspan="2"><输入类型="按钮"value="获取结果"
onClick="javascript:searchStudents();"/></td>
</tr>
</表>
</div>

<div id="结果-外部";style="display: none">
<h2>结果</h2>
<b>学生总数:</b<span id="totalStudents">&nbsp;</span>
<div id="结果">&nbsp;</div>
</div>

<form action="post.php";方法="发布";id="修改";样式="显示:
没有">
<输入类型="隐藏"名称="ID";id="a_id";/>
<h2>修正</h2>

<表格边框="0"单元格间距="2";cellpadding="1">
<tr>
<caption>个人资料</caption>
</tr>
<tr>
<td class="field">广告号:</td>
<td><输入类型="文本";名称="adno";id="a_adno";禁用/></td>
</tr>
<tr>
<td class="字段">姓:</td>
<td><输入类型="文本";名称="姓氏";id="a_surname";/></td>
</tr>
<tr>
<td class="field">名字:</td>
<td><输入类型="文本";名称="名字";id="a_forenames";/></td>
</tr>
<tr>
<td class="field">出生日期:</td>
<td><输入类型="文本";名称="dob";id="a_dob";/></td>
</tr>
</table>

<表格边框="0"单元格间距="2";cellpadding="1">
<tr>
<caption>联系方式</caption>
</tr>
<tr>
<td class="字段">地址:</td>
<td><textarea name="地址";id="a_address"></textarea></td>
</tr>
<tr>
<td class="field">邮政编码:</td>
<td><输入类型="文本";名称="邮政编码";id="a_postcode";/></td>
</tr>
<tr>
<td class="field">电子邮件:</td>
<td><输入类型="文本";名称="电子邮件";id="a_email";/></td>
</tr>
<tr>
<td class="字段">电话:</td>
<td><输入类型="文本";名称="电话";id="a_telephone";/></td>
</tr>
<tr>
<td class="field">手机:</td>
<td><输入类型="文本";名称="移动";id="a_mobile";/></td>
</tr>
</表>
<表格边框="0"单元格间距="0";单元格填充="0";id="注册">
<tr>
<caption>注册</caption>
</tr>
<tr>
<th>&nbsp;</th>
<th>代码</td>
<th>课程名称</td>
<th>状态</td>
<th>日期</td>
</tr>
</表>
<div align="right><a href="javascript:addEnrolmentTableRow();">添加
新注册</a></div>

<输入类型="提交"name="提交";值="更新";/>

</表格>

</正文>
</html>

XML 格式:

学生.xml
<学生>
<学生号="93000001061744>>
<adno>xxx</adno>
<名字>xxx</名字>
<姓>xxx</姓>
<title>先生</title>
<性别>男性</gender>
</学生>
<学号="93000001061745>>
<adno>xxx</adno>
<名字>新的</名字>
<姓氏>人</姓氏>
<title>先生</title>
<性别>男性</gender>
</学生>
</学生>

Enrolment.xml:
<报名>
<注册 id="11938913";学生="93000001061744">
<code>xxx</code>
<title>xxx</title>
<开始>03-OCT-00</开始>
<结束>15-JUN-00</结束>
<状态>已完成</状态>
</报名>
<注册ID="12128794"学生="93000001061744">
<code>xxx</code>
<title>HND Computing 全职</title>
<开始>03-OCT-00</开始>
<结束>15-JUN-00</结束>
<status>当前</status>
</报名>
<注册 id="12754637";学生="93000001061744">
<code>xxx</code>
<title>xxx</title>
<开始>03-OCT-00</开始>
<结束>15-JUN-00</结束>
<status>当前</status>
</报名>
</注册>

这一切在 Firefox 中运行良好,但在 IE 中它返回一个
''null''为null或者不是对象错误就行了:
var 结果 = response.getElementsByTagName(''学生'').length;

有什么明显的东西我失踪了还是我用错了
做法?我发现在 responseXML 上很难找到任何东西
任何地方!

提前致谢

推荐答案

ad**@areaix.co.uk 写道:
大家好,

我对这一切都比较陌生,任何帮助将不胜感激.
我的目标是创建一些请求,以
1. 根据从数据库创建的 XML 搜索学生
2.如果学生多于一名,使用DOM列出所有学生
3. 最后,返回个别学生和注册.
<截图>
>
这一切在 Firefox 中运行良好,但在 IE 中它返回一个
''null''为null或者不是对象错误就行了:
var results = response.getElementsByTagName(''学生'').length;

有什么明显的东西我失踪了还是我用错了
做法?我发现在 responseXML 上很难找到任何东西
任何地方!
确保您的 Content-Type HTTP 响应标头正确
(text/xml),FF不会太在意,即使这样
也会接受XML未设置.如果 Content-Type 不正确,IE 会将 XML 视为文本.

另请记住,您不能将响应 XML 中的元素添加到
IE中的页面DOM.

--
Ian Collins.

4 月 2 日 12:05,Ian Collins <ian-n...@hotmail.com 写道:
一个...@areaix.co.uk 写道:
大家好,
我对这一切都比较陌生,任何帮助将不胜感激.
我的目标是创建一些请求,以
1. 根据从数据库创建的 XML 搜索学生
2.如果学生多于一名,使用DOM列出所有学生
3. 最后,返回个别学生和注册.

<snippage>
这一切在 Firefox 中运行良好,但在 IE 中它返回一个
''null''为null或者不是对象错误就行了:
var results = response.getElementsByTagName(''student'').length;
有什么明显的东西我失踪了还是我用错了
做法?我发现在 responseXML 上很难找到任何东西
任何地方!

确保您的 Content-Type HTTP 响应标头正确
(text/xml),FF不会太在意,即使这样
也会接受XML未设置.如果 Content-Type 不正确,IE 会将 XML 视为文本.

另请记住,您不能将响应 XML 中的元素添加到
IE中的页面DOM.

--
伊恩·柯林斯.
有趣的是,我已经将 overrideMimeType(''text/xml'') 注释掉了
因为我刚开始的时候 IE 不喜欢它.我去不了
XML 文件来设置内容类型标头,这样可能会出现问题.
这会是问题的根源吗?


ad**@areaix.co.uk 写道:
函数 createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
其他{
ro = new XMLHttpRequest();
}
回滚;
}
这个功能真的不是最好的方法.不检查看看
它是什么浏览器,但检查浏览器是否支持对象
您正在尝试创建.MSIE 可能连一个都拿不到
对象在这里工作.

尝试这样的事情(来自 http://ajaxcookbook.org/xmlhttprequest/):

函数 createXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
返回新的 XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} 其他 {
throw new Error("不支持 XMLHttpRequest");
}
}

这不依赖于浏览器嗅探,这是您的代码出现的内容
正在做.

--
迪伦·帕里
http://electricfreedom.org |http://webpageworkshop.co.uk

以上观点不代表
我的猫.所有表达的意见完全是您自己的.

本文地址:https://www.itbaoku.cn/post/1050430.html