现在的位置: 首页 > 综合 > 正文

Ajax入门(附全码)_AX

2012年08月27日 ⁄ 综合 ⁄ 共 2641字 ⁄ 字号 评论关闭

Ajax是Web2.0的技术特征之一.憋了好久,终于今天有时间来写一下,本人也是在刚刚起步阶段,有不同见解大家共同探讨哈!

大体的过程是这样的.
①先创建一个XMLHttpRequest对象.
②确定该对象的状态改变时要调用的javascript脚本.   说白了就是你通过该对象与后台进行通信完成后要执行什么操作.即:收到服务器的响应后,需要做什么。
③向后台发送请求.   发送后获得的接受结果(如果有接收结果)在②中调用的脚本中操作.
【源码】
/*页面部分,在页面中添加以下脚本*/

<script language="javascript" type="text/javascript">
<!--
var xmlHttp;  //声明XMLHttpRequest对象
//创建XMLHttpRequest对象
function createXMLHttpRequest()
{
       if(window.ActiveXObject)    //如果是IE浏览器
       {
           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       else if(window.XMLHttpRequest)     //非IE浏览器
        {
         xmlHttp=new XMLHttpRequest();
        }
        else
        {
         return;
        }
}

//主要过程
function startRequest()
{
 creatXMLHttpRequest();    //①
 xmlHttp.onreadystatechange=handleStateChange;   //②
 xmlHttp.open("GET",AX.aspx?flag="AX"&email="AXzhz@163.com",true);  //③  参数1:提交方式为GET,
 xmlHttp.send();                                                         //参数2:提交的页面及附带的参数 参数3:异步通信
}

//要调用的脚本,即收到服务器的响应后,需要做什么。
function handleStateChange()
{
     if(xmlHttp.readyState==4)//响应完成
    {
       if(xmlHttp.status==200)//响应正常/OK
         {
               /*正常响应后,你要做什么操作都写到这里*/
               var result = xmlHttp.responseText;   //取得后台的返回值             
               alert("Ajax操作完成,从后台返回的值为"+result);
          }
       else
       {
           alert("很抱歉!\n"+xmlHttp.statusText+xmlHttp.status);
       }  
    }
 else
 {
  alert("很抱歉!Ajax没有完成响应!!");
 }
}
//-->
<script>

 /*提交到的AX.aspx网页后台部分*/
首先:把AX.aspx的页面部分(HTML代码)删干净,只剩第一行代码,再对后台代码部分进行操作

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AXzhang
{
 /// <summary>
 /// initializeSearch 的摘要说明。
 /// </summary>
 public class initialize: System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
    //获取Ajax传过来的参数,这里我只获取了其中的一个参数.
    string result=Request.QueryString["flag"].ToString();
    result+=":from AX.aspx";

    //把result返回给页面
    Response.Write(result);

  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion
 }
}

----------------------------------------------------------------------------------------------
好了,Ajax的整个请求过程就完成了,自己动手吧,别光看着!
注:这只是Ajax应用的一小部分.........
【总结】传递和接收的参数好像只能是一个字符串,所以在需要传送多个变量时需要把它们组合到一个字符串中,获得该串后再把它手动拆开......不知道谁有别的好办法没有.

本人是在该网页的指导下学会的,强烈建议新手去看看:
http://www.bizwiki.cn/teamblog/?p=25

抱歉!评论已关闭.