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>
分享到：
相关推荐
basePackage -js开发常用...ajax: ajax操作包括get post等方法 css: css的设置和获取 dom: dom元素的获取，事件的绑定等等 drag: 使页面中的元素可拖动 traverse: dom元素的遍历 url: url参数的获取 util: 常用的工具库
ajax操作-伪ajax（iframe） ajax操作-时机选择 文件上传（3种方式）-1 文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 博客系统示例预览 组合搜索组件 JSONP跨域...
函数 15 方法重载（Overloadjing）与重写（Overriding） 16 数组 17 总结 18 三、 常见关键字 20 四、 面向对象★★★★★ 21 五、 封装（面向对象特征之一）★★★★ 23 六、 继承（面向对象特征之一）★★★★ 25 ...
08 数学意义的函数与python中的函数 09 为何要有函数 10 函数返回值 11 可变长参数 第15章 01 上节课复习 02 全局变量与局部变量 03 风湿理论之函数即变量 04 函数递归 05 函数递归补充 第16章 01 上节课回顾 02...
3.4 调试工具--提升开发效率的利器 3.5 定位代码和调用堆栈 3.6 浏览器捕获异常 3.7 总结 第二部分 JavaScript核心 第4章 语言结构 4.1 JavaScript的基本文法 4.2 常量和变量 4.3 ...
Oracle中PL/SQL单行函数和组函数详解 mssql+oracle Oracle编程的编码规范及命名规则 Oracle数据库字典介绍 0RACLE的字段类型 事务 CMT DEMO（容器管理事务演示） 事务隔离性的一些基础知识 在组件之间实现事务和异步...
本书既考虑到实际开发中经常遇到的困惑和难题，也分析了解决问题的思路和方法，更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中，不知不觉具备开发真正商业项目的能力。 本书集...
本书既考虑到实际开发中经常遇到的困惑和难题，也分析了解决问题的思路和方法，更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中，不知不觉具备开发真正商业项目的能力。 本书集...
3.4 调试工具的总结 / 84 3.5 调试技巧 / 85 3.6 本章小结 / 89 第4章 ext js的基础架构 / 90 4.1 ext js框架的命名空间：ext / 90 4.1.1 概述 / 90 4.1.2 apply和applyif方法 / 90 4.1.3 不推荐的extend...
5.3.4 iui搜索支持ajax68 5.3.5 iui面板和行68 5.3.6 iui按钮70 5.3.7 iui属性70 5.4 创建iui后端71 5.5 其他iui技巧72 5.5.1 组织代码72 5.5.2 改善数据代码清单73 5.5.3 压缩iui74 5.5.4 选择...
o* g3 S 30.03 sku功能跳转 31.04 客户端js函数中的el表达式 32.05 异步加载spu列表数据# M& R, \7 \3 y z- w+ a% }( g" ^ 33.06 用复选框操作属性列表显示 D+ k( T; J. J" `2 u 34.07 属性参数的提交) O0 o, s0 X ...
首先列举一下本人总结的相关文章，这些覆盖了入门网络爬虫需要的基本概念和技巧：宁哥的小站-网络爬虫 当我们在浏览器中输入一个url后回车，后台会发生什么？比如说你输入http://www.lining0806.com/，你就会看到宁...
Parser是一种检查XML文档是否遵循DTD规范的工具软件。 XML的parser发展为两类：一种是"非确认类paeser"，只检测文档是否遵守XML语法规则，是否用元素标识建立了文档树。另一种是"确认类paeser"，它不但检测文档语法...
{1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}{24}{subsubsection.1.4.1.1} {1.4.2}格式化输出浮点数}{24}{...