无风的港湾

AJAX bandwagon是个好去处。它带给你更快、更高效、更强动态的应用。但它也有自身的缺陷。

初一看，具备一些常识似乎就能避免这些缺陷，在一定程度上，的确如此。但从DHTML起源来看，AJAX应用程序充满了结构性差异。不论你在应用程序开发工作中掌握了多少常识，从别人犯的错误中吸取教训也是有好处的。我们称这些错误为“七宗死罪”，但它们不能代表全部的错误。

事实上，在你犯这些致命过失之前，你可能首先犯了一些较轻的错误。因此我们从这里着手。这是每个人都可能犯的错误。这些错误是多么普遍，通过Google搜索一下，你就可以发现大部分的错误。
(更多…)

标签Tags：ajax, dhtml, google, html, javascript, JavaScript&Ajax, url, 人, 应用程序, 搜索, 新手, 方法, 更新, 浏览器, 程序, 网络编程, 自身, 设计, 诫, 链接, 错误, 页面

Ajax的核心是JavaScript对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

* 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
* 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
* 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
* 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。 (更多…)

标签Tags：ajax, html, ie, javascript, JavaScript&Ajax, status, url, web, xml, xmlhttp, 代码, 兼容, 函数, 分页, 容器, 对象, 属性, 常用, 应用程序, 引入, 数据, 方法, 更新, 浏览器, 程序, 系统, 网络编程, 节点, 表格, 诫, 说明, 连接, 页面

Ajax控件和类库现在真的太多了，不知不觉中增加了Ajax的神秘性和复杂性，看到版内很多人为此费解和伤神，决定发此贴谈谈本人对Ajax的观点，希望能让大家对Ajax有一个本质的认识。

　　观点一：Ajax和服务器端技术毫不相关

　　严格的说，与传统web开发相比，Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程，因此很多问题也因通信而起。事实上，不论何种Ajax技术，服务器端都是返回的一个纯文本流，再由客户端来处理这个文本。这段文本可以是xml格式，也可以是一个Html片段，也可以是一段JavaScript脚本，或者仅是一个字符串。服务器端仅仅是作为一个数据接口，客户端使用XMLHttpRequest对象来请求这个页面，服务器端在页面内写入结果文本，这个过程和普通的web开发没有任何区别。所不同的只是，客户端在异步获取结果后，不是直接显示在页面，而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象，Date对象，或者其他的数据类型，都是封装了这个处理过程的结果。

　　观点二：DOM模型是Ajax最本质的技术

　　之所以没有把XMLHttpRequest列为最本质的技术，因为本人觉得它实在是太简单了，它只是可以让浏览器在后台请求一个页面，并将其内容交给JavaScript处理。真正的核心应该是：DOM模型，即文档对象模型。在DOM模型里，Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。而不仅仅是一个innerHTML属性这么简单，虽然这是一个很有用的属性。

　　观点三：在使用Ajax控件前理解它们的实现

　　使用Ajax控件的确可以提高效率，但如果你空中楼阁般使用控件，那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其，况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的，但如果封装了这些底层的东西，事情会变得复杂和难以理解。以Asp.net为例，它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法，相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”，而更多的事情则被封装了。同样记住一条，任何对服务器端的请求仅仅是返回纯文本，我们不一定要依赖于封装好的处理过程，而完全可以自己来实现。

　　观点四：学好JavaScript

　　在大多数人看来，JavaScript总不是那么一种正规的语言，随便copy一段就碰巧能运行，学过c之类的人，一看也能看懂，而且在浏览器中常常有脚本错误提示，所以潜意识觉得总不能付之以大任。事实上，要学好Ajax，这就完全是一种错误的看法。javascript作为一种脚本语言，其语法的确不是很严格，但并不妨碍其完成诸多复杂的任务，没有JavaScript，就没有Ajax。所以本人强烈建议，学Ajax前，一定要好好研究一番JavaScript，一般来讲，如果能顺利看懂prototype框架的代码（如：prototype-1.3.1.js），你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。

　　观点五：Ajax点缀：CSS

　　用JavaScript控制CSS其实很简单，基本上每个DOM对象都有一个style对象，只要把css属性里的”-”去掉，并让随后的字母变为大写就可以作为属性使用了，例如：element.style.backgroundColor=”#f00″;在css是：选择符 {background-color:#f00}

　　一口气说这么多，希望对大家有点用处。

标签Tags：ajax, ASP, asp.net, css, div, html, javascript, JavaScript&Ajax, js, web, xml, xmlhttp, 人, 代码, 区别, 对象, 属性, 接口, 数据, 方法, 浏览器, 类, 网络编程, 节点, 获取, 错误, 页面

上个月我发现许多Web2.0网站大量运用了ajax，但是其中有些很奇怪，因为他们的速度比起前慢了，并且有时候不起作用（在移动设备上），我总结了十条用Ajax的错误（平台无关）

1、 不要通过把整个页面都放在UpdatePanel中更新整个页面。在你运行网页时需要节省时间，不要更新那些可以用javascript and DHTML (DOM)的部分。

2、 要始终记得有这么几种访问者，他们不能用JavaScript或者用的版本比较老的浏览器或者他们对JavaScript支持不好，比如说移动设备。如果这些都不支持，你的访问者能看到什么？

3、 在客户端浏览器缓存相同的请求或者在we服务器端执行缓存。最好的例子是自动完成个下拉菜单，他们的填充在任何时刻都是相同的，一个有错误写法的自动完成的写法可以减慢你的Web服务器（数据库服务器），因为那样会有比起以前用IsPostBack更多地请求。想一下不停的按F5刷新你的网页的情形。如果你有层叠的下拉菜单你就会结算更多地请求。

4、 在你运用CSS或JavaScript时，不要运行，并发的或者运行很长时间的Ajax请求，一般的浏览器只能有两个并发的http连接（我知道可以给变这个，但是默认的还是设为两个）。如果在读取图片的时候由很多Ajax请求的话，速度会变得很慢。

5、 什么时候都用异步调用的方法发送XMLHttpRequest.。如果你要用同步的方法也是没有请问题的，你的浏览器不会因为网络问题或是连接速度慢而冻结的

6、 试着让你的web应用使用一个很慢的网络连接，再尝试用快的TCP/IP连接

7、 你的web应用是作为桌面程序的替代品？你注意观察过一般浏览器在运行你的Web应用一小时，两小时或者几天时内存的使用。不是所有人都有你那样好的机器。

8、 检查在你返回XMLHttpRequest时你的http请求状态代码（status code），那会有一些常见的网络错误像是不可获得的DNS，Http Server error 500 ，你曾经检查过状态代码（status code），它可以告诉你浏览器在一个为连接的模式

9、 试着禁止XMLHttpRequest object！用IE7你能用native object代替ActiveX object，但是你也可以禁止native object。

10、检查你AJAX requests的安全性！你简单的打开了你的数据访问层吗？充分运用FormsAuthentication和PrincipalPermissions。是不是任何人都可以建立一个请求（不只是点击一个链接）？

标签Tags：ajax, code, css, dhtml, html, http请求状态, ie, javascript, JavaScript&Ajax, server, status, web, web2.0, xml, xmlhttp, 人, 代码, 图片, 数据, 数据库, 方法, 更新, 浏览器, 版本, 程序, 网站, 网络编程, 连接, 链接, 错误, 页面

做一个项目用到Ajax,开始觉得挺好，后来发现一个问题，例如删除一项，恢复之后就不能再接着删除，必须要等一段时间，后来知道是IE缓存的问题。

　　AJAX缓存页面是一个刚接触AJAX的人一定会遇到的问题，造成这个问题的关键性人物又是IE…

　　在网上找了好多资料后，总结一下

　　1:在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数

　　在javascript发送的URL后加上t=Math.random() ，当然，不是直接把t=Math.random()拷贝到URL后面,应该像这样:URL+”&”+”t=”+Math.random();

　　2:在XMLHttpRequest发送请求之前加上XMLHttpRequest.setRequestHeader(“If-Modified-Since”,”0″)

　　一般情况下,这里的XMLHttpRequest不会直接使用，你应该可以找到这样的代码

XXXXX.send(YYYYYY);

　　那么,就把它变成

XXXXX.setRequestHeader(“If-Modified-Since”,”0″);
XXXXX.send(YYYYYY);

　　第二种方法感觉挺好。

标签Tags：ajax, ie, javascript, JavaScript&Ajax, mod, url, xml, xmlhttp, 人, 代码, 函数, 方法, 网络编程, 页面

用法：

<div id=”test”>
<span style=”color:red”>test1</span> test2
</div>

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
　　上例中的test.innerHTML的值也就是“<span style=”color:red”>test1</span> test2 ”。

test.innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签
　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。
　　上例中的text.outerHTML的值也就是<div id=”test”><span style=”color:red”>test1</span> test2</div>

完整示例：

<div id=”test”>
<span style=”color:red”>test1</span> test2
</div>

<a href=”javascript:alert(test.innerHTML)”>innerHTML内容</a>
<a href=”javascript:alert(test.innerText)”>inerHTML内容</a>
<a href=”javascript:alert(test.outerHTML)”>outerHTML内容</a>

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href=”javascript:alert(document.getElementById(‘test’).innerHTML.replace(/<.+?>/gim,”))”>无HTML,符合W3C标准</a>

标签Tags：div, html, ie, javascript, JavaScript&Ajax, js, 对象, 属性, 正则表达式, 浏览器, 网络编程, 诫, 说明

Get方式:

作用:可传送简单数据
大小:url最大长度是2083 bytes,可以用于GET传递数据的长度是2048 bytes
包含体:数据追加到url中发送,也就是http的header传送

Post方式:

作用:可传送简单复杂数据
大小:web.config里限制
包含体:数据在http请求的实体内容里传送
(更多…)

标签Tags：ajax, ASP, asp.net, code, javascript, JavaScript&Ajax, status, url, web, xml, xmlhttp, 对象, 数据, 方法, 网络编程

下面是我对一部分缺陷的看法：

为Ajax而Ajax(Using Ajax for the sake of Ajax.)

很同意这点，当一个技术本身的生存意义由于它自身的亮点而被抹杀，不知道是这个技术的幸运还是不幸。

干掉了back按钮(Breaking the back button)

back按钮是一个标准的web站点UI的重要功能。然后，后退按钮没法和js很好的合作……
gmail似乎作的很好？不过没去仔细看过gmail如何实现后退和js相容的，被这个mistake一提醒，也许这也是ue的一个切口哦。

点击的时候没有提供一个可视化的提示(Not giving immediate visual cues for clicking widgets)

……也许是我没看懂，觉得写这段的人自相矛盾。。他说没提供可视化提示，不过是拿gmail右上角的红色提示作为例子。 (更多…)

标签Tags：ajax, code, google, html, ie, javascript, js, PHP, web, 人, 代码, 兼容, 可用性, 应用程序, 收藏, 数据, 方法, 浏览器, 版本, 程序, 系统, 网络编程, 自身, 解决, 诫, 链接, 错误, 页面

一、 引言

　　毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包)，如何把这些对象串行化为JSON以发送到服务器端，以及如何把服务器端JSON反串行化为客户端JavaScript对象。

　　提示：你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

　　在继续阅读前，本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎，并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例，你需要下载本文相应的源码文件。 (更多…)

标签Tags：ajax, div, html, javascript, js, mod, PHP, url, web, xml, 人, 代码, 分离, 对象, 属性, 应用程序, 数据, 数据库, 方法, 浏览器, 程序, 类, 网站, 网络编程, 自身, 诫, 链接, 面向对象

<?php
# $Id: js.class.php,v 0.1 p $

// 禁止直接访问该页面
if (basename($HTTP_SERVER_VARS['PHP_SELF']) == "js.class.php") {
     header("HTTP/1.0 404 Not Found");
}

# Purpose 封装了一些常用的Javascript代码，以便在PHP中快速调用

class JS{
     function JS(){}

     #返回上页
     # @param $step 返回的层数 默认为1
     function Back($step = -1){
         $msg = "history.go(".$step.");";
         JS::_Write($msg);
         JS::FreeResource();
         exit;
     }

    # 弹出警告的窗口
    # @param $msg 警告信息
     function Alert($msg){
         $msg = "alert(\"".$msg."\");";
         JS::_Write($msg);
     }

    # 写js
    # @param $msg
     function _Write($msg) {
         echo "<script language=\"javascript\">\n";
         echo $msg;
         echo "\n</SCRIPT>";
     }

     # 刷新当前页
     function Reload(){
         $msg = "location.reload();";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #刷新弹出父页
     function ReloadOpener(){
         $msg = "if (opener)     opener.location.reload();";
         JS::_Write($msg);
     }

     #跳转到url
     #@param $url 目标页
     function Goto($url){
         $msg = "location.href = ‘$url’;";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #关闭窗口
     function Close(){
         $msg = "window.close()";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #提交表单
     #@param $frm 表单名
     function Submit($frm){
         $msg = $frm.".submit();";
         JS::_Write($msg);
     }

    #关闭数据库连接
    function FreeResource(){
         // 数据库连接标志
         global $conn;
         if (is_resource($conn))
             @mysql_close($conn);
     }
}
?>

标签Tags：class, javascript, JavaScript&Ajax, js, mysql, PHP, PHP, server, sql, url, 代码, 常用, 提交表单, 数据, 数据库, 类, 网络编程, 表, 表单, 连接, 页面