Ajax學(xué)習(xí)筆記---3種Ajax的實(shí)現(xiàn)方法【推薦】

!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>
title>Ajax of Javascript  jQuery/title>
/head>
body>
a href="javascript:getData();">Javascript-Ajax: Click me/a>br />
br />
br />
input id="btn" type="button" value="jQuery-Ajax: Clike me"/>
hr />
div id="show">
/div>

script type="text/javascript">
function getData() {
//創(chuàng)建XMLHttpRequest通信對(duì)象
var xhr;
if (window.ActiveXObject) { //標(biāo)準(zhǔn)情況下, 只能有兩個(gè)ActiveXObject對(duì)象處理通信過程
xhr =new ActiveXObject("Microsoft.XMLHTTP");
}
elseif (window.XMLHttpRequest) {
xhr =new XMLHttpRequest();
}
else {
thrownew Error("Ajax is not supported by this browser");
}


var elem = document.getElementById("show"); //用來顯示處理結(jié)果
//使用onreadystatechange事件處理結(jié)果
xhr.onreadystatechange =function() {
if (xhr.readyState ==4) { // readyState表示服務(wù)器響應(yīng)狀態(tài). 4: 響應(yīng)接收完畢
if (xhr.status ==200) { // status 表示 http 請(qǐng)求的狀態(tài)
var json = xhr.responseText; //從請(qǐng)求中回應(yīng)中獲得json串
var obj = eval("("+ json +")"); // 借助 eval 將 json 串轉(zhuǎn)化為對(duì)象, 在客戶端瀏覽器必須解析為js對(duì)象
elem.innerHTML ="span>"+ obj.name +"/span>";
}
}
}

//通過open設(shè)置請(qǐng)求方式
xhr.open("get", "json.ashx", true); //默認(rèn)為ture, false表示同步方式

//發(fā)送請(qǐng)求
xhr.send(null);

/* 同步方式, false表示不適用異步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//處理結(jié)果
alert(xhr.responseText);
*/
}
/script>

script src="jquery-1.4.2.js" type="text/javascript">/script>
script type="text/javascript">
$(function() { //ready函數(shù), 腳本加載完即執(zhí)行, 也可以用$(...$("#btn").click...)();加載
$("#btn").click(function showData() { //按鈕上添加onclick事件, 事件處理方法為showData()
$("#show").load("jquery.ashx"); //從jquery.ashx中獲取數(shù)據(jù)元素(innerHTML的內(nèi)容), 并顯示在div中
});
});
/script>

/body>
/html>

%@ WebHandler Language="C#" Class="Json"%>

using System;
using System.Web;

publicclass Json : IHttpHandler {

publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";

//對(duì)于靜態(tài)內(nèi)容, 需要禁用瀏覽器的緩存, 否則老是舊結(jié)果
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

string name ="Mike";

string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是為了避免和Json中的{沖突而采用的特殊轉(zhuǎn)義符

string json =string.Format(jsonFormat, name);

context.Response.Output.Write(json);
}

publicbool IsReusable {
get {
returnfalse;
}
}
}

%@ WebHandler Language="C#" Class="jquery"%>

using System;
using System.Web;

publicclass jquery : IHttpHandler {

publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

DateTime now = DateTime.Now;
string jqueryFormat ="span>{0}/span>";
string jquery =string.Format(jqueryFormat, now);

context.Response.Write(jquery);
}

publicbool IsReusable {
get {
returnfalse;
}
}
}

location path="ajaxpro">
system.web>
httpHandlers>
add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
/httpHandlers>
!--
If you need to have Ajax.NET Professional methods running on the
login page you may have to enable your own authorization configuration
here.
-->
!--
authorization>
deny users="?"/>
/authorization>
-->
/system.web>
/location>

protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro會(huì)根據(jù)注冊(cè)的類型自動(dòng)生成腳本
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

publicclass CalendarServices
{
[AjaxPro.AjaxMethod]
publicbool save(string date, string tile, string detail)
{
System.Threading.Thread.Sleep(5000); //用來測(cè)試異步
returntrue; //這里為簡(jiǎn)單, 直接返回true
}
}

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>

!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 runat="server">
title>/title>
/head>
body>
form id="form1" runat="server">
div>
日期:input id="date" type="text"/>br />
標(biāo)題:input id="title" type="text"/>br />
詳情:textarea id="detail" cols="80" rows="5">/textarea>
hr />
input id="btn" type="button" value="確定"/>
/div>

div>
script src="jquery-1.4.2.js" type="text/javascript">/script>
script type="text/javascript">
$(function() {
$("#btn").click(function() {
var date = $("#date").val();
var title = $("#title").val();
var detail = $("#detail").val();

//由AjaxPro生成的js代理, 很像C#中類庫的使用, 其中function(result)是異步的結(jié)果處理方法
CalendarServices.save(date, title, detail, function(result) {
if (result.error !=null) { //服務(wù)器上出現(xiàn)異常
alert(result.error.Message);
}
if (result.value) { //服務(wù)器cs文件中的方法返回永真
alert("服務(wù)器返回true! ");
}
});
});
});
/script>
/div>
/form>
/body>
/html>

httpHandlers>
add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
/httpHandlers>

Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是頁面文件名稱

[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
DataSet ds =new DataSet();
ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));

return ds;
}

this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基于Attribute為按鈕綁定方法, 在aspx文件中手動(dòng)添加也可以

script> 
  function onCommandInputPropertyChange(){ 
    if (event.propertyName == "value"){ 
      var cmdInput = event.srcElement; 
      if (cmdInput.value != 0){ 
        //alert(cmdInput.value); 
    BindRoleName(cmdInput.value);    
      } 
    } 
  } 
  //綁定角色名 
  function BindRoleName(RoleID){ 
  //SysBase_UserEdit是aspx頁面的名稱 
    SysBase_UserEdit.getRoleData(RoleID,get_AllName); 
  } 
  function get_AllName(response){ 
    var AllName = document.getElementById("DDLAjax"); 
    AllName.length = 0; 
    if (response.value != null){ 
      var ds = response.value; 
      if(ds != null  typeof(ds) == "object"){      
        var name = ds.Tables[0].Rows[0].rolename; 
      var id = ds.Tables[0].Rows[0].id;      
      AllName.options.add(new Option(name,id)); 
    } 
  } 
  } 
/script>

Triggers>
asp:AsyncPostBackTrigger ControlID="AspNetPager1"/>
asp:AsyncPostBackTrigger ControlID="btn_Search"/>
asp:AsyncPostBackTrigger ControlID="btn_Delete"/>
/Triggers>

httpHandlers>
!-- 調(diào)用AjaxPro.2-->
add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
remove verb="*" path="*.asmx"/>
add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
/httpHandlers>