ExtJs学习笔记(5)_Ajax示例

简介: ExtJs对于Ajax的使用非常简单,看下面的代码:   1.Html页:   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

ExtJs对于Ajax的使用非常简单,看下面的代码:

 

1.Html页:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  >
     
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />     
    
< link  rel ="stylesheet"  type ="text/css"  href ="js/ext2.2/resources/css/ext-all.css"   />  
     
< script  type ="text/javascript"  src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >     
    
< script  type ="text/javascript"  src ="js/ext2.2/ext-all.js" ></ script >
    
< title ></ title >
</ head >
< body >
< script  type ="text/javascript" >
    Ext.onReady(
function () {

        
var  fnAjaxDemo  =   function () {
            
var  mydata;
            Ext.Ajax.request({
                url: 
" GetData.ashx?name= "   +  encodeURIComponent(Ext.get( " name " ).dom.value),  // 服务器端地址
                success:  function (request) {
                    mydata 
=  request.responseText;  // 服务器端文本数据                    
                    Ext.MessageBox.alert( " 返回值 " ,mydata);
                },
                failure: 
function () {
                    alert(
" failure! " );
                }
            });
        }

        Ext.get(
" btnTest " ).on( " click " , fnAjaxDemo);


    })
</ script >

   
        
< input  id ="name"  value ="Jimmy"  name ="name"   />
        
< button  id ="btnTest" > 获取服务端信息 </ button >
    
</ body >
</ html >


2.服务端GetData.ashx
using  System.Web;
using  System.Web.Services;


namespace  Ajax_WCF
{
    
///   <summary>
    
///  $codebehindclassname$ 的摘要说明
    
///   </summary>
    [WebService(Namespace  =   " http://tempuri.org/ " )]
    [WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
    
public   class  GetData : IHttpHandler
    {

        
public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType 
=   " text/plain " ;
            
if  (context.Request[ " name " !=   null   &&  context.Request[ " name " ].ToString() != "" )
            {
                context.Response.Write(
" Hello World, "   +  context.Request[ " name " ].ToString()  +   " ! " );
            }
            
else  
            {
                context.Response.Write(
" Hello World " );
            }
        }

        
public   bool  IsReusable
        {
            
get
            {
                
return   false ;
            }
        }
    }
}


运行效果:


转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1279918.html

目录
相关文章
|
7月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
7月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
7月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
73 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
63 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
61 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
52 0
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
102 0
|
JSON 前端开发 JavaScript
Ajax学习笔记
Ajax学习笔记
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
121 0