google近期退出了google book的book搜索.是一个ajax应用,动态的加载和展示一本书里面的图片.我深入的研究了它的代码.然后自己拼装了一个图片展示ajax程序,在这里和大家分享.晕,不能上传???
我把代码粘贴如下吧:
myGoogleBook.html:
---------------------------------------------------
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<title>Google Book Creak</title>
</head>
<body style="font-family:Courier New, Arial, sans-serif;">
<input style="font-family:Courier New, Arial, sans-serif;" type="text" size="90" id="address"/>&nbsp;<button name="submit_" value="submit" onclick="submit_();">submit</button>&nbsp;<button name="clear"   value="clear"  onclick="clear_div();">clear & stop</button><br/>
<table id="scheduleBarTable" width="727" border="1" bordercolor="seagreen" cellpadding="0" cellspacing="0">
<tr id="scheduleLine">
<td id="scheduleBar" width="727" bgcolor="white" height="20"></td>
</tr>
</table>
<div id="inner_div" style="width:900;height:500;overflow-x:hidden;overflow-y:scroll;font-family:Courier New, Arial, sans-serif;"></div>
</body>
</html>
<script type="text/javascript" src="creak.js"></script>
creak.js:
-------------------------------------------------------------
function clear_div() {
clear__ = true;
imgArr = {};
document.getElementById("inner_div").innerHTML = "";
scheduleBar.bgColor = "white";
if(!document.getElementById("scheduleBar_1")) {
var c = scheduleLine.insertCell(-1);
c.id = "scheduleBar_1";
}
}
var clear__ = false;
var scheduleBarWide = document.getElementById("scheduleBarTable").width;
var scheduleLine = document.getElementById("scheduleLine");
var scheduleBar = document.getElementById("scheduleBar");
var div__ = document.getElementById("inner_div");
var inner_div = document.getElementById("inner_div");
function myAlert(msg) {
if(msg) {
inner_div.innerHTML += msg + "<br/>";
}
}
var _xh_ieProgId = undefined;
var _XH_ACTIVE_X_IDENTS = [
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"MICROSOFT.XMLHTTP.1.0",
"MICROSOFT.XMLHTTP.1",
"MICROSOFT.XMLHTTP"
];
function _XH_XmlHttpInit() {
if(typeof XMLHttpRequest == "undefined" && typeof ActiveXObject != "undefined") {
// 遍历所有可以构建 ajax 提交的对象列表.
for(var a = 0;a < _XH_ACTIVE_X_IDENTS.length; a++) {
// 中间变量 b
var b = _XH_ACTIVE_X_IDENTS[a];
// 下面是尝试建立 ActiveXObject 对象.
// 如果没有异常发生, _xh_ieProgId 就可以记录下这个可以用的对象的名字
try {
new ActiveXObject(b);
_xh_ieProgId = b;
// 随便找到一个以后就可以停止循环了.
break;
} catch(c) {
}
}
// 如果一个都不能使用就抛出异常.
if(undefined === _xh_ieProgId) {
throw "Could not create ActiveXObject. ActiveX might be disabled, or msxml might not be installed";
}
}
}
// 这个方法在页面加载时就调用了.如果可以成功的调用 _xh_ieProgId 就记录了可以使用的对象的名字.
_XH_XmlHttpInit();
function va() {
if(_xh_ieProgId !== undefined) {
return new ActiveXObject(_xh_ieProgId);
} else {
return new XMLHttpRequest();
}
}
var hello = va();
// 绑定回调函数到 ajax 对象的方法.
// a [后台提交对象]
// b [url]
// c [回调函数]
function newConnection(url) {
hello.onreadystatechange = callback;
hello.open("GET", url, true);
sendRequest(hello, "");
}
// 发送请求的方法.
// a [后台提交对象]
// b [string,应该代表参数]
function sendRequest(req, param) {
try {
req.send(param);
} catch(c) {
throw c;
}
}
var imgArr = {};
function callback() {
if(hello.readyState == 4) {
if(hello.status == 200) {
var returnMsg = hello.responseText;
var page_index_1 = returnMsg.indexOf("{pages:");
var mid_str = returnMsg.substring(page_index_1);
var page_index_2 = mid_str.indexOf("}};");
var jsonObject = mid_str.substring(0, page_index_2 + 3);
if(imgArr.prefix) {
var mid = function() {
addImageToImgArr(jsonObject);
}
setTimeout(mid, 0);
} else {
var mid1 = function() {
initialPagesObjcet(jsonObject);
}
setTimeout(mid1, 0);
}
}
}
};
function getNextRequest() {
if(!imgArr.prefix) {
return;
}
var previousPage = imgArr.page_infos[0];
for(var i = 1; i < imgArr.page_infos.length; i++) {
var mid = imgArr.page_infos[i];
if(!mid.src) {
if(previousPage) {
if(!previousPage.tryTimes) {
previousPage.tryTimes = 0;
}
if(previousPage.tryTimes < 6) {
previousPage.tryTimes++;
return imgArr.prefix + "&pg=" + previousPage.pid + "&sig=" + previousPage.purl;
}
}
}
previousPage = mid;
}
}
function initialPagesObjcet(jsonObject) {
if(clear__) {
return;
} eval("var pages_objcet=" + jsonObject);
imgArr.prefix = pages_objcet.scroll_pages.prefix;
imgArr.page_infos = pages_objcet.scroll_pages.page_infos;
imgArr.picNum = imgArr.page_infos.length;
setImgSrcByPid(imgArr.page_infos[0].pid, pages_objcet.pages[0].src) setTimeout(sendNextReq, 0);
}
function sendNextReq() {
var next = getNextRequest();
// myAlert("sendNextReq..." + next);
if(next) {

var mid = function() {
newConnection(next);
}
setTimeout(mid, 0);
} else {
reflashScheduleBar(-1);
showPictures();
}
}
function showPictures() {
for(var i = 0; i < imgArr.page_infos.length; i++) {
myAlert("&lt;img src=\"" + imgArr.page_infos[i].src + "\"/&gt;");
}
for(var i = 0; i < imgArr.page_infos.length; i++) {
div__.appendChild(imgArr.page_infos[i].img);
}
}
function addImageToImgArr(jsonObject) {
// inner_div.innerHTML += "recesve response...&nbsp;<br/>";
eval("var pages_objcet=" + jsonObject);
setTimeout(addAndInitImg(pages_objcet.entry), 0); setTimeout(sendNextReq, 0);
}
var addAndInitImg = function(entry) {
return function() {
for(var i = 0; i < entry.length; i++) {
var imgAdd = entry[i].src;
var pid = entry[i].pid;
setImgSrcByPid(pid, imgAdd);
}
}
}
function setImgSrcByPid(pid, imgAdd) {
for(var i = 0; i < imgArr.page_infos.length; i++) {
var element = imgArr.page_infos[i];
if(element.pid == pid) {
var img = document.createElement("img");
img.src = imgAdd;
element.src = imgAdd;
element.img = img; reflashScheduleBar(i);
}
}
}
function reflashScheduleBar(i) {
if(i != -1) {
var percentAge = (i + 1) / imgArr.picNum;
if(percentAge - 1 > 0) {
percentAge = 1;
}
scheduleBar.width = scheduleBarWide * percentAge;
scheduleBar.bgColor = "green";
} else {
// myAlert("else case");
scheduleBar.width = scheduleBarWide;
scheduleLine.removeChild(document.getElementById("scheduleBar_1"));
}
}
Function.prototype.partial = function() {
return callback.call(null, arguments[0]);
};
function submit_() {
clear_div();
clear__ = false;
var str = document.getElementById("address").value;
if(str && str.length > 0) {
newConnection(str);
} else {
myAlert("wrong url param...");
}
}readme.txt:
---------------------------------------------------------
经过我的努力已经可以用自己的方式把google book中的图片展示出来了.
 
使用方法:
1.找到一本书进去浏览.
2.点击右边预览的封面图片,在新窗口中打开(要的是封面图片所代表的那个连接,来作为这个提交的起始页).
    你的连接应该是这样的:
    http://books.google.com/books?vid=ISBN9810228996&id=dcvzdOjvyLYC&printsec=frontcover&dq=bio&hl=zh-CN
    而不是这样的:
    http://books.google.com/books?vid=ISBN9810228996&id=dcvzdOjvyLYC&pg=PA1&lpg=PA1&ots=HejRlwGEbc&dq=bio&hl=zh-CN&sig=oF2ovWTpHFsZ9C-jCm3RDJqkweE#PPP1,M1
3.把这个新窗口中的连接复制下来,粘贴到我写的页面的输入框里.然后点击 submit.
5.出来结果了,上面是图片连接,下面是图片.
6.点击 clear & stop,清除现有的页面,并且终止提交.直接点击 submit 也会先清除现在的页面,然后再提交.