首頁 > 開發者 > Ajax

一個簡單的用戶端調用xmlHttp的ajax例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
一個簡單的用戶端調用xmlHttp的例子。

用戶端調用xmlHttp的過程很簡單，只有5個步驟：
1、建立xmlHttp對象
2、開啟與服務端的串連，同時定義指令發送方式，服務網頁(URL)和請求許可權等。
用戶端通過Open命令開啟與服務端的服務網頁的串連。與普通Http指令傳送一樣，可以用"GET"方法或"POST"方法指向服務端的服務網頁。
3、發送指令。
4、等待並接收服務端返回的處理結果。
5、釋放xmlHttp對象<!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=utf-8" />
<title>xmlHttp test</title>
<script type="text/javascript" language="javascript">
function jb() {
  var A=null;
  try {
    A=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e) {
    try {
      A=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(oc) {
      A=null;
    }
  }

  if ( !A && typeof XMLHttpRequest != "undefined" ) {
    A=new XMLHttpRequest();
  }
  return A;
}

var req = null;
 
function doRequest() {
  req = null;
  //建立xmlHttp對象
  req = jb();
  
  //如果瀏覽器不支援，提示錯誤資訊。
  if (!req) {
    alert("Giving up. Cannot create an XMLHttp instance.");
    return false;
  }
  
  //定義用來處理接收資料的回呼函數
  req.onreadystatechange = callback;
  
  /******* 這部分是以post方式提交的用法 ******/
  //提交參數內容
  var strData = "code=123";
  //資料提交的目標位置
  var url = "default.asp";
  //以post方法，將參數code=123提交給default.jsp去處理
  req.open("POST", url, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");  //用utf-8編碼

  req.send(strData);
  /*******************************************/
  
  /******* 這部分是以get方式提交的用法 ******
  //提交參數內容
  var strData = "code=123";
  //資料提交的目標位置，並將參數以get方式添加到url後面
  var url = "default.asp?" + strData;
  //以get方法，請求url：default.asp?code=123
  req.open("GET", url, true);
  req.send(null);
  /*******************************************/
}  

function callback() {
  /* readyState屬效能夠反映出伺服器在處理請求時的進展狀況。
  0 = uninitialized
  1 = loading
  2 = loaded
  3 = interactive
  4 = complete
  */
  if (req.readyState == 4) {
    /* HTTP status code (i.e., 200, 404, 500, etc.)
    完整的狀態值可參考w3c的列表：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
    我們只關心值為200的OK相應
    */
    if (req.status == 200) {
      showResponse();
    } else {
      alert("There was a problem with the request.");
    }
  }
}
function showResponse(){
  /* 幾種傳回值的接收方法：
  responseBody：結果返回為不帶正負號的整數數組。
  responseStream：結果返回為IStream流。
  responseText ：結果返回為字串。
  responseXML：結果返回為XML格式資料。
  */
  alert(req.responseText);
}
</script>
</head>
<body>
<input type="button" name="Button" value="發出請求" onclick="doRequest()" />
</body>
</html> //default.asp 此略//在伺服器端 Post來的用Request.Form("code")  接收                       Get來的用Request.QueryString("code")

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

相關關鍵詞：
xmlhttp status 404 ajax echo ajax manual ajax payload w3s ajax ajax websocket ajax datagrid
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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