大家好,好久没有上来写博客了,最近用到了点Ajax东东,好久没有弄了,需要来复习一下。
把写的东西晒出来大家分享一下。
主要是用ajax请求Servlet容器,采用了两种方式,一种是纯Ajax不依赖任何框架,另一种是Prototype框架。
下面是一些主要代码,希望对大家能有所帮助,如有问题可以 email me:dsj177@163.com。
一。使用原生的Ajax(即不使用任何框架)
1.发送请求:
function startRequest(mypara) {
var url = "MyServlet?paraName="mypara;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
// 初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
req.open("GET",url, true);
// 每次 readyState 属性改变的时候调用的事件句柄函数
req.onreadystatechange = complete;
// 发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。
req.send(null);
}
}
2.接收返回的文本或xml,用js处理
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var result = req.responseText;
alert(result);
var target = document.getElementById("output");
// 将返回文本添加到如下div中
target.innerHTML = result;
// js处理返回文本
alert(target.id);
var gallery = document.getElementById("img-gallery");
gallery.style.display="none";
var dynamic = document.createElement("div");
var returnDiv = document.createElement("div");
returnDiv.appendChild(document.createTextNode("return paihang"));
dynamic.id="img-dynamic";
var strs = result.split(",");
for(k=0;k<strs.length;k++){
var img = document.createElement("img");
img.src="images/"+strs[k];
img-dynamic.appendChild(img);
}
target.appendChild(returnDiv);
target.appendChild(dynamic);
var table = document.createElement("table");
var strs = result.split(";");
for(i=0;i<strs.length;i++){
var tr = document.createElement("tr");
var childStrs = strs[i].split(",");
for(j=0;j<childStrs.length;j++){
var td = document.createElement("td");
td.appendChild(document.createTextNode(childStrs[j]));
tr.appendChild(td);
}
table.appendChild(tr);
}
var p = document.createElement("p");
p.appendChild(document.createTextNode(result));
target.appendChild(p);
}
}
}
二。使用prototype框架:
1.发送请求:
var myAjax;
(1).一般的请求发送方式,不能够处理返回值带有js脚本的响应:
function startRequest(myName){
var url = "PicServlet";
var pars ="myName="sujun;
myAjax = new Ajax.Request(
url,
{method:"get",parameters:pars,onComplete:showResponse}
);
}
(2).特殊请求,可以处理带有js脚本的响应:
function startRequest(myName){
var url = "PicServlet";
var pars ="myName="sujun;
myAjax = new Ajax.Updater(
"output"
url,
{method:"get",parameters:pars,evalScripts:true,onComplete:showResponse}
);
}
两者区别:
a.使用的对象不同,一个是Request对象,一个是Updater对象
b.Updater对象需要设置container,即返回输出到那个容器,此处输出到id=output的div
c.需要设置参数:evalScripts:true,表明允许执行脚本,该脚本可以在此文件中,也可以在其它文件中,如在别处,需要引入。
2.接收返回的文本或xml,用js处理
function showResponse(aa){
var result = aa.responseText;
alert(result);
//document.getElementById("output").innerHTML = reseult;
// document.write(result);
var target = $('output');
target.innerHTML = result;
}
注意:
a.方法showResponse中的参数aa指代的是XMLHttpRequest对象
b.向某一个div中输出,只需要将返回值赋值给该容器的innerHTML属性即可。