一 代码
index.php
<!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=gb2312" />
<title>通过XMLHttpRequest对象读取HTML文件，并且输出读取结果</title>
</head>
<script>
var xmlHttp; //定义XMLHttpRequest对象
function createXmlHttpRequestObject(){
//如果在internet Explorer下运行
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp=false;
}
}else{
//如果在Mozilla或其他的浏览器下运行
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
xmlHttp=false;
}
}
//返回创建的对象或显示错误信息
if(!xmlHttp)
alert("返回创建的对象或显示错误信息");
else
return xmlHttp;
}
function ReqHtml(){
createXmlHttpRequestObject();
xmlHttp.onreadystatechange=StatHandler; //判断URL调用的状态值并处理
xmlHttp.open("GET","text.html",true); //调用text.html
xmlHttp.send(null);
}
function StatHandler(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElementById("webpage").innerHTML=xmlHttp.responseText;
}
}
</script>
<body>
<!--创建超级链接-->
<a href="#" onclick="ReqHtml();">通过XMLHttpRequest对象请求HTML文件</a>
<!--通过div标签输出请求内容-->
<div id="webpage"></div>
</body>
</html>
text.html
<!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=gb2312" /> <title>无标题文档</title> </head> <body> <div align="center"><img src="images/shopping.jpg" width="803" height="684" /> </div> </body> </html>
二 运行结果
相关推荐
这个压缩包中的示例程序很可能包含了一个HTML文件和一个JSON文件，HTML文件通过JavaScript读取并显示JSON文件的内容。学习这个示例可以帮助你理解如何在实际项目中实现HTML与JSON的交互，提升网页动态数据加载的能力...
从提供的文件信息中，...以上知识点覆盖了文件中提到的XMLHttpRequest对象的使用、数据编码和解码、Servlet技术、以及网页的前端技术等。这些知识点在开发动态网页和Web应用时非常重要，它们是实现现代Web交互的基础。
1. **创建XMLHttpRequest对象**： - 首先，需要创建一个`XMLHttpRequest`对象来发送HTTP请求。这个对象提供了与服务器交互的能力，允许我们获取远程资源，如XML文件。 ```javascript if (window.XMLHttpRequest) ...
2. **创建FileReader对象**：接下来，创建一个`FileReader`对象并调用其`readAsText()`方法（如果文件是文本格式）或`readAsBinaryString()`方法（如果文件是二进制格式），以异步方式读取文件内容。 3. **处理读取...
如果需要跨浏览器解决方案，可以考虑使用`XMLHttpRequest`或`fetch API`来异步读取文件，然后使用`Blob`和`FileReader` API进行处理和显示，但这已经超出了题目所描述的范围。 总的来说，这个示例是一个关于如何...
综上所述，JS读取本地XML文件涉及到多种技术和API，包括`FileReader`、`XMLHttpRequest`、`ActiveXObject`、拖放以及文件输入控件。不同的浏览器有不同的兼容性和限制，开发者需要根据实际需求和目标浏览器选择合适...
1. 创建一个HTML文件（如deme.html），在其中包含一个文件输入控件： ```html <!DOCTYPE html> <html> <title>AJAX读取本地文本文档 <div id="contentDisplay"></div> <script src="app.js"></script> </...
文件切割上传的核心技术主要包括Blob对象、FileReader API和XMLHttpRequest Level 2。Blob对象代表二进制大型对象，可以用来处理存储在浏览器中的非结构化数据。FileReader API则允许我们在浏览器环境中读取文件内容...
2. Blob 和 File 对象：在读取文件之前，我们需要先获取到文件对象。在上述示例中，`e.target.files[0]`就是File对象，它代表用户选择的文件。File对象提供了关于文件的信息，如名称、大小和类型。 3. Blob URL：...
这段代码使用了XMLHttpRequest对象（通常称为AJAX）来异步读取`content.txt`的内容。当文件加载完成后，通过修改`<marquee>`标签的`innerHTML`属性，将文本文件的内容显示出来。这样，用户在本地IE浏览器中打开`...
3. **FormData对象**：用于封装表单数据，包括上传的文件，通过XMLHttpRequest发送到服务器。 4. **进度条显示**：`progress`事件可以监听文件上传进度，实时更新进度条，提高用户反馈。 5. **拖放功能**：HTML5...
JavaScript中读取XML文件首先需要创建一个XMLHttpRequest对象，这是异步通信的基础。XMLHttpRequest对象允许JavaScript与服务器进行通信，无需刷新整个页面。创建实例的方法如下： ```javascript var xhr = new ...
1. 创建XMLHttpRequest对象：这是Ajax的核心，它允许JavaScript与服务器进行异步通信。在JavaScript中，我们可以这样创建一个实例： ```javascript var xhr = new XMLHttpRequest(); ``` 2. 设置请求的类型和URL：...
因此解决了浏览器，创建文件队象的差异性，IE使用ActiveOBject，非IE使用XMLHttpRequest，但是此时非IE文件队象在操作对象时候即便是支持file协议，但是onreadystatechenge方法中的一些请求方法与相应状态码是HTTP...
- 使用`FileReader`对象来读取文件。`FileReader`提供了多种方法，如`readAsText`、`readAsDataURL`和`readAsArrayBuffer`，根据需要选择合适的方法。 ```javascript const reader = new FileReader(); reader....
在这个过程中，关键在于使用XMLHttpRequest对象和FormData对象处理客户端的上传进度，以及在JSP中处理服务器端的文件接收和响应。通过这样的技术组合，即使面对大文件，也能提供稳定的上传体验。
3. **XMLHttpRequest Level 2 (XHR2)**: XHR2扩展了原生的XMLHttpRequest对象，支持发送和接收Blob和FormData，使得非同步的文件上传成为可能。通过监听`progress`事件，我们可以获取到上传进度，并更新界面的进度条...
再者，HTML5还引入了File API，允许开发者对选取的文件进行读取、操作和分析，比如预览图片、检查文件类型等，而无需服务器的参与。这对于验证用户上传的文件格式、大小等限制非常有用。 关于安全性，HTML5文件上传...
【标题】"已编译的 HTML ...综上所述，这个压缩包文件提供了关于JSP脚本、JavaScript和Ajax的参考资料，特别是XMLHttpRequest对象的使用，这对于Web开发者来说是非常有价值的资源，可以帮助他们更高效地进行网页开发。
接下来，我们需要使用XMLHttpRequest对象创建一个新的请求实例。通常，我们会设置`open()`方法，指定HTTP方法（如POST或PUT）、URL以及是否异步执行。为了上传文件，我们通常使用POST请求，并设置`enctype`属性为`...