Ajax訪問伺服器的幾種方式

最後更新：2018-12-05 來源：互聯網

上載者：User

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

今天，學習到了三種通過Ajax訪問後台資料庫的方式，前台是javascript+html，後台是一個handler（一般處理常式），對於原理上面的東西不做太多描述，在輸入使用者名稱後，進行使用者名稱校正，本執行個體採用的是非同步請求方式，就是將open的第三個參數設定為true，如果要採用同步的請求方式，改成false即可，就不需要onreadystatechange方法來進行監聽

一、處理字串或者html（GET）

前台：

<!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>使用者註冊</title>
<script type="text/javascript">
//建立XMLHttpRequest對象
function createXMLHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for (var n = 0; n < MSXML.length; n++) {
try {
xmlhttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) { }
}
}
return xmlhttp;
}

//使用Ajax的步驟，GET請求
function checkUserByAjaxByGet() {
var name = document.getElementById("name").value;

//第一步，得到一個XMLHttpRequest對象
//var xhr = new XMLHttpRequest();
//如果是IE，就需要使用ActiveX組件
//var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

var xhr = createXMLHttpRequest();
//第二步，建立一個串連請求，false表示同步執行，只有當伺服器執行完成後才繼續執行;true表示非同步，無需等待伺服器執行結果繼續執行;常用方式為true（非同步）
xhr.open("GET", "checkUserPostOrGetHandler.ashx?name=" + name, true);

//設定一個針對reandyonchange的事件的監聽函數
xhr.onreadystatechange = function() {
//document.getElementById("statusMsg").innerHTML += "readyState:" + xhr.readyState + ",status" + xhr.status + "<br/>";
//readyState：0、代表未初始化，還沒有調用open方法；1、代表正在載入。open方法已被調用，但send方法還沒有被調用；2、代表已經載入完畢，send已被調用，請求已經開始；3、代表互動中，伺服器正在發送響應；4、代表完成，響應發送完畢
//status：404、沒找到頁面(not found)；403、禁止訪問(forbidden)；500、內部伺服器出錯(internal service error)；200、一起正常(ok)；304、沒有被修改(not modified)（伺服器返回304狀態，表示源檔案沒有被修改
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
document.getElementById("msg").innerHTML = xhr.responseText;
}
}
}
//第三步，發起請求
xhr.send(null);
}
</script>
</head>
<body>
<form id="form1" runat="server" >

<p>
使用者名稱：
<input type="text" id="name" runat="server" onchange="checkUserByAjaxByGet()"/>
</p>
<div id="msg" ></div>
<p>
密碼：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
後台：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ExtjsApplication.Demo3
{
/// <summary>
/// $codebehindclassname$ 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class checkUserPostOrGetHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request.Params["name"];
string msg = "恭喜您，該使用者可用";
if ("admin".Equals(name)) {
//實際應該調用後台資料庫或者商務邏輯
msg = "對不起，使用者已經存在";
}
context.Response.Write(msg);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

二、處理字串或者html（POST）

前台：

//使用Ajax的步驟，POST請求方式
function checkUserByAjaxByPost() {
var name = document.getElementById("name").value;

//第一步，建立XHR對象
var xhr = createXMLHttpRequest();
//第二步，建立一個串連請求，false表示同步執行，只有當伺服器執行完成後才繼續執行;true表示非同步，無需等待伺服器執行結果繼續執行;常用方式為true（非同步）
xhr.open("POST", "checkUserPostOrGetHandler.ashx", true);

//第三步，設定一個針對reandyonchange的事件的監聽函數，負責處理返回結果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = xhr.responseText;
document.getElementById("msg").innerHTML = xhr.responseText;
if (ret == "對不起，使用者已經存在") {
document.getElementById("name").focus();
}
}
}
}
//佈建要求頭，如果是post請求方式，必須設定，表示以表單形式傳送檔案，相當於form表單裡面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，發起請求
xhr.send("name="+name+"&password=pppp");
}
</script>
</head>
<body>
<form id="form1" runat="server" >

<p>
使用者名稱：
<input type="text" id="name" runat="server" onchange="checkUserByAjaxByPost()"/>
</p>
<div id="msg" ></div>
<p>
密碼：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
後台：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

public bool IsReusable
{
get
{
return false;
}
}
}
}

三、處理XML

前台：

//使用Ajax的步驟，XML訪問伺服器
function checkUserByAjaxByXML() {
var name = document.getElementById("name").value;

//第三步，設定一個針對reandyonchange的事件的監聽函數，負責處理返回結果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = xhr.responseXML;
var root = ret.documentElement;
var codeNode = root.getElementsByTagName("code")[0];
var MsgNode = root.getElementsByTagName("msg")[0];
//alert(root.getElementsByTagName("code")[0].nodeName);
//alert(root.firstChild.firstChild.nodeValue);
//alert(root.childNodes[0].childNodes[0].nodeValue);
//alert(ret.documentElement.nodeName);
// alert(ret);
// document.getElementById("msg").innerHTML = xhr.responseXML;
// if (ret == "對不起，使用者已經存在") {
// document.getElementById("name").focus();
// }
document.getElementById("msg").innerHTML = MsgNode.firstChild.nodeValue;
if (codeNode.firstChild.nodeValue == "1") {
document.getElementById("name").focus();
}
}
}
}
//佈建要求頭，如果是post請求方式，必須設定，表示以表單形式傳送檔案，相當於form表單裡面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，發起請求
xhr.send("name=" + name + "&password=pppp");
}
</script>
</head>
<body>
<form id="form1" runat="server" >

<p>
使用者名稱：
<input type="text" id="name" runat="server" onchange="checkUserByAjaxByXML()"/>
</p>
<div id="msg" ></div>
<p>
密碼：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
後台：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/xml";
string name = context.Request.Params["name"];
string msg = "恭喜您，該使用者可用";
int code = 0;
if ("admin".Equals(name))
{
//實際應該調用後台資料庫或者商務邏輯
msg = "對不起，使用者已經存在";
code = 1;
}
//context.Response.Write(msg);
context.Response.Write("<result><code>"+code+"</code><msg>"+msg+"</msg></result>");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

四、處理JSON

前台：

//使用Ajax的步驟，JSON訪問伺服器
function checkUserByAjaxByJson() {
var name = document.getElementById("name").value;

//第三步，設定一個針對reandyonchange的事件的監聽函數，負責處理返回結果
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
var ret = eval("(" + xhr.responseText + ")");
//alert(ret);
document.getElementById("msg").innerHTML = ret.msg;
if (ret.code == "1") {
document.getElementById("name").focus();
}
}
}
}
//佈建要求頭，如果是post請求方式，必須設定，表示以表單形式傳送檔案，相當於form表單裡面的enctype="application/x-www-form-urlencoded"
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，發起請求
xhr.send("name=" + name + "&password=pppp");
}

</script>
</head>
<body>
<form id="form1" runat="server" >

<p>
使用者名稱：
<input type="text" id="name" runat="server" onchange="checkUserByAjaxByJson()"/>
</p>
<div id="msg" ></div>
<p>
密碼：
<input type="password" id="pwd" />
</p>
</form>
<div id="statusMsg"></div>
</body>
</html>
後台：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string name = context.Request.Params["name"];
string msg = "恭喜您，該使用者可用";
int code = 0;
if ("admin".Equals(name))
{
//實際應該調用後台資料庫或者商務邏輯
msg = "對不起，使用者已經存在";
code = 1;
}
//context.Response.Write(msg);
//context.Response.Write("{code:'"+code+"',msg:'"+msg+"',obj:{name:'obj'}}");
context.Response.Write("{code:'" + code + "',msg:'" + msg + "'}");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

本文章原先以中文撰寫並發佈於 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