1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

ajax入门指南(四)

作者:用户 来源:互联网 时间:2016-07-25 17:54:06

ajax对象函数脚本参数functionajax函数ajax请求#ajax#ajax .ajaxAjax类$.ajaxAJAX请求类

ajax入门指南(四) - 摘要: 本文讲的是ajax入门指南(四), ajax学习入门指南,对ajax初学者应该有所帮助。 Prototype对Ajax的支持     Ajax.Request类     如下代码是一个示例:

ajax学习入门指南,对ajax初学者应该有所帮助。

Prototype对Ajax的支持
    Ajax.Request类
    如下代码是一个示例:
    <!--客户端:index.htm-->
    <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
    <script language="javascript">
         function test(){
          var myAjax = new Ajax.Request(
         'data.html',
         {
            method:'get',
            onComplete:showResponse
         }
        );
         }
          function showResponse(response){
             $('myDiv').innerHTML=response.responseText;
          }
    </script>
    </head>
    <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
    </body>
    </html>

    <!--服务端:data.html-->
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
       </head>
        <body>
            Ajax.Request DEMO
        </body>
        </html>

        Ajax操作选项属性含义:
        method                    HTTP请求方法(POST/GET/HEAD)
        parameters              在HTTP请求中传入的URL格式的值列表,就是URL串中问号之后的部分
        asynchronous          是否做异步XMLHttpRequest请求
        postBody                在POST请求方式下,传入请求体中的内容
        requestHeaders       和请求一起被传入的HTTP头部列表,这个列表必须含有偶数个项目
        onXXXXXXX        在HTTP请求,响应的过程中,当XMLHttpRequest对象状态发生变化时调用的响应函数. 响应函数有5个:onUninitialized,  onLoading,  onLoaded,  onInteractive和   onComplete
        onSuccess               Ajax操作成功完成时调用的响应函数,传入的参数与onXXXXXX相同
        onFailure                Ajax操作请求完成但出现错误时调用的响应函数,传入的参数与onXXXXXX相同
        onException           Ajax操作发生异常情况时调用的响应函数,它可以接收两个参数,第1个参数是执行HTTP请求的XMLHttpRequest对象,第2个参数是异常对象

    Ajax.Updater类
如下代码示例:
     <!--客户端:index.htm-->
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript">
             function test(){
                  var myAjax = new Ajax.Updater(
                             'myDiv',
                             'data.html',
                             {
                                    method:'get'
                             }
                   );
             } 
        </script>
        </head>
        <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
        </body>
        </html>
     <!--服务端:data.html-->
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
       </head>
        <body>
            Ajax.Request DEMO
        </body>
        </html>

    此外,Ajax.Updater类还有另外一个功能,如果请求的页面内容中包括JavaScript,Ajax.Updater类可以执行其中的 脚本,只需要在Ajax操作选项中增加属性"evalScripts:true"就可以了.把上述的例子进行修改后得到如下示例:
        <!--客户端:index.htm-->
        <html>
        <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript">
             function test(){
                  var myAjax = new Ajax.Updater(
                             'myDiv',
                             'data.html',
                             { 
                                                      method:'get',
                                    evalScripts:true
                             }
                  );
             } 
        </script>
        </head>
        <body>
            <input type="button" value="click" onclick="test()" />
            <div id="myDiv" />
        </body>
        </html>

    <!--服务端:data.html-->
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
        <script language="javascript" type="text/javascript">
             sayHi = function(){
                  alert("Heelo, " + $F('name') + "!");
             }
        </script>
    </head>
    <body>
        <input type="text" id="name" value="Ajax.Updater DEMO" />
        <input type="button" value="Click Me" Onclick="sayHi()" />
    </body>
    </html>

    如果我们把data.html中sayHi黑体的函数改成:function sayHi{....}或者var sayHi = function(){....},程序将不能正常运行.这是因为Ajax.Updater执行脚本是以eval的方式,而不是将脚本内容引入到当前页 面,直接声明用var声明的sayHi函数的作用域只是在这段脚本内部,外部的其他脚本不能访问,按照sayHi黑体描述的其作用域是整个window.

    Ajax.PeriodUpdater类
        在 一些Ajax应用中,需要周期性地更新某些页面元素,例如:天气预报,新闻等.实现这样的功能通常要使用JavaScript中的定时器函数 setTimeout, clearTimeout等, 而有了Ajax.PeriodUpdater类,可以得到很大地简化.
        新建一个Ajax.PeriodUpdater类的实例需要指定3个参数:
        container: 将要更新的页面元素id;
        url: 请求的URL地址;
        options: Ajax操作选项
        和Ajax.Updater类相似,Ajax.PeriodUpdater类也支持动态执行JavaScript脚本,只需要在Ajax操作选项中增加(evalScripts : true)属性值就行.
        Ajax.PeriodUpdater类支持两个特殊的Ajax操作选项,frequency和decay.frequency参数很容 易理解,是定时更新页面元素,或者定时执行脚本,frequency指的就是两次Ajax操作之间的时间间隔,单位是秒,默认值是2
        如下代码是一个示例:
        <!--客户端:index.htm-->
        <html>
        <head>
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript">
   function test(){
                  var myAjax = new Ajax.PeriodicalUpdater(
                     'myDiv',
                     'data.html',
                     {
                            method:'get',
                            evalScripts:true,
                            frequency:1,
                            decay:2   
                     }
                   );
                 }
         </script>
        </head>
        <body>
            <input type="button" value="click" onclick="test()" />
            <div id='myDiv' />
        </body>
        </html>
       
        <!--服务端:data.html-->
        <html>
        <head>
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript" type="text/javascript">
                count=9;//手动改变数字,我们可以看到index.htm页面myDiv元素的值同时在更新
                 $('myDiv1').innerHTML = "count = " + count + ": " + new Date() + "<br>";
        </script>
        </head>
        <body>
            <div id='myDiv1' />
        </body>
        </html>
        Ajax.Responders对象
        该类维护了一个正在运行的AJax对象列表,在需要实现一些全局功能时就可以使用它.例如,在Ajax请求发出以后需要提示用户操作正在执行中,当操作以后取消提示,如下所示:
    <!--客户端:index.htm-->
        <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=gb2312">
            <script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
            <script language="javascript">
                 function test(){
                      var myAjax = new Ajax.Request( 
                 'data.html',
                                 {
                                        method:'get',
                                        onComplete:showResponse
                                 }
                      );
                 } 
                 function showResponse(response){
                         $('myDiv').innerHTML=response.responseText;
                  }
                 var handle={
                         onCreate:function(){  
                                  Element.show('loading'); //创建Ajax请求时,显示loading
                         },
                         onComplete:function(){
                                  //当请求成功返回时,如果当前没有其他正在运行中的Ajax请求,隐藏loading
                                  if(Ajax.activeRequestCount == 0){
                                           Element.hide('loading');
                          }
                 }
      };
          //将handle注册到全局的Ajax.Responders对象中,使其生效
          Ajax.Responders.register(handle);
    </script>
    </head>
    <body>
        <input type="button" value="click" onclick="test()" />
        <div id="myDiv" />
        <div id="loading" style="display:none">
                <img src="loading.gif">Loading...
        </div>
    </body>
    </html>

     <!--服务端:data.html-->
  
    <html>
    <head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
    </head>
    <body>
        Ajax.responders DEMO
    </body>
    </html>

     上述定义了一个handle 对象,其中包含onCreate和onComplete函数,页面中发出任何一个Ajax请求时都会调用onCreate方法,而请求完成时都会调用onComplete方法.
 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , 对象 , 函数 , 脚本 , 参数 , function , ajax函数 , ajax请求 , #ajax , #ajax  , .ajax , Ajax类 , $.ajax AJAX请求类 redis入门指南、webgl入门指南、微信小程序入门指南、cloudstack入门指南、hi fi音响入门指南,以便于您获取更多的相关知识。

ajax-关于Ajax 入门一直出错

问题描述 关于Ajax 入门一直出错 在客户端页面输入自己的名字,服务端返回‘你好+名字’执行会有错误提示AjaxGet()函数未定义我是在VS下开发的给你们贴出目录和源码HTMLPage.htm是客户端页面,源码...

php的ajax框架xajax入门与试用介绍_php技巧

一、xajax与其它ajax框架的比较 xajax功能很简单,但很灵活!~它不象其它一些大的框架,功能确实强大,但执行速度不敢恭维。。功能虽多,但不够灵活。api多,学起来简直如同学习一门新的语言。 二、xajax功能介绍 xajax的功能...

php的ajax框架xajax入门与试用介绍

一、xajax与其它ajax框架的比较 xajax功能很简单,但很灵活。~它不象其它一些大的框架,功能确实强大,但执行速度不敢恭维。。功能虽多,但不够灵活。api多,学起来简直如同学习一门新的语言。 二、xajax功能介绍 xajax的功能...

ajax技术及实例(转)

...子允许用户在一个网页中查看多种源内容 2.Ajax 桌面 该指南是一个手把手教程,通过它你可以创建一个类似 于PageFlagePageFlage 和 Netvibes的桌面/网页。这个指南的目的是展示一些基于web应用程序的技巧,这些技巧也是比较常用的...

jQuery MiniUI 快速入门:表单开发(四)

表单开发包括:布局、验证、加载、提交、清除、重置等。 效果图如下:                        表单布局使用HTML Table标签实现任意丰富的表单布局:              姓名:                         ...

前三篇
后三篇