通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式

更新時(shí)間：2015年08月28日 09:22:19 投稿：mrr

AJAX大家已經(jīng)都知道了，是為了實(shí)現(xiàn)異步通訊，提高用戶(hù)體驗(yàn)度，而將很多舊知識(shí)（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個(gè)新的知識(shí)框架。而，XMLHttpRequest對(duì)象則是其中的重重之中,本篇文章主要給大家介紹通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式

示例一：利用Ajax來(lái)動(dòng)態(tài)獲取時(shí)間的例子。

HTML代碼：

<%@ 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>
  <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="Scripts/jwy.js"></script> 
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="text" name="textbox" id="text1" />
    <input type="button" name="button" id="Button1" value="顯示時(shí)間" onclick="btnclick()" />
  </div>
  </form>
</body>
</html>

創(chuàng)建一個(gè)“一般處理程序”來(lái)處理前臺(tái)請(qǐng)求，返回系統(tǒng)當(dāng)前時(shí)間：

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Text;
public class Handler : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    context.Response.Write(ShowTime());
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
  public static string ShowTime()
  {
    return DateTime.Now.ToString(); 
  }
}

js代碼：

function btnclick() {
  var httprequest = null;
  // 初始化XMLHttpRequest對(duì)象
  if (window.XMLHttpRequest) {
    // Firefox等現(xiàn)代瀏覽器中的XMLHttpRequest對(duì)象創(chuàng)建
    httprequest = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    // IE中的XMLHttpRequest對(duì)象創(chuàng)建
    httprequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (!httprequest) {
    alert("創(chuàng)建httprequest對(duì)象出現(xiàn)異常！");
  }
  httprequest.open("POST", "Handler.ashx", true);
  //httprequest向handler發(fā)送post請(qǐng)求，最后參數(shù)是設(shè)定是否為異步請(qǐng)求,true為異步，false為同步
  httprequest.onreadystatechange = function () {
    //指定onreadystatechange事件句柄對(duì)應(yīng)的函數(shù)
    if (httprequest.readyState == 4) {
      //4代表服務(wù)器返回完成
      if (httprequest.status == 200) {
        //200代表成功了
        document.getElementById("text1").value = httprequest.responseText;
        //responsetext表示服務(wù)器返回的文本,還有一種方式是responseXML是為了獲取服務(wù)器返回的xml
      }
      else {
        alert("AJAX服務(wù)器返回錯(cuò)誤！");
      }
    }
  }
  httprequest.send();
  //在這里才真正的向服務(wù)器端發(fā)送請(qǐng)求
}

我們用jquery來(lái)前臺(tái)js代碼會(huì)變得十分簡(jiǎn)潔：

基于jquery編寫(xiě)的js代碼：

注意：HTML代碼要把button的onclick事件去掉，因?yàn)槲覀冎苯釉趈s用了事件綁定。

$(document).ready(function () {
  //button1綁定事件
  $("#Button1").bind("click", function () {
    $.ajax({
      url: "Handler.ashx",
      type: "POST",
      success: function (data) {
        //$("#text1").val(data);
        document.getElementById("text1").value = data;
      }
    });
  });
});

不得不說(shuō)jquery“簡(jiǎn)約而不簡(jiǎn)單”……

jquery中的$.ajax集合了get、post方法，默認(rèn)的是get。

如果直接用POST的話(huà)，代碼更簡(jiǎn)單

$(document).ready(function () {
  //button1綁定事件
  $("#Button1").bind("click", function () {
    $.post("Handler.ashx", function (data) {
  document.getElementById("text1").value = data;
    });  
 });
});

示例二：

一、XMLHttpRequest實(shí)現(xiàn)獲取數(shù)據(jù)

不使用jQuery實(shí)現(xiàn)頁(yè)面不刷新獲取內(nèi)容的方式，我們這里采用XMLHttpRequest原生代碼實(shí)現(xiàn)；

js代碼如下：

//1.獲取a節(jié)點(diǎn)，并為其添加Oncilck響應(yīng)函數(shù)
document.getElementsByTagName("a")[0].onclick = function(){
　　 //3、創(chuàng)建一個(gè)XMLHttpRequest();
  var request = new XMLHttpRequest();
  //4、準(zhǔn)備發(fā)送請(qǐng)求的數(shù)據(jù)url
  var url = this.href;
  var method = "GET";
  //5、調(diào)用XMLHttpRequest對(duì)象的open方法
  request.open(method,url);
  //6、調(diào)用XMLHttpRequest對(duì)象的send方法
  request.send(null);
  //7、為XMLHttpRequest對(duì)象添加onreadystatechange 響應(yīng)函數(shù)
  request.onreadystatechange = function(){
    //8、判斷響應(yīng)是否完成：XMLHttpRequest 對(duì)象的readystate的屬性值為4的時(shí)候
    if(request.readyState == 4){
       //9、在判斷響應(yīng)是否可用：XMLHttpRequest 對(duì)象status 屬性值為200
      if(request.status == 200){
           //10、響應(yīng)結(jié)果
           alert(request.responseText);
      }   
    }  
  }    
      //2、取消a節(jié)點(diǎn)的額默認(rèn)行為
      return false;    
}

插入HTML代碼：

<a href = "hello.txt">點(diǎn)擊獲取文本內(nèi)容</a>

二、jQuery實(shí)現(xiàn)ajax獲取信息

這個(gè)例子是動(dòng)態(tài)的從后臺(tái)獲取數(shù)據(jù)來(lái)改變下拉按鈕的內(nèi)容；

js代碼如下：

function bindCarteam0(){
     //通過(guò)URL請(qǐng)求數(shù)據(jù)
     var URL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;
      $.ajax({
        url:URL,
        type:'GET',
        dataType: "json",
        success:function(html){
          var str="<option value='-1'>全部</option>";
          for(var i=0;i<html.length;i++){
            str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
          }
          $("#carteam_code").empty().html(str);
        }
      });
   }

HTML代碼如下：

<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
                     <select:option value="-1">全部</select:option>
                </select:select>

其中type類(lèi)型有g(shù)et和post兩種；

post 可以傳輸?shù)臄?shù)據(jù)量比較大，get有字節(jié)限制；

您可能感興趣的文章: