通過XMLHttpRequest和jQuery實現ajax的幾種方式

通過XMLHttpRequest和jQuery實現ajax的幾種方式_jquery

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

樣本一：利用Ajax來動態擷取時間的例子。

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="顯示時間" onclick="btnclick()" />  </div>  </form></body></html>

建立一個“一般處理常式”來處理前台請求，返回系統目前時間：

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對象  if (window.XMLHttpRequest) {    // Firefox等現代瀏覽器中的XMLHttpRequest對象建立    httprequest = new XMLHttpRequest();  }  else if (window.ActiveXObject) {    // IE中的XMLHttpRequest對象建立    httprequest = new ActiveXObject("Microsoft.XMLHTTP");  }  if (!httprequest) {    alert("建立httprequest對象出現異常！");  }  httprequest.open("POST", "Handler.ashx", true);  //httprequest向handler發送post請求，最後參數是設定是否為非同步請求,true為非同步，false為同步  httprequest.onreadystatechange = function () {    //指定onreadystatechange事件控制代碼對應的函數    if (httprequest.readyState == 4) {      //4代表格服務器返回完成      if (httprequest.status == 200) {        //200代表成功了        document.getElementById("text1").value = httprequest.responseText;        //responsetext表示伺服器返回的文本,還有一種方式是responseXML是為了擷取伺服器返回的xml      }      else {        alert("AJAX伺服器返回錯誤！");      }    }  }  httprequest.send();  //在這裡才真正的向伺服器端發送請求}

我們用jquery來前台js代碼會變得十分簡潔：

基於jquery編寫的js代碼：

注意：HTML代碼要把button的onclick事件去掉，因為我們直接在js用了事件綁定。

$(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;      }    });  });});

不得不說jquery“簡約而不簡單”……

jquery中的$.ajax集合了get、post方法，預設的是get。

如果直接用POST的話，代碼更簡單

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

樣本二：

一、XMLHttpRequest實現擷取資料

不使用jQuery實現頁面不重新整理擷取內容的方式，我們這裡採用XMLHttpRequest原生代碼實現；

js代碼如下：

//1.擷取a節點，並為其添加Oncilck響應函數document.getElementsByTagName("a")[0].onclick = function(){　　 //3、建立一個XMLHttpRequest();  var request = new XMLHttpRequest();  //4、準備發送請求的資料url  var url = this.href;  var method = "GET";  //5、調用XMLHttpRequest對象的open方法  request.open(method,url);  //6、調用XMLHttpRequest對象的send方法  request.send(null);  //7、為XMLHttpRequest對象添加onreadystatechange 響應函數  request.onreadystatechange = function(){    //8、判斷響應是否完成：XMLHttpRequest 對象的readystate的屬性值為4的時候    if(request.readyState == 4){       //9、在判斷響應是否可用：XMLHttpRequest 對象status 屬性值為200      if(request.status == 200){           //10、響應結果           alert(request.responseText);      }       }    }          //2、取消a節點的額預設行為      return false;    }

插入HTML代碼：

<a href = "hello.txt">點擊擷取常值內容</a>

二、jQuery實現ajax擷取資訊

這個例子是動態從後台擷取資料來改變下拉按鈕的內容；

js代碼如下：

function bindCarteam0(){     //通過URL請求資料     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類型有get和post兩種；

post 可以傳輸的資料量比較大，get有位元組限制；

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More