Ajax 框架学习笔记

一.XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

xmlHttp.onreadystatechange=function()

{

// 我们需要在这里写一些代码

}

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值:




















状态

描述

0

请求未初始化(在调用 open() 之前)

1

请求已提出(调用 send() 之前)

2

请求已发送(这里通常可以从响应得到内容头部)

3

请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)

4

请求已完成(可以访问服务器响应并使用它)

我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

// 从服务器的response获得数据

}

}

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

二.基本源码:

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

//设置请求响应的url

var url="getcustomer_xml.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

//responseText 以字符串返回 HTTP 响应

//document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

//responseXML 以 XML 返回响应

//服务器端ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。服务器端返回responseXML 要把内容类型设置为 XML。

var xmlDoc=xmlHttp.responseXML.documentElement;

document.getElementById("companyname").innerHTML=

xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

document.getElementById("contactname").innerHTML=

xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

document.getElementById("address").innerHTML=

xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

document.getElementById("city").innerHTML=

xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

document.getElementById("country").innerHTML=

xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

三.Ajax框架:基于浏览器的应用框架,基于服务器端的应用框架。

1.基于浏览器的应用框架一般分为两种:

Aplication frameworks:提供了浏览器功能,但其最著名的还是在于通过窗口生成组件建立桌面GUI。 如:DOJO,qooxdoo,JavaFX,YUI,ExtJS(最开始的名字是yui-ext,因为扩展了yui的库,后来发展为可选择扩展jquery和prototype就改名字为ext),Flex(与ExtJS有很多相似),TIBET等。

Infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作,让开发者去创建具体应用,主要功能包括:

    • 基于XMLHttpRequest组件的浏览器交互功能
    • XML解析和操作功能
    • 根据XMLHttpRequest的返回信息进行相应的DOM操作
    • 一些特殊情况下,和其他的浏览器端技术如Flash(或Java Applets)等集合到一起应用

如:jQuery(代码量少),prototype,MooTools(功能比prototype强大,设计比prototype完善,从prototype中汲取很多有益的设计理念),Google AJAXSLT,Flash/JavaScript,等。

2.基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类) :

HTML/JS Generation(HTML/JS生成):通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行 。如:Ext GWT。

远程交互:JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄,或者请求服务器端数据信息,例如Session信息,数据库查询等。 如DWR。

(0)

相关推荐

  • PHP 开源AJAX框架14种

    jQPie 这是一个扩展自jQuery,结合PHP的一个Ajax框架.支持XML,HTML和JSON handler.jQPie提供的功能包括: 利用$.getJSON方法简化来自PHP的请求和处理数据. 利用$.(element).load方法注入PHP生成的html到某一页面元素中. 利用$.jqpie方法直接从web页面调用PHP函数.在响应$.jqpie调用时从PHP函数反过来调用jQuery. phpmsajax 一组PHP文件用来支持在PHP Web应用程序中使用Microsoft

  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi

  • 简单的前端js+ajax 购物车框架(入门篇)

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • Jquery AJAX 框架的使用方法

    刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写

  • javascript之AJAX框架使用说明

    ajax编码落地算是团队框架建设的一个里程碑,使得框架拥有了一个可应用调试的版本.在ajax框架编码中主要想到了这么几点: 框架兼容性 方法全面而要简单快捷 可扩展性好 框架兼容性:ajax框架的兼容性主要表现在XMLHttpRquest对象生成上.根据不同类型浏览器或者不同库一般有三种方式 new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"): new ActiveXObject("Msxml2.XMLHT

  • AJAX 图片展示框架56个 提升开发效率第1/2页

    动态图片展示一方面能使用AJAX或Flash实现图片数据的异步获取,减少浏览的等待时间:一方面使用JavaScript+CSS定制友好的用户体验模式,是图片展览web应用程序开发的一大利器.这里收集的框架都是经过测试可用的,描述大多是各框架主页上的介绍,来不及翻译(有些是西班牙语的 @_@),主要收集来源为欧美和台湾的一些社区和博客,希望大家也能将自己收集的好框架拿出来一起分享! Ajax Image Galleries & Lightboxes MinishowcaseMinishowcase

  • jquery 框架使用教程 AJAX篇

    小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu

  • 无框架 Ajax分页(原创)第1/2页

    使用如上方法确实可以实现Ajax分页效果,但我总觉得不够简洁,研究了一下午,终于捣鼓出了点东西O_o首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager

  • 简单介绍不用库(框架)自己写ajax

    平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分. 写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢. 先来看看流行的jQuery是怎样调用ajax的 $.ajax({ url: 'test.php', //发送请求的URL字符串 type: 'GET', //发送方式 dataType: 'json', //预期服务器返回的数据类型 xml, html, text, j

  • AJAX 验证框架13个

    一 ASP.NET AJAX Framework 1.ValidatorCallout 是ASP.NET AJAX Control Toolkit中的一员,老瓶装新酒,通过扩展的方式为ASP.NET的验证控件提供漂亮的弹出提示效果.缺点是:目前的版本还不能提供服务端Custom Validator的扩展. 同时,ValidatorCallout还支持自定义CSS样式,具体可参考官方页面上的"ValidatorCallout Theming" 一节,和这篇文章:http://www.im

随机推荐