Ajax异步刷新
一、Ajax获得String类型数据：
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/ajax/test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
二、Ajax获得XML类型数据
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
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)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
</body>
</html>
三、Ajax返回状态
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
</body>
</html>
四、Demo:
1.验证用户输入文本：
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action="">
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p>
</body>
</html>
2.下拉列表框：
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" style="margin-top:15px;">
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>
</body>
</html>
3.获取xml:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
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)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</div>
</body>
</html>
xml文件：
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>
4.附加：文本输入
<form>
First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
http://www.w3school.com.cn/ajax/
分享到：
相关推荐
**AJAX异步刷新**是一种在不重新加载整个网页的情况下，能够更新部分网页内容的技术。这一技术极大地提升了用户体验，因为它允许网页在后台与服务器通信，而不会打断用户的交互。AJAX（Asynchronous JavaScript and ...
本教程将通过一个具体的例子来讲解如何在ASP.NET环境中实现Ajax异步刷新。 首先，`Default2.aspx`和`Default.aspx`是ASP.NET中的两个网页文件，它们通常包含HTML、CSS和JavaScript代码，用于构建用户界面。`Default...
### Ajax页面局部异步刷新技术 #### 知识点概览 在现代Web开发中，异步刷新技术是一项非常重要的技术，它使得网页无需重新加载整个页面就能与服务器交互并更新部分数据。其中，最典型的技术就是Ajax（Asynchronous ...
Ajax异步刷新机制,对于网页制作是不可或缺的一种技术学习。
在“Ajax异步刷新的实现 带数据库”的主题中，我们将探讨如何利用Ajax技术配合SSH（Spring、Struts2、Hibernate）框架来实现在不刷新整个页面的情况下与数据库进行交互，更新页面内容。SSH框架是Java Web开发中常用...
在“SSH增删改查Ajax异步刷新”中，Ajax技术被用来实现实时的数据显示。例如，当用户执行添加、删除或修改操作时，可以通过Ajax向服务器发送请求，服务器处理完操作后返回结果，前端再通过JavaScript更新DOM...
在本案例中，我们讨论的主题是如何利用Ajax技术进行异步刷新，并且服务器端的C#一般处理程序（Generic Handler）返回一个DataTable对象。 Ajax的核心在于JavaScript的XMLHttpRequest对象，它提供了与服务器进行异步...
### AJAX异步刷新技术详解 #### 一、引言 在现代Web开发中，用户体验是决定网站或应用是否受欢迎的关键因素之一。传统的Web应用程序在处理用户请求时通常需要通过表单提交来完成，这种方式会导致整个页面重新加载...
Ajax异步无刷新验证码是一种常见的Web安全验证技术，它结合了Ajax（Asynchronous JavaScript and XML）与验证码（CAPTCHA）的特性，为用户提供更流畅、更友好的网页交互体验。在传统的网页验证过程中，用户每次提交...
总的来说，Ajax是构建现代Web应用的重要技术，它允许我们在不刷新页面的情况下与服务器进行实时交互，提高了用户体验。而Java作为后端语言，结合Ajax可以构建出高效、响应迅速的交互式应用。在开发过程中，合理利用...
我们使用jquery里面ajax方法实现，所有需要导入jquery的文件，然后在页面中引入该文件。
使用jQuery实现ajax
根据提供的文件信息，本文将详细解析如何在Cognos报表中通过Ajax技术实现局部刷新功能。这是一项重要的技术，能够显著提升用户界面的交互性和用户体验。 ### 一、Cognos与Ajax概述 #### 1. Cognos简介 Cognos是一...
我们使用jquery里面ajax方法实现，所有需要导入jquery的文件，然后在页面中引入该文件。
在网页开发中，"简单的Ajax异步验证，局部刷新"是一种常见的交互技术，它使得用户在无需刷新整个页面的情况下能够实时验证输入数据的有效性。这种技术极大地提升了用户体验，因为用户可以立即看到他们的输入是否符合...
总结来说，这个示例展示了如何利用ASP.NET、jQuery和AJAX实现异步刷新。通过监听用户输入事件，使用AJAX发送请求，然后在服务器端处理请求，最后将处理结果返回并更新页面，这一切都在不刷新页面的前提下完成，提高...
异步刷新是一种编程技术，主要用于改善用户界面的响应性和流畅性。在计算机程序中，特别是Web应用程序和桌面应用，异步操作是实现高效性能的关键。它允许程序在等待某些耗时操作（如网络请求或数据库查询）完成时，...
它通过JavaScript向后台发送异步请求，获取数据，并在客户端动态更新DOM（Document Object Model），从而实现页面的无刷新刷新。AJAX的核心是XMLHttpRequest对象，该对象允许JavaScript在后台与服务器进行通信。 **...
主要介绍了jQuery使用$.ajax进行异步刷新的方法,涉及jQuery实现ajax异步刷新实现数据交互的相关技巧,并提供了完整示例demo供读者下载参考,需要的朋友可以参考下