一个简单的ajax

简介:

function_test.js文件
/* *
 * @author Sam Lin
 * @date:February 14 ,2007
 * @contact: linsentong@126.com
 
*/
function  $()
{
    
var  elements =   new  Array();
   
    
for ( var  i  = 0 ;i  <  arguments.length;i ++ )
    {
      
// 取得参数的每一个值
        var  element =  arguments[i];
       
if (typeofelement  ==   ' string ' )
          element 
= document.getElementById(element);
      
      
// 如果只是一个参数则返回
       if (arguments.length  ==   1 )
          returnelement;
      
      elements.push(element);
    }
    returnelements;
}
// 初始化XMLHttpRequest
var  xmlHttp;
function  InitiateXMLHttpRequest()
{

   
if (window.XMLHttpRequest)
    {
       xmlHttp 
= new  window.XMLHttpRequest();
    }
    
else
    {
       
try
       {
          xmlHttp 
= new  ActiveXObject( " Msxml2.XMLHTTP " );
       }
      
catch (e){
          
try {
             xmlHttp 
= new  ActiveXObject( " Microsoft.XMLHTTP " );
          }
         
catch (e)
          {
             xmlHttp 
= false ;
          }
       }
    }
    returnxmlHttp;
}
function  CallServer(url)
{
   
if (xmlHttp)
    {
      xmlHttp.open(
" GET " ,url, true );
      xmlHttp.onreadystatechange 
=  DoCallBack;
      xmlHttp.send(
null );
    }
}
function  DoCallBack()
{
    
var  msg  = $( " divMessage " ).innerHTML;
   
if (xmlHttp.readyState  ==   4 )
    {
       msg 
+= " Callback the server successful!<br/>ResponseText: " + xmlHttp.responseText + " <br /> " ;
    }
    
else
    {
       msg 
+= " State: " + xmlHttp.readyState  + " <br /> " ;
    }
}


<% @ Page Language = " C# "  ContentType = " text/html " ResponseEncoding = " gb2312 "   %>
<! 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=gb2312"   />
< script  type ="text/javascript" src ="function_test.js" ></ script >
       
< scripttype ="text/javascript" >
          functiontest()
          {
             
var  objTest =  $( " txtName " );
            alert(objTest.value);
          }
          
var  xmlHttp =  InitiateXMLHttpRequest();
         alert(xmlHttp);
          functionCallServer(url)
          {
            
if (xmlHttp)
             {
               
if ($( " txtName " ).value  ==   "" )
                {
                  alert(
" 用户名不用为空! " );
                  
return ;
                }
                
else
                {
                   url 
+= $( " txtName " ).value;
                }
               xmlHttp.open(
" POST " ,url, true );
               xmlHttp.onreadystatechange 
=  DoCallBack;
               xmlHttp.send(
null );
             }
          }
       functionDoCallBack()
       {
         
          
var  msg  = $( " divMessage " ).innerHTML;
          
// msg ="HH";
           var  tmp  = "" ;
         
if (xmlHttp.readyState  ==   4 )
          {
            document.getElementById(
" results " ).innerHTML  = xmlHttp.responseText;
             msg 
+= " Callback the server successful!<br/>ResponseText: " + xmlHttp.responseText + " <br /> " ;
             tmp 
+= " Callback the server successful!<br/>ResponseText: " + xmlHttp.responseText + " <br /> " ;
          }
          
else
          {
             msg 
+= " State: " + xmlHttp.readyState  + " <br /> " ;
             tmp
+= " State: " + xmlHttp.readyState  + " <br /> " ;
            
          }
         alert(msg);
       }
       
// var sTemp= document.getElementById("spanMessage");
       // alert(sTemp.innerHTML);
      
       functionTest()
       {
         alert($(
" lblMessage " ).innerHTML);
       }
      
</ script >
< title > 无标题文档 </ title >
</ head >
< body  MS_POSITIONING ="GridLayout" >
       
< formid ="Form1"  method ="post"  runat ="server" >
          
< inputtype ="text"  id ="txtName"  name ="txtName" >   < input  type ="button" id ="btnOk"  name ="btnOk"  value ="OK" onclick ="javascript:test()" >
          
< br />
          
< inputtype ="button"  value ="CallBack"  id ="btnCallBack" onclick ="CallServer('http://localhost/ch33/sendCallBack.aspx?name=')"   />
          
< divid ="divMessage" ></ div >
          
< spanid ="spanMessage" > t </ span >
         
< asp:Label  ID ="lblMessage" runat ="server" > OOO-- </ asp:Label >
          
< inputtype ="button"  id ="btnTest"  value ="Test"  onclick ="Test()" />
      
</ form >
       
< div  id ="results" ></ div >
</ body >
</ html >



ajax.aspx.cs文件
Page_Load事件如下:
private   void  Page_Load( object  sender, System.EventArgs e)
       {
          
// 在此处放置用户代码以初始化页面
          if (Request.QueryString[ " name " ==   null )
          {
            Response.Write(
" Sorry the programe is wrong! " );
          }
          
else
          {
             
string  name =  Request.QueryString[ " name " ].ToString();
            Response.Write(
" Welcome to use callback : " + name);
         
            
          }


本文转自Sam Lin博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2008/04/05/1138316.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript 前端开发
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
87 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
150 0
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
65 0
|
6月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
57 0
|
6月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
78 0
|
6月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
90 0
|
6月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本