易截截图软件、单文件、免安装、纯绿色、仅160KB

JSON实现AJAX无刷新加载

AJAX主要有三种:最简单的直接加载整个网页,然后通过innerHTML之类的办法显示在网页上,这个现在用Prototype.js的Ajax.Updater类能轻而易举地实现;另一种最常用的是加载一个只包含数据的文件(比如XML)然后通过一系列代码处理后显示给用户;还有一种是像DWR或PHPRPC那样直接把服务器端的函数生成对应的JS代码给客户端,客户端执行后交由服务器处理,再返回结果。这里我们来讨论一下第二种,基于数据的。
用XML封装数据的实现见得多了,实际上XML不是唯一的办法。对于一些简单的应用,还有一个强大的东西:JSON。简单地说,就是由服务器端生成序列化后的数据(其实就是JS代码,不过和上文提到的第三种AJAX不同的是,服务器端生成的代码是JS由Object和Array多层嵌套组成的变量),由客户端加载之后直接使用JS来解析。乍听之下似乎还是和XML差不多嘛?错了。JSON还有几个XML不能比拟的优势:它是Javascript原生的Object和Array。换句话说,你甚至不用理会XMLHttpRequest。想当初刚尝试以Google Chrome为主要平台写AJAX应用时,才发现Chrome竟然没有自己之前一直在其它浏览器里用的selectSingleNode()!或许习惯不好或方法有误,不过我还是囧。若是使用JSON的话,通过JS原生的方法对Array和Object操作,不会有这个问题。
好了,说了这么多废话,切入正题。关于JSON的实现方式,网上一大堆,这里我只是说说我自己写的一个例子(其实说真的,直到昨天我才知道这叫JSON,否则我早就使用现成的类库而不用自己写代码来解析序列了)
下面是一个典型的JSON格式的数据。它实际上是一个由服务器端程序生成的JS文件,并且还进行了回调的调用:
var data = [
{
"name":"张三",
"age":32
},
{
"name":"李四",
"age":24
}
];
_callback("asdfxeg", data); //回调,其中第一个参数无意,下文会说到
熟悉JS的应该都知道,像“obj={}”这个大括号里面其实是一个Object(对象),我们可以自由地定义它的属性来存放我们想要的数据;而中括号[]则是一个Array(数组),Array可以包含任意类型的数据,当然也包括Object,这也就是JSON的基本结构了。
好了,说完数据结构,下面来说一下怎么加载它。首先,既然是AJAX,自然可以用我们平常见到的XMLHttpRequest,然后把拉下来的数据用window.eval()方法执行一下,便加载下来了。JSON的魅力并不仅仅于此,之前已经说了,它实际上是100%原生的JS,你可能也想到了,那就是直接用DOM加


相关文档:

Ajax 手写JS

var httpRequest = false;
var mesdivs = null
function sendRequest(url, mesdiv) {
 
    mesdivs = mesdiv;
    httpRequest = false;
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
......

Ajax 和 REST,第 1 部分

2006 年 11 月 09 日
服务器端 Web 应用程序因采用富应用程序模型和交付个性化内容而具备了融入式(immersive) 的特点,这种特点越突出,应用程序架构对 Web 架构风格 REST(Representational State Transfer)的违背就越多。这种违背会降低应用程序的可伸缩性,增加系统复杂性。通过与 REST 相互协调,Ajax 架构将使融入 ......

AJAX使用中的注意事项

1、当改变服务器上的状态时应当使用POST方法。不同于GET,需要设置XML- HttpRequest对象的Content-Type首部,如下所示:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
与GET不同,POST不会限制发送给服务器的净荷的大小,而且POST请求不能保证是幂等的。
你做的大多数请求可能都是G ......

Ajax对象XMLHttpRequest的常用属性,方法和事件

XMLHttpRequest对象是Ajax的核心,它有许多属性,方法和事件以便于脚本的处理和控制HTTP的请求与响应
下面是关于XMLHttpRequest对象的一些属性和方法介绍
1.readyState属性
  当XMLHttpRequest对象被创建后,readyState属性标识了当前对象所处的状态,具体的值代表意义如下:
  0   未初始化状态, ......

Ajax应用的五个步骤

//Ajax应用的五个步骤
//1.创建XMLHttpRequest对象
var xmlHttp=createXMLHttpRequest();
function createXMLHttpRequest()

 var xmlHttp;
 if(Window.XMLHttpRequest)
 { 
  //IE6以上版本和其他浏览器内置XMLHttpRequest对象
  xmlHttp=new XMLHttpRequest(); ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号