Ajax 学习笔记(1)
2007-06-07 11:14
405 查看
从今天开始学习Ajax,不知道自己能坚持多久写博客,呵呵!
以前看过Ajax的书,只是浏览,知道了它的大概意思,大概流程.前两天才真正的开始仔细的看.用的是Ajax开发精要那本书.
今天试验了一个简单的例子.
index.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch03--一个简单的例子</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
//按钮“开始计算”响应函数，判断输入域情况后调用send_request函数。
function doCaculate() {
var f = document.form1;
if((f.number_1.value!="")&&(f.number_2.value!="")) {
document.getElementById("feedback").innerHTML = "<br>正在计算，请稍后......";
send_request("process.jsp?number_1="+f.number_1.value+"&number_2="+f.number_2.value);
}
else if(f.number_1.value=="") document.getElementById("feedback").innerHTML = "乘数不能为空。";
else if(f.number_2.value=="") document.getElementById("feedback").innerHTML = "被乘数不能为空。";
}
var http_request = false;
//向服务器发起XMLHTTP请求。
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
var f = document.form1;
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var returnStr = http_request.responseText;
if(returnStr.indexOf("Error")==-1) {
f.result.value = returnStr;
document.getElementById("feedback").innerHTML = "";
}
else {
f.result.value = "";
document.getElementById("feedback").innerHTML = returnStr;
}
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>
</head>
<body><center>
<form action="process.jsp" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_self">
<table width="400" cellpadding="4" cellspacing="1" border="0">
<caption>简单乘法计算</caption>
<tr>
<td align="center">
<input type="text" name="number_1" size="10">
*
<input type="text" name="number_2" size="10">
=
<input type="text" name="result" size="10">
</td>
</tr>
<tr align="center">
<td>
<input type="button" name="Caculate" value="开始计算" onClick="doCaculate()">
<input type="reset" name="reset" value="重新计算">
</td>
</tr>
<tr><td align="center" height="25"><label id="feedback"> </label></td></tr>
</table>
</form>
</center>
</body>
</html>
process.jsp
---------------------------------------
<%@ page contentType="text/html; charset=gb2312"%>
<%
String number_1 = request.getParameter("number_1");
String number_2 = request.getParameter("number_2");
int num_1=0,num_2=0;
boolean status = true;
if(number_1!=null) {
try {
num_1 = Integer.parseInt(number_1);
}catch(Exception ex) {
status = false;
out.println("Error,乘数必须是整数。");
}
}
if(number_2!=null) {
try {
num_2 = Integer.parseInt(number_2);
}catch(Exception ex) {
status = false;
out.println("Error,被乘数必须是整数。");
}
}
if(status) out.println(num_1*num_2);
%>
一开始遇到一个问题,就是http_request.readyState的状态一直是0,所以一直试验不成功.后来才知道,Ajax的请求要在http方式运行才有效,我用的是本地连接,所以一直都不行.
改在Http下运行,可以了.
思考一个问题,http_request.responseText是怎么得到值的,看起来是out输出的值!不是太清楚!!
以前看过Ajax的书,只是浏览,知道了它的大概意思,大概流程.前两天才真正的开始仔细的看.用的是Ajax开发精要那本书.
今天试验了一个简单的例子.
index.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch03--一个简单的例子</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
//按钮“开始计算”响应函数，判断输入域情况后调用send_request函数。
function doCaculate() {
var f = document.form1;
if((f.number_1.value!="")&&(f.number_2.value!="")) {
document.getElementById("feedback").innerHTML = "<br>正在计算，请稍后......";
send_request("process.jsp?number_1="+f.number_1.value+"&number_2="+f.number_2.value);
}
else if(f.number_1.value=="") document.getElementById("feedback").innerHTML = "乘数不能为空。";
else if(f.number_2.value=="") document.getElementById("feedback").innerHTML = "被乘数不能为空。";
}
var http_request = false;
//向服务器发起XMLHTTP请求。
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
var f = document.form1;
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var returnStr = http_request.responseText;
if(returnStr.indexOf("Error")==-1) {
f.result.value = returnStr;
document.getElementById("feedback").innerHTML = "";
}
else {
f.result.value = "";
document.getElementById("feedback").innerHTML = returnStr;
}
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
</script>
</head>
<body><center>
<form action="process.jsp" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_self">
<table width="400" cellpadding="4" cellspacing="1" border="0">
<caption>简单乘法计算</caption>
<tr>
<td align="center">
<input type="text" name="number_1" size="10">
*
<input type="text" name="number_2" size="10">
=
<input type="text" name="result" size="10">
</td>
</tr>
<tr align="center">
<td>
<input type="button" name="Caculate" value="开始计算" onClick="doCaculate()">
<input type="reset" name="reset" value="重新计算">
</td>
</tr>
<tr><td align="center" height="25"><label id="feedback"> </label></td></tr>
</table>
</form>
</center>
</body>
</html>
process.jsp
---------------------------------------
<%@ page contentType="text/html; charset=gb2312"%>
<%
String number_1 = request.getParameter("number_1");
String number_2 = request.getParameter("number_2");
int num_1=0,num_2=0;
boolean status = true;
if(number_1!=null) {
try {
num_1 = Integer.parseInt(number_1);
}catch(Exception ex) {
status = false;
out.println("Error,乘数必须是整数。");
}
}
if(number_2!=null) {
try {
num_2 = Integer.parseInt(number_2);
}catch(Exception ex) {
status = false;
out.println("Error,被乘数必须是整数。");
}
}
if(status) out.println(num_1*num_2);
%>
一开始遇到一个问题,就是http_request.readyState的状态一直是0,所以一直试验不成功.后来才知道,Ajax的请求要在http方式运行才有效,我用的是本地连接,所以一直都不行.
改在Http下运行,可以了.
思考一个问题,http_request.responseText是怎么得到值的,看起来是out输出的值!不是太清楚!!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX 基础理论学习笔记
- JavaScript高级程序设计 XML、Ajax 学习笔记
- 学习笔记--Ajax
- 学习笔记---------------ajax
- loadrunner 学习笔记--AJAX
- 整理一下当年的学习笔记之：ajax请求json和普通项
- Angularjs学习笔记——Ajax服务（跨域）&&ng路由
- Ajax学习笔记整理
- Ajax学习笔记
- Ajax 学习笔记(2)
- ajax,json学习笔记（三）JSON和jquery实现ajax
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
- ASP.NET AJAX Extensions 学习笔记之下载安装
- ajax学习笔记----基础介绍
- ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)
- Ajax处理JSON数据参考【学习笔记】
- jquery学习笔记四：ajax
- Asp.Net Ajax 学习笔记13 Microsoft AJAX Library中异步通信层(摘自网络)
- 学习笔记：ajax使用规则讲解
- javascript dom 学习笔记（三），ajax