AJaX for weblogs

原创 2005年05月25日 20:36:00

转:Ajax  for  weblogs

The Asynchronous JavaScript + XML (AJaX) solution is one that can bring happiness and bliss to web designers and web developers alike. However, as with many whiz-bang solutions caution is advised. Google uses it to great effect but personally I think they take it a bit too far. If a page change so much that its context changes then it have switched to a new URI. People often bookmark specific content that’s within a specific context. As soon as this is no longer true it maybe a clue that you’ve gone to far.

The first thing I notice that the solutions is aimed at the heavier web applications. Not surprising. Web applications suffer from constraints that web clients impose on them. This solution gives them a way to check for dynamic content without reloading the current page.

So what does it do? 

Well it’s very simple. It uses Javascript to get data from a remote source and then loads that into a specified target. Whatever content you like to wherever you like on the page.
Jesse James Garrett of Adaptive Path has written an essay that covers the basics and provides more information on AJaX.

But lets get this sucker running, that’s the fun bit. And it’s pretty easy.


Step 1

Check if your web client can actually handle the http requests. We’ll need to use a Javascipt to do this.

var ajax=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
@end @*/
if (!ajax && typeof XMLHttpRequest!=’undefined’) {
ajax = new XMLHttpRequest();
}


Step 2

Add the script that will pick up your data. In this case I’m not picking up XML data. But the weblog of your choice and in my case it’s ExpressionEngine will return the xHTML Which in turn will be inserted via the javascript innerHTML methode.

function getMyHTML(serverPage, objID) {
if((serverPage.indexOf("http://www.yourdomain.com/")!=0)) return;
var obj = document.getElementById(objID);
ajax.open("GET", serverPage);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
obj.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}


Step 3

The page that will display the dynamic content will need a placeholder element (tag) with a unique ID. The ID attribute will be used in the second script as a reference point to allow for insertion of the new dynamic content.

<html>
<head>
<title>AJaX test</title>
</head>
<body onload="getMyHTML(’serverpage.php’,’placeholder’)">
<div id="placeholder">
<p>The ‘getMyHTML’ script will overwrite
this paragraph.</p>
</div>
</body>
</html>

This URI in the ‘onload’ is the one which will generate the content.


Step 4

The dynamic bit is parsed by the engine of your choice like; Moveable Type, Expression Engine, Word Press etc. Of course you can use any other method of collecting content form a database.

In Expression Engine I’m calling a template that collects the data for my calendar. The whole calendar is outputted as HTML and inserted via the script.

Lets say the URI is ‘http://www.yourdomain.com/tempate/pageid/’
This could in fact be a PHP file or any other serverside script solution. The page only needs to return html. Here is an example in PHP.

<?php
echo '<p>this is a php echo text</p>';
?>

And that’s about it. It’s all pretty old school but there you have it.

JavaScript for循环中发送AJAX请求的问题

首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法。今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chr...

用Ajax实现多级联动下拉列表For JSP(无限级别,JSON传输数据,含全国地区数据库

好久时间没有更新内容了,很多朋友对我以前写的一篇《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库)(原创)》感兴趣,提出原来这段代码服务器端是用asp实现的,能不能改写成...

无刷新分页 for net等等都可以用,先引用ajax库

function funname(e) {                   alert(e.toString() + "aaa")               };       ...

JavaScript for循环中使用Ajax发送请求

问题是这样的: 前端是有一个聊天的组件,点击该组件会出现一个聊天用户的界面;是用树结构显示的;而调用的function中使用的是for循环加Ajax循环发出请求...

Jquery Pagination AJax 分页实例 For ASP

很长时间没有更新空间了,最近就网友的要求,写了一个基于Jquery Pagination插件的分页实例。服务器端使用Asp(后续再做基于ASP.NET,ASP.NET MVC3,Java等版本)。 ...
  • marroow
  • marroow
  • 2013年01月20日 11:56
  • 1035

Telerik UI for ASP.NET AJAX控件汉化方法

Telerik UI for ASP.NET AJAX控件功能十分强大,但原版是英文界面的,不方便一些用户使用。 和.NET的其他控件一样,可以通过资源文件来制作多语言版本。 下面看看安装完成后原...

DWR-- Ajax for Java 配置

DWR是一种基于Java编程的Ajax实现。 可以在JavaScript 中实现直接Java调用(方法) 难点就是其配置过程,可分为以下几步: 到 http://getahead.ltd....

C#_MVC_ajax for form

在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案。 通过get方法实现AJax请求 Vie...

JQuery Pagination AJax 分页实例 For ASP.NET(JQuery+ashx+ADO.NET 实体数据模型)

刚写了一段Jquery Pagination AJax 分页实例 For ASP,其实分页的服务端用asp.net也很简单,一鼓作气,把asp.net也写了。    简单起见,数据库操作用ADO.N...
  • marroow
  • marroow
  • 2013年01月20日 11:58
  • 1002

Introduction to Ajax for Java Web Applications

This document provides an introduction to Ajax and demonstrates some of the features in the NetBeans...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJaX for weblogs
举报原因:
原因补充:

(最多只允许输入30个字)