so true

心怀未来,开创未来!
随笔 - 160, 文章 - 0, 评论 - 40, 引用 - 0
数据加载中……

Ajax基本知识

Ajax全称是Asynchronous JavaScript XML,这并不是一项新技术,而只是将一些已有的技术进行了整合,从而实现了页面在不刷新的状态下也可以连接服务器来更新页面内容,也即部分刷新技术,或不完全刷新。
Ajax的核心类是XMLHttpRequest类,从IE5.0开始被支持,Ajax的处理过程大概是这个样子的:

1.首先通过JavaScript来建立一个XMLHttpRequest类的实例;
2.通过属性onreadystatechange来设定回调函数;
3.调用该实例的open方法:open(数据传送方式GET/POST,服务器URL,是否异步,[用户名],[口令]);
4.调用该实例的send方法:send(XML数据/字符串/流/无符号整数数组/null),注意如果为null,则表示不传递额外的数据,仅用Open方法中指定的服务器URL来进行响应即可;
5.在回调函数中先通过readyState属性检测异步操作的状态:未初始化(0),正在加载(1),已加载(2),交互(3),已完成(4);
6.再在回调函数中检测服务器返回的HTTP状态码status,200代表正常;
7.再在回调函数中,利用返回的数据(responseBody:返回为无符号整数数组/responseStream:返回为IStream流/responseText :返回字符串/responseXML:返回为XML格式数据。),基于DOM,使用JavaScript技术来修改文档的结构。

总结一下:
其实,Ajax就是通过JavaScript创建XMLHttpRequest对象,再由JavaScript调用XMLHttpRequest对象的方法完成异步通信;然后,再由JavaScript通过DOM的属性和方法,完成页面的不完全刷新。

最后再说明一下异步:同步表示send之后需要一直等待服务器完全响应之后才能进行后续的操作,因此需要等待;而异步表示send之后立即返回,可以继续其他的操作,而服务器一旦返回后可以自行调用回调函数来执行动作。

在ASP.NET应用中,可以先安装一个Microsoft ASP.NET 2.0 AJAX Extensions 1.0,然后就可以使用Ajax的一些常用控件了,比如UpdatePanel,以及Timer等,但用之前不要忘记在页面开始加一个ScriptManager;也可以再安装AjaxControlToolkit来获得更多的Ajax控件。

=========================
Ajax 应用程序所用到的基本技术
1.html
    组成web页面所用到的基本元素
2.javascript
    javascript代码是AJAX应用程序核心的代码,帮助ajax程序改进与服务器通讯以实现不一样的用户体验
3.Dynamic HTML
    用于动态更新web页面
4.DOM(文档对象模型)
    用于通过javascrip代码处理HTML或服务器返回的XML

javascript与服务器端通信的最核心的对象
xmlHttp对象:传送XML格式数据的超文本传输协议
实际上XMLHTTP传输的数据可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。还可以是URL的参数,它下达的结果可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。

调用步骤
1、创建XMLHTTP对象
2、打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等。 
3、发送指令。
4、等待并接收服务端返回的处理结果。
5、释放XMLHTTP对象

方法
open(数据传送方式(GET/POST/HEAD),服务器URL,是否异步执行,[用户名],[口令])
如:
open("GET","http://www.sohu.com",true)

send(content)
可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。也可以省略,让指令通过Open方法的URL参数代入。
如:send(null);

setRequestHeader(HTTP 头,HTTP 头值)
如:xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

abort()取消当前 HTTP 请求

getAllResponseHeaders ()
从响应信息中检索所有的HTTP 头字段

getResponseHeader(HTTP 头)
从响应信息正文中获得一个 HTTP 标头值

属性
onreadystatechange:用以状态改变后所要作的处理的事件句柄。
readyState 异步操作的状态:未初始化(0),正在加载(1),已加载(2),交互(3),已完成(4)
responseBody:返回为无符号整数数组。
responseStream:返回为IStream流。
responseText :返回字符串。
responseXML:返回为XML格式数据。
status:服务器返回的HTTP状态码
statusText :服务器HTTP响应行状态

说明
1.同步和异步
        同步状态下发送http请求后,只有当客户端接收到来自服务端的全部应答数据或协议栈超时返回!反之异步状态下,直接返回。在异步方式下数据包一旦发送完毕就结束send进程客户端执行其他的操作,而在同步方式下客户端要等到服务器返回确认消息后才结束send进程。实际运用中我们根据实际情况使用同步或异步,注意了如果设为同步状态可能因为服务器返回数据量大或响应慢而导致不必要的长时间等待!

2.POST和GET
        用"POST"方式发送数据.可以大到4MB "GET"只能256KB
========================================================
一个实例:
<!--Request.htm----------------------------------------------------------->

<html>

    <head>

        <title>Ajax应用实例</title>

        <script type="text/javaScript">

            var xmlHttp;

var requestType="";

function createXMLHttpRequest(){

    if(window.ActiveXObject){

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

    }

    else if(window.XMLHttpRequest){

        xmlHttp = new XMLHttpRequest();

    }

}

function startRequest(theRequestType){

requestType = theRequestType;

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = myCallback;

    xmlHttp.open("GET","Response.xml",true);

    xmlHttp.send(null);

}

function myCallback(){

    if(xmlHttp.readyState==4){

        if(xmlHttp.status==200){

            if(requestType=="all")

                listAll();

            else if(requestType=="north")

                listNorth();

        }

    }

}

function listAll(){

    var xmlDoc = xmlHttp.responseXML;

    var allProvs = xmlDoc.getElementsByTagName("prov");

    outputList("all",allProvs);

}

function listNorth(){

    var xmlDoc = xmlHttp.responseXML;

    var north = xmlDoc.getElementsByTagName("north")[0];

    var northProvs = north.getElementsByTagname("prov");

    outputList("north",northProvs);

}

function outputList(title,provs){

    var out=title;

    var currentProv = null;

    for(var i=0;i<provs.length;i++){

    currentProv = provs[i];

    out = out + “<br/>” + currentProv.childNodes[0].nodeValue;

    }

    document.getElementById(title).innerHTML = out;

}

        </script>

    </head>

    <body>

        <h1> Ajax应用实例</h1>

        <form action="#">

<input type="button" value="列出所有沿海省市"

conclick="startRequest('all'); "/>

<div id="all"></div>

<input type="button" value="列出江北沿海省市"

        conclick="startRequest('north'); "/>

<div id="north"></div>

        </form>

    </body>

</html>

<!--Response.xml---------------------------------------------------------->

<?xml version="1.0"encoding="utf-8" ?>

<provs>

    <north>

            <prov>辽宁</prov><prov>河北</prov><prov>天津</prov>

            <prov>山东</prov><prov>江苏</prov>

    </north>

    <south>

            <prov>浙江</prov><prov>福建</prov><prov>广东</prov>

            <prov>广西</prov><prov>海南</prov><prov>上海</prov>

            <prov>台湾</prov><prov>香港</prov><prov>澳门</prov>

    </south>

</provs>
 

posted on 2008-09-21 01:22 so true 阅读(425) 评论(0)  编辑  收藏 所属分类: Others


只有注册用户登录后才能发表评论。


网站导航: