总有人把ajax搞得异常复杂，其实蛮简单的，给新手一个信心，以下是一个简单的例子，通过ajax来加载其它url的内容。
ajax.html，主页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="ajax.js"></script>
<style type="text/css">
#previewWin{
background-color:#FF9;
widht:400px;
height:100px;
padding:5px;
position:absolute;
visibility:hidden;
top:10px;
left:10px;
border:1px #CC0 solid;
clip:auto;
overflow:hidden;
}
</style>
</head>
<body>
直接用浏览器打开是看不到ajax请求的，需要放到服务器目录下才可以哦。
如有问题QQ：45886484
[list]
[*][url=test.html]test.html[/url]
[*][url=test2.html]test2.html[/url]
[*][url=http://www.baidu.com]百度[/url]ajax不能跨域，所以这里得不到百度的页面
[/list]
<div id="previewWin"></div>
</body>
</html>
test.html，用来被主页面加载的内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
这里是test.html的内容，可以被读取 <br>
</body>
</html>
ajax.js，加载内容的js
window.onload=initAll;
var xhr=false;
var xPos,yPos;
function initAll(){
var allLinks=document.getElementsByTagName("a");
for(var i=0;i<allLinks.length;i++){
allLinks[i].onmouseover=showPreview;
allLinks[i].onmouseout=hidePreview;
}
}
function showPreview(evt){
getPreview(evt);
return false;
}
function hidePreview(){
document.getElementById("previewWin").style.visibility="hidden";
}
function getPreview(evt){
if(evt){
var url=evt.target;
}else{
evt=window.event;
var url=evt.srcElement;
}
xPos=evt.clientX;
yPos=evt.clientY;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
if(window.ActiveXObject){
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
if(xhr){
xhr.onreadystatechange=showContents;
xhr.open("GET",url,true);
xhr.send(null);
}else{
alert("不能发送ajax请求");
}
}
function showContents(){
var preWin=document.getElementById("previewWin");
if(xhr.readyState==4){
if(xhr.status==200){
preWin.innerHTML=xhr.responseText;
}else{
preWin.innerHTML="ajax请求出错";
}
preWin.style.top=parseInt(yPos)+2+"px";
preWin.style.left=parseInt(xPos)+2+"px";
preWin.style.visibility="visible";
preWin.onmouseout=hidePreview;
}
}
分享到：
相关推荐
结合上述步骤，一个简单的Ajax读取页面内容的例子如下： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.html', true); xhr.onreadystatechange = function() { if (xhr.readyState ==...
在"自己写的最简单Ajax例子"中，我们可以看到两个简单的实例，适合初学者入门学习。 首先，我们来详细讲解一下Ajax的核心概念： 1. 异步通信：Ajax的核心特性就是异步，这意味着在发送请求后，浏览器不会等待...
**描述：“自己做的最简单的AJAX 读取一个数据文件 显示在页面”** 这个描述表明，我们有一个简单的AJAX应用，它的功能是读取一个外部数据文件，然后将获取的数据动态地展示在网页上。这通常涉及到以下几个关键步骤...
1. **利用URL参数传递**：最简单的页面间传值方法是通过URL查询字符串。在超链接或表单提交中，我们可以把参数附加到URL后面，例如`跳转</a>`。在目标页面(child.html)中，可以通过`window.location.search`获取这些...
"最简单的Ajax HTML"可能包含以下基本结构： ```html <!DOCTYPE html> function makeAjaxRequest() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 &...
它允许网页在不刷新整个页面的情况下，通过JavaScript向服务器发送异步请求，获取并更新部分页面内容，提高了用户体验。 在这个最简单的例子中，我们可能会经历以下步骤： 1. **HTML页面**：创建一个简单的HTML...
总的来说，这个简单的Ajax例子展示了如何通过JavaScript与服务器进行异步通信，以及如何将返回的数据动态地更新到页面上。对于初学者来说，理解这个基本流程是学习Ajax的关键。随着深入学习，你还可以了解更多的高级...
这个"一个最简单的AJAX例子"很可能是用来展示如何使用AJAX来动态获取和更新网页内容的基础教程。让我们深入了解一下AJAX的核心概念及其工作原理。 首先，AJAX的关键在于异步性，这意味着用户可以继续在网页上进行...
总结起来，"最简单的 Ajax" 示例展示了如何使用JavaScript和ASP构建一个基础的Ajax通信系统，允许客户端与服务器进行无刷新的数据交互。这种技术在现代Web应用中非常常见，可以提高页面的响应速度和用户体验。
在这个"Ajax最简单的例子"中，我们将探讨Ajax的基本使用方法以及其工作原理。 Ajax的工作原理主要涉及以下几个步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，Ajax的核心是XMLHttpRequest对象。它是...
### 最简单 AJAX 实现原理与应用 #### 一、引言 在当今互联网技术日新月异的发展背景下，Ajax（Asynchronous JavaScript and XML）作为一项关键的前端技术，被广泛应用于提升网页应用的交互性和用户体验。本文将...
在探讨“ajax最简单范例”这一主题时，我们首先需要理解AJAX（Asynchronous JavaScript and XML）的基本概念及其在Web开发中的应用。AJAX是一种用于创建更快、更交互式Web应用程序的技术，它允许在不重新加载整个...
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术使得用户可以与网页进行交互而不必等待...
1. **AJAX简介**：AJAX允许在不刷新整个页面的情况下，与服务器交换数据并局部更新页面内容。这大大提升了用户体验，使网页看起来更加流畅。 2. **jQuery的$.ajax()方法**：它是jQuery中实现AJAX的核心函数。通过...
总的来说，"简单的Ajax应用"涵盖了Web开发中的重要一环，即如何利用Ajax技术实现无刷新的页面更新，提高用户交互体验。通过理解并掌握这些知识点，开发者可以构建出更高效、更友好的Web应用程序。
在“ajax 简单实例，读取asp动态数据”这个实例中，我们将探讨如何使用Ajax与ASP（Active Server Pages）服务器端脚本进行交互，以获取并显示动态生成的数据。ASP是一种微软开发的服务器端脚本环境，用于创建动态...
在本例中，Ajax 被用来实现一个简单的用户登录验证功能。用户在`login.html`页面输入用户名和密码，点击“检查用户名”按钮，触发`checkUser()`函数。这个函数首先创建一个XMLHttpRequest对象，它是Ajax的核心，负责...
本实例将讲解如何简单实现一个AJAX调用，使得用户能够在不离开当前页面的情况下获取并显示所需信息。 首先，我们来看`index.php`，这是前端页面，它包含HTML结构以及JavaScript代码来发起AJAX请求。HTML部分可能...
在"uploaddemo"这个压缩包中，可能包含了一个简单的JSP文件上传和AJAX获取JSON数据的示例项目。项目可能包括JSP页面、Servlet类、HTML/JavaScript代码以及数据库相关的配置文件。通过分析和运行这个示例，开发者可以...
DWR (Direct Web Remoting) 是一个开源的Java框架，它允许在Web应用程序中实现Ajax（Asynchronous JavaScript and XML）技术，使得Web页面能够与服务器进行异步通信，无需刷新整个页面即可更新部分数据。DWR简化了...