Ajax技术及应用实训报告
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
var options3 = {
element: "d3",
prop: "top",
begin: 50,
end: 200,
duration: 500
};
var ef3 = new Effect(options3);
var a1 = document.getElementById("a1");
a1.onclick = function() {
Ajax技术及应用实训报告
小组：八小组
学号：2012051602 03
班级：过程控制122班
姓名：曹玮
二零零四年五月十九日
实训报告
一、实训科目：javascript语言与Ajax技术及应用实训
二、实训时间：2014年3月10日——2014年3月21日
三、实训地点：兰州石化职业技术学院西区信控系实训基地四机房
var transport;
if (window.XMLHttpRequest) {
transport = new XMLHttpRequest();
} else {
try {
transport = new ActiveXObject("MSXML.XMLHTTP.6.0");
} catch (e) { }
oNewP.appendChild(oText);
document.body.appendChild(oNewP);
}
window.onfocus = function dd() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("浏览器取得了焦点!");
<h1>我的标题</h1>
</body>
······
3.事件处理运用
·浏览器中的事件
······
window.onload = function dd() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("浏览器载入了文档!");
ef1.start(); //启动第一个动画
}
}
</script>
</head>
<body>
<a id="a1" href="#">开始</a>
<div id="d1" class="demo">
<div class="demo">
动画效果
</div>
······
7.Ajax技术应用
······
window.onload = function() {
······
if (transport) {
transport.open("GET", "http://www.baidu.com", true);
transport.onreadystatechange = function() {
console.log("响应事件");
}
transport.send();
学习JavaScript这门课程也有两周了。匆忙之间,只是觉得时间过的真快,李老师一下就把这个课程给我们上完了.也觉得真没有什么好说的。不过,既然学完这个课程,总得有一些东西是我们要记住的.
一直以来都是在模糊之中度过,但从学习JAVASCRIPT一个礼拜之后,就觉得很有趣了.首先是由于JAVASCRIPT是用于网页一些特效以及表单验证的.对于这个,每次看到自己做出的那些脚本的时候,总有一些兴奋.其次,是由于JAVASCRIPT和网页结合起来,老感觉自己在网吧上网来着,一个一个的网页出现在电脑的屏幕上面.那不是一般的好玩.在次,在JAVASCRIPT的学习之中,我得到了同学和老师的极大帮助,这也提高了我对这个课程的兴趣.其实,学习虽说是自己的事情.但我觉得在我们碰到问题和困难的时候,能够得到同学和老师的及时帮助和指点,这一件很不错的事情.
step = 0;
ele.style[options.prop] = options.begin + "px";
},
end: function() {
step = totalSteps;
ele.style[options.prop] = options.end + "px";
}
};
······
var ef2 = new Effect(options2);
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"> </object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
window.onload = function () {
var cal = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal.render();
}······
6.动画效果网页的应用
·动画队列
······
.demo{
background-color:gray;
var intId;
function animate() {
var newValue = options.begin - (step * interval);
if (options.onStart && step == 0) options.onStart();
if (options.onStep) options.onStep();
color:White;
top:50px;
width:200px;
position:absolute;
}
</style>
<script type="text/javascript" >
function Effect(options) {
var ele = options.element;
if (typeof (ele) == "string") ele = document.getElementById(options.element);
}
······
<input type="button" onclick="setStyle()"
value="设置背景图片" />
······
八、实训结果：
网站完成情况：网站设计总体开发按规定完成、设计功能基本实现、生产网页文件并运行正确、网站在用户机浏览很流畅，没有浏览器限制。
九、实训心得：
主要总结实训后知识的得于失，该课程学习方法的思考，对实训课程的ຫໍສະໝຸດ Baidu议，实训过程中具体操作的所遇问题的解决办法等等。
if (!ele) return false;
var fps = 30;
var step = 0;
var totalSteps = options.duration / 1000 * fps;
var interval = (options.begin - options.end) / totalSteps;
alert("Hello,"+prompt("What's your name?")+"!");
if (confirm("Are you ok?"))
alert("Great!");
else
alert("oh,what's wrong?");
······
5.JavaScript库的应用
······
<link rel="stylesheet" type="text/css" href="calendar.css" />
<param name="Command" value="Maximize"> </object>
<object id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="/Close"> </object>
四、实训人员：指导教师：李模刚
学生：曹玮
五、实训目的：
通过该实训，让学生深入学习JavaScript，学会运用Ajax技术，了解Ajax技术应用，理解网站的设计方法，了解一个网站的开发过程，培养网站开发的相关经验。
六、实训要求：
开发出一个可发布实训作业网站，要求每个学生必须熟悉并读懂每个程序的源代码，每个源文件代码，熟悉每个网页界面，熟悉整个开发过程；运用JavaScript，Ajax技术，完成网站设计。设计说明书中的代码必须为实际调试过程中的源代码，界面等等。
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="calendar-min.js"></script>
<script type="text/javascript">
oNewP.appendChild(oText);
document.body.appendChild(oNewP);
}
······（焦点取消，自编）
<body onclick="dd">
······
4.浏览器对象模型的应用
·三种对话框使用
······
alert("Good Morning!");
prompt是一个询问框，它产生一个询问输入窗口，同时等待用户输入的结果，
Methods.stop();
}
}
var Methods = {
start: function() {
intId = setInterval(animate, 1000 / 30);
},
stop: function() {
clearInterval(intId);
},
reStart: function() {
if (step++ < totalSteps) {
ele.style[options.prop] = Math.ceil(newValue) + "px";
} else {
ele.style[options.prop] = options.end + "px";
if (options.onEnd) options.onEnd();
<body bgcolor="#FFFFFF" text="#ADFF2F ">
<tr><td>
<a href="index1.html">第一章例题讲解</a><br><br>
<a href="index2.html">第二章例题讲解</a><br><br>
<a href="index3.html">第三章例题讲解</a><br><br>
七、实训任务
1.面向对象程序设计实例
·用不同的方式创建Boolean对象的实例，并使用typeof操作符返回其类型。
······
var boolA =new Boolean();
var boolB =new Boolean(false);
······
document.write("boolA="+boolA+"类型："+typeof(boolA));
······
8.网站主页面设计
设计思路：设计采用首页与其他各章节连接的形式制作，使页面干净整齐，页面设有返回，上一页，背景图片、颜色等功能。
主页代码：
<html>
<head>
<title>过程控制122班03号曹玮</title>
<MARQUEE><h1>javascript语言与Ajax应用</h1></MARQUEE>
document.write("boolB="+boolB+"类型："+typeof(boolB));
······
</script>
······
小结：使用常见系统对象以及这些对象的属性和方法，创建对象，对象方法和属性的使用。
2.文档对象模型的应用
·文档结构树
······
<body>
<a href=" ">我的链接</a>
······
<MARQUEE><a href="zb.html"><h1>点击打开自编题</h1></a></MARQUEE>
<script type="text/javascript">
function setStyle() {
document.body.style.background='red url(4-6.gif)';
<input type=button value=最小化onclick=hh1.Click()>
<input type=button value=最大化onclick=hh2.Click()>
<input type=button value=关闭onclick=hh3.Click()><br><br>
element: "d3",
prop: "top",
begin: 50,
end: 200,
duration: 500
};
var ef3 = new Effect(options3);
var a1 = document.getElementById("a1");
a1.onclick = function() {
Ajax技术及应用实训报告
小组：八小组
学号：2012051602 03
班级：过程控制122班
姓名：曹玮
二零零四年五月十九日
实训报告
一、实训科目：javascript语言与Ajax技术及应用实训
二、实训时间：2014年3月10日——2014年3月21日
三、实训地点：兰州石化职业技术学院西区信控系实训基地四机房
var transport;
if (window.XMLHttpRequest) {
transport = new XMLHttpRequest();
} else {
try {
transport = new ActiveXObject("MSXML.XMLHTTP.6.0");
} catch (e) { }
oNewP.appendChild(oText);
document.body.appendChild(oNewP);
}
window.onfocus = function dd() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("浏览器取得了焦点!");
<h1>我的标题</h1>
</body>
······
3.事件处理运用
·浏览器中的事件
······
window.onload = function dd() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("浏览器载入了文档!");
ef1.start(); //启动第一个动画
}
}
</script>
</head>
<body>
<a id="a1" href="#">开始</a>
<div id="d1" class="demo">
<div class="demo">
动画效果
</div>
······
7.Ajax技术应用
······
window.onload = function() {
······
if (transport) {
transport.open("GET", "http://www.baidu.com", true);
transport.onreadystatechange = function() {
console.log("响应事件");
}
transport.send();
学习JavaScript这门课程也有两周了。匆忙之间,只是觉得时间过的真快,李老师一下就把这个课程给我们上完了.也觉得真没有什么好说的。不过,既然学完这个课程,总得有一些东西是我们要记住的.
一直以来都是在模糊之中度过,但从学习JAVASCRIPT一个礼拜之后,就觉得很有趣了.首先是由于JAVASCRIPT是用于网页一些特效以及表单验证的.对于这个,每次看到自己做出的那些脚本的时候,总有一些兴奋.其次,是由于JAVASCRIPT和网页结合起来,老感觉自己在网吧上网来着,一个一个的网页出现在电脑的屏幕上面.那不是一般的好玩.在次,在JAVASCRIPT的学习之中,我得到了同学和老师的极大帮助,这也提高了我对这个课程的兴趣.其实,学习虽说是自己的事情.但我觉得在我们碰到问题和困难的时候,能够得到同学和老师的及时帮助和指点,这一件很不错的事情.
step = 0;
ele.style[options.prop] = options.begin + "px";
},
end: function() {
step = totalSteps;
ele.style[options.prop] = options.end + "px";
}
};
······
var ef2 = new Effect(options2);
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"> </object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
window.onload = function () {
var cal = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal.render();
}······
6.动画效果网页的应用
·动画队列
······
.demo{
background-color:gray;
var intId;
function animate() {
var newValue = options.begin - (step * interval);
if (options.onStart && step == 0) options.onStart();
if (options.onStep) options.onStep();
color:White;
top:50px;
width:200px;
position:absolute;
}
</style>
<script type="text/javascript" >
function Effect(options) {
var ele = options.element;
if (typeof (ele) == "string") ele = document.getElementById(options.element);
}
······
<input type="button" onclick="setStyle()"
value="设置背景图片" />
······
八、实训结果：
网站完成情况：网站设计总体开发按规定完成、设计功能基本实现、生产网页文件并运行正确、网站在用户机浏览很流畅，没有浏览器限制。
九、实训心得：
主要总结实训后知识的得于失，该课程学习方法的思考，对实训课程的ຫໍສະໝຸດ Baidu议，实训过程中具体操作的所遇问题的解决办法等等。
if (!ele) return false;
var fps = 30;
var step = 0;
var totalSteps = options.duration / 1000 * fps;
var interval = (options.begin - options.end) / totalSteps;
alert("Hello,"+prompt("What's your name?")+"!");
if (confirm("Are you ok?"))
alert("Great!");
else
alert("oh,what's wrong?");
······
5.JavaScript库的应用
······
<link rel="stylesheet" type="text/css" href="calendar.css" />
<param name="Command" value="Maximize"> </object>
<object id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="/Close"> </object>
四、实训人员：指导教师：李模刚
学生：曹玮
五、实训目的：
通过该实训，让学生深入学习JavaScript，学会运用Ajax技术，了解Ajax技术应用，理解网站的设计方法，了解一个网站的开发过程，培养网站开发的相关经验。
六、实训要求：
开发出一个可发布实训作业网站，要求每个学生必须熟悉并读懂每个程序的源代码，每个源文件代码，熟悉每个网页界面，熟悉整个开发过程；运用JavaScript，Ajax技术，完成网站设计。设计说明书中的代码必须为实际调试过程中的源代码，界面等等。
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="calendar-min.js"></script>
<script type="text/javascript">
oNewP.appendChild(oText);
document.body.appendChild(oNewP);
}
······（焦点取消，自编）
<body onclick="dd">
······
4.浏览器对象模型的应用
·三种对话框使用
······
alert("Good Morning!");
prompt是一个询问框，它产生一个询问输入窗口，同时等待用户输入的结果，
Methods.stop();
}
}
var Methods = {
start: function() {
intId = setInterval(animate, 1000 / 30);
},
stop: function() {
clearInterval(intId);
},
reStart: function() {
if (step++ < totalSteps) {
ele.style[options.prop] = Math.ceil(newValue) + "px";
} else {
ele.style[options.prop] = options.end + "px";
if (options.onEnd) options.onEnd();
<body bgcolor="#FFFFFF" text="#ADFF2F ">
<tr><td>
<a href="index1.html">第一章例题讲解</a><br><br>
<a href="index2.html">第二章例题讲解</a><br><br>
<a href="index3.html">第三章例题讲解</a><br><br>
七、实训任务
1.面向对象程序设计实例
·用不同的方式创建Boolean对象的实例，并使用typeof操作符返回其类型。
······
var boolA =new Boolean();
var boolB =new Boolean(false);
······
document.write("boolA="+boolA+"类型："+typeof(boolA));
······
8.网站主页面设计
设计思路：设计采用首页与其他各章节连接的形式制作，使页面干净整齐，页面设有返回，上一页，背景图片、颜色等功能。
主页代码：
<html>
<head>
<title>过程控制122班03号曹玮</title>
<MARQUEE><h1>javascript语言与Ajax应用</h1></MARQUEE>
document.write("boolB="+boolB+"类型："+typeof(boolB));
······
</script>
······
小结：使用常见系统对象以及这些对象的属性和方法，创建对象，对象方法和属性的使用。
2.文档对象模型的应用
·文档结构树
······
<body>
<a href=" ">我的链接</a>
······
<MARQUEE><a href="zb.html"><h1>点击打开自编题</h1></a></MARQUEE>
<script type="text/javascript">
function setStyle() {
document.body.style.background='red url(4-6.gif)';
<input type=button value=最小化onclick=hh1.Click()>
<input type=button value=最大化onclick=hh2.Click()>
<input type=button value=关闭onclick=hh3.Click()><br><br>