用ajax实现正在载入的特效-Ajax编…

来源：互联网发布：c语言期末考试题库编辑：程序博客网时间：2024/06/10 08:43

一、

一般我们在执行比较费时的操作时会使用ajax,在执行的过程中会给用户提示“正在加载数据……”类似的提示，这里将简单介绍下如何使用xajax来实现“正在处理……”的特效提示。

首先在网页body开头定义提示的div：

定义处理时的提示语句

<div     id= "loadingContainer">

< div id = "loading"> 正在加载数据，请稍候 </ div>

</ div >
然后定义处理提示的js函数：定义初始化与处理时的js函数 < script     languege= "javascript/text">

loadingpic = document . getElementById ( 'loadingContainer');

loadingpic. style .display = 'none' ;// 初始化进度条为不可见

xajax. loadingFunction = loading ; // 定义XAJAX在等待请求时候调用的函数

xajax. doneLoadingFunction = loadingDone ; //定义XAJAX在或得请求数据以后调用的函数

function     loading(){

         loadingpic . style. display = 'block' ; //设置请求数据的时候可见

}

function loadingDone() {

    loadingpic . style. display = 'none' ; //设置请求结束以后消失

}

</script>
OK,上面是基础性质的工作，做完后，我们假设单击某个链接，执行一个花费时间比较长的函数：页面中超级链接定义<a href="#" onclick="xajax_slow_function();">点击我吧...</a>
php代码 <?php
    functionslow_function()
   {
    //费时的处理程序
    }
    $xajax = newxajax();
    $xajax->register(XAJAX_FUNCTION,'slow_function');
    $xajax->processRequest();
?>

二、

http.js:
var xmlHttp;
function FunGetHttp(url,ObjectID)
{
var ID = document.getElementByIdx_x(ObjectID);
if (window.ActiveXObject) //IE
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
///////////////////////////////////////////////////////////////////////
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState==2)
{
ID.innerHTML = "<imgsrc='loading.gif'>... 正在提交数据";
}
else if(xmlHttp.readyState==3)
{
ID.innerHTML = "<imgsrc='loading.gif'>... 数据传送中";
}
else if(xmlHttp.readyState==4)
{
ID.innerHTML = "";
if(xmlHttp.status==200)
{
ID.innerHTML = xmlHttp.responseText;
}
else
{
result.innerHTML = " 查询错误，请检查输入是否正确";
}
}
else
{
ID.innerHTML = "<imgsrc='loading.gif'> 正在查询，请稍后...";
}
}
/////////////////////////////////////////////////////////////////////////
xmlHttp.open("GET", url ,true);
xmlHttp.send(null);
}

===============================================================================

Ajax.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>Ajax示例一</title>
</head>
<body>
   <script src="http.js" language="javascript"type="text/javascript"></script>
   <script language="javascript"type="text/javascript">
      function test(){
        var s = document.getElementByIdx_x("DropDownList1");
        FunGetHttp("Ajax1.aspx?state="+s.value,"result");
      }
   </script>
   <select name="DropDownList1" onchange="test()"id="DropDownList1">
       <optionvalue="">请选择...</option>
   <optionvalue="CA">CA</option>
   <optionvalue="IN">IN</option>
   <optionvalue="KS">KS</option>
   <optionvalue="MD">MD</option>
   <optionvalue="MI">MI</option>
   <optionvalue="OR">OR</option>
   <optionvalue="TN">TN</option>
   <optionvalue="UT">UT</option>
   </select>
   <divid="result"></div>
</body>
</html>

=================================================================================

Ajax1.aspx:
<%@ Page Language="c#" %>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.SqlClient"%>
<script language="C#"runat="server">
    DataTableDT;
    voidPage_Load(object sender, EventArgs e)
    {
       SqlConnection MyConnection = newSqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Pubs"].ConnectionString);
       SqlDataAdapter MyCommand = new SqlDataAdapter("SELECT [au_id],[au_lname], [au_fname], [phone], [address], [city], [state], [zip],[contract] FROM [authors] WHERE [state] = @state",MyConnection);

       string state = "CA";
       if (!String.IsNullOrEmpty(Request.QueryString["state"])) state =Request.QueryString["state"];
       MyCommand.SelectCommand.Parameters.Add(new SqlParameter("@state",SqlDbType.VarChar)).Value = state;

DataSet DS = new DataSet();
MyCommand.Fill(DS, "table");

       DT = DS.Tables[0];
    }
</script>
<table cellspacing="0" rules="all" border="1"id="Table1" style="border-collapse:collapse;">
<tr>
<thscope="col">ID</th><thscope="col">LastName</th><thscope="col">FirstName</th><thscope="col">Phone</th><thscope="col">Address</th><thscope="col">City</th><thscope="col">State</th><thscope="col">ZipCode</th><thscope="col">Contract</th>
</tr>
<%
       int i = 0;
       for (; i < DT.Rows.Count; i++)
       {
%> <tr>
   <td ><% =DT.Rows[i]["au_id"]%></td><td><%=DT.Rows[i]["au_lname"]%></td><td><%=DT.Rows[i]["au_fname"]%></td><td><%=DT.Rows[i]["Phone"]%></td><td><%= DT.Rows[i]["Address"]%></td><td><%= DT.Rows[i]["City"]%></td><td><%= DT.Rows[i]["State"]%></td><td><%= DT.Rows[i]["Zip"]%></td><td><%= DT.Rows[i]["Contract"]%></td>
   </tr>
<%} %>
</table>

三、

男

见好多朋友在找这个例子，今天整理一个发上来了。请多多指教，谢谢！

<a style="cursor: hand"onclick="javascript:blogKey('yandavid');"target="_blank">Yandavid博客</a>
<a style="cursor: hand"onclick="javascript:blogKey(1);"target="_blank">全部</a>
<span id="alxa_area" ></span>

<script type="text/javascript">
          var xmlHttp = false;
          function blogKey(i)
          {
              try
              {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e)
              {
                  try
                  {
                      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                  }
                  catch (e2)
                  {
                      xmlHttp = false;
                  }
              }
              if (!xmlHttp && typeofXMLHttpRequest != 'undefined') {
                  xmlHttp = new XMLHttpRequest();
              }

              var url = "http://hi.baidu.com/"+ i;
              xmlHttp.open("GET", url,true);

//请求页面数据数据传输,flase为非异步方式

//方法参数可以是 “GET”, “POST”, 或 “PUT”中的一个（请求数据使用GET比较多而POST发送数据[特别是长度大于512字节的数据）

//异步参数指明是否应该处理请求。设置成“True”的意思是在send()方法结束后脚本继续执行，而不需要等待服务器的回应。“False”则是脚本必须等待服务器的回应后才能继续执行。

              xmlHttp.setRequestHeader( " Content-Type " , "application/x-www-form-urlencoded " );
              xmlHttp.onreadystatechange = callBack;
              xmlHttp.send(null);
          }

          function callBack()
          {
              if(xmlHttp.readyState == 1)
              {
                 document.getElementByIdx_x("alxa_area").innerHTML ="正在加载...";
              }
              if (xmlHttp.readyState == 4)
              {
                  var sc = xmlHttp.responseText;
                  var checkResult = document.getElementByIdx_x("alxa_area");
                  alxa_area.innerHTML =sc;    //当异步请求完成时，用DHML改变alxa_area的内容。
              }
          }
</script>

参数解释说明：

Ajax基础配置 —XMLHttpRequest

Ajax并不是一种技术。它实际上是几种已经在各自领域大行其道技术的强强结合。Ajax混合了：

基于XHTML/CSS
由DOM（Document Object Model）实现动态显示与交互
通过XML和XSLT进行数据交换及处理
使用JavaScript整合上述技术

XMLHttpRequest 是 Ajax的关键技术，然而XMLHttpRequest 并非W3C标准。它目前所完成的大量功能将被过渡到W3C的新项目“DOM Level 3Load and Save”标准里面。通过XMLHttpReques,web页可以从web服务器得到反馈和需求而不用重新加载页面。用户将停留在相同的页面，而不会注意到脚本可能在后台需求某页面或是在给服务器发送数据。Google Suggest就是用XMLHttpRequest对象来建立的一个动态web 接口：当你开始在Google的搜索框中打字时，一个JS脚本发送字母到一服务器并从服务器返回一列建议。W3C “DOM Level 3 Load andSave”标准包含一些相似的功能，但是这些还不能在任何一浏览器中得到实现。所以就目前，如你需要从浏览器发送HTTP请求，你还是得用到XMLHttpRequest 对象。Javascript 也是靠XMLHttpRequest 来获取XML的。对于不同的浏览器，创建XMLHttpRequest对象的方式有些不一样，经过综合多方的脚本，采用以下脚本基本上能够满足在各种浏览器中创建XMLHttpRequest的需求。

<scripttype=”text/javascript”>
var xmlHttp;
function creatXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
return;
}
}
其中XMLHttpRequest对象包含了一些方法以及属性，先不管它们，等用到了再看。

Methods（方法）

abort()
Cancels the current request

取消当前的请求

getAllResponseHeaders()
Returns the complete set of http headers as a string

以字符串的形式返回完整的HTTP头信息

getResponseHeader(”headername”)
Returns the value of the specified http header

返回指定的HTTP头信息值

open(”method”,”URL”,async,”uname”,”pswd”)
Specifies the method, URL, and other optional attributes of arequest

为一请求指定发放，URL，和其他的任意属性。

The method parameter can have a value of “GET”, “POST”,or “PUT” (use “GET” when requesting data and use “POST” whensending data (especially if the length of the data is greater than512 bytes.

方法参数可以是 “GET”, “POST”, 或 “PUT”中的一个（请求数据使用GET比较多而POST发送数据[特别是长度大于512字节的数据]）

The URL parameter may be either a relative or completeURL.

URL可以是绝对路径或是相对的路径。

The async parameter specifies whether the requestshould be handled asynchronously or not. true means that scriptprocessing carries on after the send() method, without waiting fora response. false means that the script waits for a response beforecontinuing script processing

异步参数指明是否应该处理请求。设置成“True”的意思是在send()方法结束后脚本继续执行，而不需要等待服务器的回应。“False”则是脚本必须等待服务器的回应后才能继续执行。

send(content)
Sends the request

发送请求

setRequestHeader(”label”,”value”)
Adds a label/value pair to the http header to be sent

Properties属性

onreadystatechange* ：
An event handler for an event that fires at every state change,typically a call to a JavaScript function.
这个是个最重要的属性，为每次状态的变化而准备的事件处理，往往用于触发一个JavaScript运行。

readyState ：
Returns the state of the object:
返回的状态对象：

0 = uninitialized[初始化]
1 = loading[加载中]
2 = loaded[加载完毕]
3 = interactive[交互]
4 = complete [完毕]

responseText ：
Returns the response as a string
以字符串形式返回

responseXML ：
Returns the response as XML. This property returns an XML documentobject, which can be examined and parsed using W3C DOM node treemethods and properties
以XML的形式返回，这个属性返回一XML文档对象，可用W3C的DOM点树方法和属性来进行解析和检验。

status ：
Returns the status as a number (e.g. 404 for “Not Found” or 200 for“OK”)
以数字的形式返回状态（比如404是”没有找到“或200是”好的“）

statusText：
Returns the status as a string (e.g. “Not Found” or “OK”)
以字符串形式返回状态（比如”没有找到“或”好的“）

步骤一：”请!” — 如何发送一个HTTP请求？

发送HTTP请求是关键，我们先总结一下步骤，一共是4步：

1.获得一个XMLHttpRequest实例，可以通过创建，或者访问已存在的XMLHttpRequest对象实例。

     <script type=”text/javascript”>
     var xmlHttp;
     function creatXMLHttpRequest() {
     if (window.ActiveXObject) {
     xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
     }
     else if (window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest();
     }
     else {
     return;
     }
     }

2.接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名。

xmlHttp.onreadystatechange = handleStateChange;

注意:在函数名后没有括号,也无需传递参数。

3. 在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法, 如:

xmlHttp.open(”GET”, “simpleResponse.xml”, true);
xmlHttp.send(null);

关于open()后面的几个参数这里要解释一下了。第一个参数是HTTP请求方式 – GET，POST，HEAD或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。由于自身安全特性的限制，该页面不能为第三方域名的页面。同时一定要保证在所有的页面中都使用准确的域名，否则调用open()会得到“permissiondenied”的错误提示。一个常见的错误是访问站点时使用domain.tld，而当请求页面时，却使用“www.domain.tld”。第三个参数设置请求是否为异步模式。如果是ture,JavaScript函数将继续执行，而不等待服务器响应。这就是”AJAX”中的”Asynchronous”。

4.向服务器发送请求。send()方法向指定的目标资源发送请求。send()方法允许一个参数，可以是一个字符串或者一个DOM对象。这个参数会作为请求本身的一部分被传输到目的URL。当send()方法里面包含有参数的时候，要确定open()方法里面的第一个参数是“POST”。如果没有数据要作为请求本身的一部分发送，就使用“null”，正如我们的例子中使用的。

步骤 2 – “收到!” — 处理服务器的响应

当发送请求时,要提供指定处理响应的JavaScript函数名，步骤一的第二点我们已经定义了这个函数（handleStateChange）。我们来看看这个函数的功能是什么。首先函数会检查请求的状态，如果状态值是4，就意味着一个完整的服务器响应已经收到了，您将可以处理该响应。

     if (XMLHttp.readyState == 4) {
     // everything is good, the response is received
     } else {
     // still not ready
     }

readyState的取值如下:

0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)

接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C站点，我们着重看值为200（OK）的响应。

if (XMLHttp.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}

在检查完请求的状态值和响应的HTTP状态值后,您就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:

xmlHttp.responseText – 以文本字符串的方式返回服务器的响应
xmlHttp.responseXML –以XMLDocument对象方式返回响应。处理XMLDocument对象可以用JavaScriptDOM函数

整理一下步骤2的代码，就是处理服务器相应函数（handleStateChange)：

function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert(”The server repilied with: ” + xmlHttp.responseText);
}
}
}