jQuery.ajax的简单应用实例 附实例下载

　　先来看看jQuery.ajax(options)的简单介绍：

　　　　通过 HTTP 请求加载远程数据。

　　　　jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

　　　　$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

　　　　$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。

 

　　返回值：

　　　　XMLHttpRequest

 

　　参数：

　　　　options (可选) : AJAX 请求设置。所有选项都是可选的。

 

　　选项（只对此实例用到的选项进行解释）：

　　　　type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

　　　　url (String) : (默认: 当前页地址) 发送请求的地址。

　　　　data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。

　　　　　　　　　　　　　　　 必须为 Key/Value格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

　　　　beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax 事件.

　　　　success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。

　　实例：

　　　　用$.ajax()提交两个数值并返回这两个数值的和。

　　　　本实例使用jQuery 1.4.2类库。

　　　　先看HTML文件的部分代码：

 

< body >
     < form id = " form1 "  runat = " server " >
     < div style = " font-size:12px; padding-left:15px; padding-top:15px; " >
        < input type = " button "  id = " btn_ok "  value = " 测试 "  onclick = " FunAjax() "   />
        & nbsp; & nbsp;
        < span id = " span_content " > 显示结果 </ span >
     </ div >
     </ form >
</ body >

 

 

　　　　当点击"测试"按钮时触发FunAjax函数，下面来看这个函数代码：

 

function  FunAjax()
{
    $.ajax({
        type:  " POST " ,
        url:  " jQueryAjaxTest.ashx " ,  
        data:  " begin=1&end=9 " ,
        beforeSend:  function (){
            $( " #span_content " ).text( " 数据处理中... " );
        },
        success:  function (msg){
            $( " #span_content " ).text( " 两个数的和为：  "   +  msg);
        }
    });  
}

 

 

　　　　FunAjax函数利用$.ajax()调用了jQueryAjaxTest.ashx文件，并通过data选项向jQueryAjaxTest.ashx文件传递了两个数值，即begin=1&end=9，jQueryAjaxTest.ashx文件将返回这两个数值相加的结果，jQueryAjaxTest.ashx文件部分代码：

 

         // 返回类型
        context.Response.ContentType  =   " text/plain " ;

         int  iBegin  =   0 ;
         int  iEnd  =   0 ;
         // 接收参数
         int .TryParse(context.Request[ " begin " ].ToString(),  out  iBegin);
         int .TryParse(context.Request[ " end " ].ToString(),  out  iEnd);

        Thread.Sleep( 1000 );    // 为了能体现加载过程，在此我将程序延迟了一秒钟
        
         // 计算并返回结果
        context.Response.Write((iBegin + iEnd).ToString());

 

 

　　　　　这个实例只是$.ajax()的一个很简单的应用，但很大程度上简化了AJAX的开发，实现页面无刷新从服务器获取数据。

　　　　　下载这个实例：

　　　　   链接: http://pan.baidu.com/s/1o6xc6vS 密码: eczj

 

转载于:https://www.cnblogs.com/bynet/archive/2010/06/09/1754984.html