1.ajaxUtil.js
//定义并创建Ajax核心对象XMLHttpRequest
var xmlHttp ;
function createXMLHttpRequestObject()
{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}catch (e) {}
}
}
if (!xmlHttp) alert("Error creating the XMLHttpRequest object");
else return xmlHttp;
}
//装载字符串，将字符串组成XML的形式返回
function createXML(xmlString)
{
var xmldoc;
try{
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
if(!xmldoc) xmldoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
} catch(e){}
if(!xmldoc) {
return null;
}else {
xmldoc.async = "false";
xmldoc.loadXML(xmlString);
if(xmldoc.parseError.errorCode == 0) return xmldoc;
else return null;
}
}
2. ajaxDemo.jsp
<%@ page contentType="text/html;charset=GBK" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<% request.setAttribute("path",request.getContextPath()); %>
<html>
<head>
<title>jquery ajax demo</title>
<link rel="stylesheet" href="${path}/css/nrmcs.css">
<script src="${path}/js/jquery.js"></script>
<script src="${path}/js/ajaxUtil.js"></script>
<script>
/************ajax的jquery版本示例**************************/
/*
function check()
{
var user=document.all.userName.value;
var pass=document.all.password.value;
$.ajax({
url:"${path}/map/checkUser.action",
type:"post",
data:"userName="+user+"&password="+pass,
success:handleResponse,
async: false //异步或同步，默认为true同步，false为异步
});
alert("next"); //如果为异步，则必须等到handleResponse函数执行完毕后，才会执行alert("next");
}
function handleResponse(data){
//alert(data);
var xmlDoc= createXML(data); //将xml字符串转换为xml对象
var nodes=xmlDoc.selectNodes("datas/data");
var tab=document.getElementById("userTable");
var row,cell;
var node;
var id,name,pass;
for(var i=0;i<nodes.length;i++)
{
node=nodes[i];
id=node.selectSingleNode("id").text;
name=node.selectSingleNode("name").text;
pass=node.selectSingleNode("password").text;
row=tab.insertRow();
cell=row.insertCell();
cell.innerHTML=id;
cell=row.insertCell();
cell.innerHTML=name;
cell=row.insertCell();
cell.innerHTML=pass;
}
} */
/************ajax的原生版本示例**************************/
function check()
{
var user=document.all.userName.value;
var pass=document.all.password.value;
createXMLHttpRequestObject();
xmlHttp.open("POST","${path}/map/checkUser.action",false); //false为同步，true为异步
xmlHttp.onreadystatechange=handleResponse;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("userName="+user+"&password="+pass);
// alert("next"); //同步必须等到前面代码执行完后才能执行这一句
}
function handleResponseForIE(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//alert(xmlHttp.responseText);
var xmlDoc= createXML(xmlHttp.responseText); //将xml字符串转换为xml对象
var nodes=xmlDoc.selectNodes("datas/data");
var tab=document.getElementById("userTable");
var row,cell;
var node;
var id,name,pass;
for(var i=0;i<nodes.length;i++)
{
node=nodes[i];
id=node.selectSingleNode("id").text;
name=node.selectSingleNode("name").text;
pass=node.selectSingleNode("password").text;
row=tab.insertRow();
cell=row.insertCell();
cell.innerHTML=id;
cell=row.insertCell();
cell.innerHTML=name;
cell=row.insertCell();
cell.innerHTML=pass;
}
}
}
}
function handleResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
alert(xmlHttp.responseText);
var xmlDoc= createXML(xmlHttp.responseText); //将xml字符串转换为xml对象
var nodes=xmlDoc.getElementsByTagName("data");
for(var i=0;i<nodes.length;i++)
{
var node=nodes[i];
var id=node.getElementsByTagName("id")[0].text;
var name=node.getElementsByTagName("name")[0].text;
var password=node.getElementsByTagName("password")[0].text;
alert(id+" "+name+" "+password);
}
}
}
}
/*$(document).ready(
function(){
//$("#userTable").hide();
// $("#userTable").show();
var iWidth = document.body.clientWidth;
var iHeight = document.body.clientHeight;
var div=document.createElement("div");
document.body.appendChild(div);
div.id="myDiv";
div.style.position="absolute";
div.style.border="1px solid #a3bad9";
div.style.left=iWidth/2+298;
div.style.top=iHeight/2+204;
div.style.width="200";
div.style.height="100";
div.style.backgroundColor="#FFFFCC";
var span=document.createElement("div");
span.style.textAlign="right";
span.innerHTML="<a href='javascript:closeDiv()'>× </a>";
div.appendChild(span);
}
); */
function closeDiv(){
document.getElementById("myDiv").style.display="none";
}
</script>
</head>
<body>
userName:<input type="text" name="userName"><br>
password:<input type="password" name="password"><br>
<input type="submit" value="检查" onclick="check()">
<table id="userTable" border="1" width="50%" cellspacing="0" cellpadding="0">
</table>
</body>
</html>
分享到：
相关推荐
Ajax Pro 2 是一个强大的工具，它为.NET开发人员提供了更简单、更高效的途径来利用Ajax技术。通过直接在JavaScript中调用服务器端类，它简化了开发流程，提高了性能，并且增强了用户体验。配合`Web.Config`配置文件...
Ajax工具包通常会提供异步操作的接口，如设置回调函数，以便在请求完成后执行特定任务，或者使用Promise或async/await进行更优雅的异步控制流。 7. **缓存策略** 对于频繁请求的数据，工具包可能包含缓存策略，...
总结来说，ASP.NET AJAX开发工具包是一个强大的框架，它简化了在ASP.NET环境中构建富互联网应用的过程，通过提供一系列的控件和服务接口，让开发者能够更加专注于业务逻辑，而不是底层的通信细节。这个工具包结合...
Prototype是一个强大的JavaScript库，它为开发者提供了许多便利的工具，其中包括对Ajax操作的简化。在"使用prototype简化Ajax操作"这个主题中，我们将深入探讨Prototype库如何使Ajax变得更加简单易用。 首先，...
这个压缩包中的资源，"SSH+jQuery+json 实现的Ajax操作，绝对精华，代码简练清晰，绝对能看明白"，显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...
本文将详细介绍如何在后台引用AJAX函数，以VS2010 (VB.NET)作为开发工具，SQL Server 2000作为数据库进行演示。 首先，我们需要在项目中引入AJAX库。步骤S1涉及在项目中添加对`ajax.dll`的引用。这可以通过右键点击...
总结来说，这个“已封装Ajax操作类”是为了解决JavaScript中使用原生XMLHttpRequest对象进行Ajax请求的复杂性，提供了一个简洁、易用的接口，使得开发者能够更专注于业务逻辑，而不是底层通信的实现。通过学习和使用...
10. **请求预处理和后处理**：工具包可能提供钩子函数，允许在请求发送前或响应返回后执行自定义逻辑，如数据验证、权限检查等。 **应用场景** 1. **动态加载内容**：比如分页加载、无限滚动，只更新页面的一部分...
8. "Util.js"：这是一个可能包含实用函数的JavaScript文件，可能包括对AJAX操作的封装，是实际开发中常见的工具类库。 综上所述，学习和掌握AJAX的使用以及JavaScript的类库封装，不仅需要理解JavaScript的基本概念...
总结来说，这个“DOM Ajax操作的基本类库”是一个强大的工具，它将DOM操作和Ajax通信集成在一起，通过统一的API解决了跨浏览器的兼容性问题，提高了开发效率，并降低了维护成本。无论是在现代Web应用还是传统项目中...
**Ajax 构建工具箱指南源码解析** ...总结，Ajax构建工具箱提供了全面的示例和源码，是学习和实践Ajax技术的宝贵资源。通过深入学习和实践，开发者可以提升Web应用的用户体验，实现更加智能和高效的前端交互。
总结来说，JS操作Cookie的子键和jQuery调用Ajax方法是Web开发中常见的技术，它们使得我们能够高效地处理用户交互和数据交换。通过理解并熟练运用这些技巧，你可以创建更加动态和响应式的Web应用。在实际项目中，记得...
总结来说，`Ext.Ajax.request`在EXTJS中是进行Ajax通信的关键工具，通过调整其配置参数，我们可以实现同步请求。尽管同步请求有其应用场景，但应谨慎使用，以避免对用户体验造成负面影响。在EXTJS 2.x这样的老版本中...
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页的技术，这使得dhtmlxGrid能够在不打断用户操作的情况下获取并展示数据，极大地提高了交互性。 **Ajax应用** 在dhtmlx...
这篇自我总结涵盖了JavaScript函数的16到30个常用知识点，旨在帮助开发者更好地理解和应用这些功能强大的工具。 1. **数组操作** - `slice()`：用于从原数组中提取一个子数组并返回，不会改变原数组。 - `splice...
Prototype.js库提供了许多方便的函数，如Ajax.Request和Ajax.Updater，它们是执行Ajax请求的核心工具。在添加数据的场景中，我们可以创建一个Ajax.Request对象，指定URL（通常是服务器处理数据的端点）、HTTP方法...
总结，AjaxTest的实用简单封装主要涵盖了Ajax的基本操作，包括GET和POST请求，以及同步和异步提交方式。通过封装这些功能，开发者可以快速地在ASP.NET环境中构建交互性强、用户体验良好的网页应用。
总结来说，"数据操作后，页面alert提示例子2-ajax实现"是关于利用Ajax进行后台数据操作，并通过JavaScript处理服务器响应，以`alert()`显示操作结果的实例。通过理解和应用这样的技术，开发者可以提高网站的用户体验...
ASP.NET 是微软开发的一款用于构建Web应用程序的框架，它提供了丰富的功能和工具，使得开发者能够高效地构建动态、交互式的网站。在ASP.NET 2.0版本中，引入了Ajax技术，大大提升了用户体验，因为Ajax允许页面的部分...