成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

ajax數(shù)據(jù)傳輸方式詳細(xì)介紹

這篇文章主要介紹“ajax數(shù)據(jù)傳輸方式詳細(xì)介紹”，在日常操作中，相信很多人在ajax數(shù)據(jù)傳輸方式詳細(xì)介紹問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ajax數(shù)據(jù)傳輸方式詳細(xì)介紹”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、成都微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十載以來，已經(jīng)為上千多家成都LED顯示屏各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的上千多家客戶與我們一路同行，見證我們的成長(zhǎng)；未來，我們一起分享成功的喜悅。

一、純文本方式

1、發(fā)送/接收數(shù)據(jù)：

Code is cheap.看代碼：
testJs.js

// 此函數(shù)等價(jià)于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對(duì)象，以發(fā)送ajax請(qǐng)求 
function createXMLHTTP() {
  var xmlHttp = false;
  var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
             "Microsoft.XMLHTTP"];
  for (var i = 0; i < arrSignatures.length; i++) {
    try {
      xmlHttp = new ActiveXObject(arrSignatures[i]);
      return xmlHttp;
    }
    catch (oError) {
      xmlHttp = false; //ignore
    }
  }
  // throw new Error("MSXML is not installed on your system."); 
  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 發(fā)送ajax處理請(qǐng)求(這里簡(jiǎn)單驗(yàn)證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是test)
function validatePwd(oTxt) {
  var url = "/AjaxOperations.aspx";
  xmlReq.open("post", url, true);
  xmlReq.setRequestHeader("Content-Length", oTxt.value.length + $("txtUserName").value.length);
  xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlReq.onreadystatechange = callBack;
  xmlReq.send("action=chkPwd&userInfos=" + escape(oTxt.value + "/" + $("txtUserName").value)); // 發(fā)送文本
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      alert(xmlReq.responseText); // 接收文本
    }
    else if (xmlReq.status == 404) {
      alert("Requested URL is not found.");
    } else if (xmlReq.status == 403) {
      alert("Access denied.");
    } else
      alert("status is " + xmlReq.status);
  }
}

幾個(gè)附加文件源碼：

jsTest.htm

<html>
<head>
<title>js test</title>
  <script src="js/testJs.js" type="text/javascript"></script> 
</head>
<body>
<form id="form1">
<div>
 用戶名：<input id="txtUserName" name="txtUserName" type="text" /> &nbsp;密碼：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></div>
</form>
</body>
</html>

AjaxOperations.aspx

復(fù)制代碼 代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

AjaxOperations.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
  public partial class AjaxOperations : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "chkPwd")
      {
        string responseTxt = "用戶名和密碼不匹配！";
        string tempStr = Request["userInfos"];
        /* 測(cè)試用 實(shí)際項(xiàng)目中可以對(duì)數(shù)據(jù)庫(kù)進(jìn)行檢索等等相關(guān)操作，這里簡(jiǎn)化了 */
        if (tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test")
        {
          responseTxt = "驗(yàn)證通過！";
        }
        Response.Write(responseTxt);
      }
    }
  }
}

一一保存文件，ctrl+F5，運(yùn)行試試看吧。

上面這種方式是最簡(jiǎn)單最直接也是最有效的方式。熟練使用最佳。

二、XML方式

1、發(fā)送XML數(shù)據(jù)

testJs.js

// 此函數(shù)等價(jià)于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對(duì)象，以發(fā)送ajax請(qǐng)求 
function createXMLHTTP() {
  var xmlHttp = false;
  var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
             "Microsoft.XMLHTTP"];
  for (var i = 0; i < arrSignatures.length; i++) {
    try {
      xmlHttp = new ActiveXObject(arrSignatures[i]);
      return xmlHttp;
    }
    catch (oError) {
      xmlHttp = false; //ignore
    }
  }
  // throw new Error("MSXML is not installed on your system."); 
  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 發(fā)送ajax處理請(qǐng)求(這里簡(jiǎn)單驗(yàn)證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是test)
function validatePwd(oTxt) {
  var url = "/AjaxOperations.aspx?action=xmlOp";
  var xmlStr = "<profile>" +
  " <userName>" + escape($("txtUserName").value) + "</userName>" +
  " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" +
  "</profile>";
  xmlReq.open("post", url, true);
  // Tell the server you're sending it XML
  xmlReq.setRequestHeader("Content-Type", "text/xml"); // 這里注意
  xmlReq.onreadystatechange = callBack;
  xmlReq.send(xmlStr); // 發(fā)送XML
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      alert(xmlReq.responseText); // 接收文本
    }
    else if (xmlReq.status == 404) {
      alert("Requested URL is not found.");
    } else if (xmlReq.status == 403) {
      alert("Access denied.");
    } else
      alert("status is " + xmlReq.status);
  }
}

jsTest.htm文件不變，AjaxOperations.aspx的HTML文件內(nèi)容不變，服務(wù)器端.CS處理代碼如下：

AjaxOperations.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
namespace WebTest2008
{
  public partial class AjaxOperations : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 處理xml
      {
        XmlDocument doc = new XmlDocument();
        try
        {
          doc.Load(Request.InputStream); //獲取xml數(shù)據(jù)(這里需要注意接受xml數(shù)據(jù)的方法)
        }
        catch (Exception ex)
        {
          throw ex;
        }
        string responseTxt = "";
        string tempName = doc.SelectSingleNode("profile/userName").InnerText;
        string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText;
        if (tempName == "test" && tempPwd == "test")
        {
          responseTxt = "驗(yàn)證通過！";
        }
        else responseTxt = "驗(yàn)證失??！";
        Response.Write(responseTxt); // 寫文本
      }
    }
  }
}

很簡(jiǎn)單的代碼，運(yùn)行看看吧。

2、接收XML數(shù)據(jù)：

我們看到，上面兩個(gè).js文件里處理返回?cái)?shù)據(jù)時(shí)都用到了xmlReq.responseText的屬性，下面我們?cè)囋嚳磝mlReq.responseXML屬性：

testJs.js

// 此函數(shù)等價(jià)于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對(duì)象，以發(fā)送ajax請(qǐng)求 
function createXMLHTTP() {
  var xmlHttp = false;
  var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
             "Microsoft.XMLHTTP"];
  for (var i = 0; i < arrSignatures.length; i++) {
    try {
      xmlHttp = new ActiveXObject(arrSignatures[i]);
      return xmlHttp;
      }
    catch (oError) {
      xmlHttp = false; //ignore
    }
  }
  // throw new Error("MSXML is not installed on your system."); 
  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 發(fā)送ajax處理請(qǐng)求(這里簡(jiǎn)單驗(yàn)證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是test)
function validatePwd(oTxt) {
  var url = "/AjaxOperations.aspx?action=xmlOp";
  var xmlStr = "<profile>" +
  " <userName>" + escape($("txtUserName").value) + "</userName>" +
  " <userPwd>" + escape($("txtPwd").value) + "</userPwd>" +
  "</profile>";
  xmlReq.open("post", url, true);
  // Tell the server you're sending it XML
  xmlReq.setRequestHeader("Content-Type", "text/xml");
  xmlReq.onreadystatechange = callBack;
  xmlReq.send(xmlStr); // 發(fā)送XML
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      var xmlDoc = xmlReq.responseXML; // 接收XML
      //      var nodes = xmlDoc.childNodes;
      //      alert("文件根標(biāo)簽的名稱： " + xmlDoc.documentElement.tagName);
      //      alert("根元素共有子節(jié)點(diǎn)個(gè)數(shù): " + xmlDoc.documentElement.childNodes.length);
      alert(xmlDoc.documentElement.childNodes(0).text);
    }
    else if (xmlReq.status == 404) {
      alert("Requested URL is not found.");
    } else if (xmlReq.status == 403) {
      alert("Access denied.");
    } else
      alert("status is " + xmlReq.status);
  }
}

同樣，jsTest.htm文件不變，AjaxOperations.aspx的HTML文件內(nèi)容不變，服務(wù)器端.CS處理代碼稍作修改如下：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
namespace WebTest2008
{
  public partial class AjaxOperations : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "xmlOp") // 處理xml
      {
        XmlDocument doc = new XmlDocument();
        try
        {
          doc.Load(Request.InputStream); //獲取xml數(shù)據(jù)
        }
        catch (Exception ex)
        {
          throw ex;
        }
        string responseXmlTxt = "";
        string tempName = doc.SelectSingleNode("profile/userName").InnerText;
        string tempPwd = doc.SelectSingleNode("profile/userPwd").InnerText;
        if (tempName == "test" && tempPwd == "test")
        {
          responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?> <msg>驗(yàn)證通過！</msg>"; // 測(cè)試用，簡(jiǎn)單的xml文件
        }
        else responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><msg>驗(yàn)證失??！</msg>";
        Response.ContentType = ("text/xml;charset=UTF-8"); // 這里必須要設(shè)置，否則客戶端接收不到這里寫好的xml文件
        Response.Write(responseXmlTxt); // 寫xml
        Response.End();
      }
    }
  }
}

好了，前面兩種方法是大家平時(shí)開發(fā)中比較熟悉的方式，下面我們來看看第三種方式。

三、JSON方式

json的準(zhǔn)備知識(shí)：

json是一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧。json是JavaScript 的原生格式，這意味著在 JavaScript 中處理json格式的 數(shù)據(jù)不需要任何特殊的API 或工具包。json的語法規(guī)則其實(shí)很簡(jiǎn)單：對(duì)象是一個(gè)無序的“‘名稱/值'對(duì)”集合。一個(gè)對(duì)象以“{”（左括號(hào)）開始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”（冒號(hào)）；“‘名稱/值' 對(duì)”之間使用“,”（逗號(hào)）分隔?？磦€(gè)例子先：

function testJson() {
  //定義一個(gè)user(json的格式,其實(shí)就是定義一個(gè)js函數(shù)(變量)的方式而已)
  var user =
  {
    "username": "jeff wong",
    "age": 25,
    "info": { "tel": "12345678", "cellphone": "13312345678" },
    "address": // 數(shù)組
      [
        { "city": "beijing", "postcode": "101110" },
        { "city": "ny city", "postcode": "911119" }
      ]
  }
  alert(user.username);
  alert(user.age);
  alert(user.info.cellphone);
  alert(user.address[0].city);
  alert(user.address[0].postcode);
  user.username = "xiao wang";
  alert(user.username); 
}

上面的定義方式看起來很簡(jiǎn)單，但是如果字段眾多，命名方式混雜，出錯(cuò)的概率大大增加，怎么辦？這時(shí)候你就會(huì)想到用程序的方式生成json數(shù)據(jù)。json提供了json.js包，專門提供了幾種常用的json處理函數(shù)。下載下來，（json.js點(diǎn)擊此處本站下載。） ，將其引入然后就可以簡(jiǎn)單的使用object.toJSONString()轉(zhuǎn)換成json數(shù)據(jù)。看代碼：

function Car(maker, model, year, color) {
  this.maker = maker;
  this.model = model;
  this.year = year;
  this.color = color;
}
function testJson() {
  var tempCar = new Car("VW", "S", 1999, "yellow");
  alert(tempCar.toJSONString());
}

也可以使用eval或者parseJSON()方法來轉(zhuǎn)換json數(shù)據(jù)到object：

function testJson() {
  var str = '{ "name": "jeff wong", "age": 25,"address":"beijing"}';
  var tempObj = eval('(' + str + ')');
  alert(tempObj.toJSONString()); //使用eval方法
  var tempObj1 = str.parseJSON();
  alert(tempObj1.toJSONString()); // 或者使用parseJSON()方法
}

關(guān)于json.js的學(xué)習(xí)，請(qǐng)參考網(wǎng)上其他資源，這里我不再贅述了。說了這么多，實(shí)踐環(huán)節(jié)開始了：

ajax利用json發(fā)送/接收數(shù)據(jù)：

// 此函數(shù)等價(jià)于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 創(chuàng)建 XMLHttpRequest對(duì)象，以發(fā)送ajax請(qǐng)求 
function createXMLHTTP() {
  var xmlHttp = false;
  var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
             "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
             "Microsoft.XMLHTTP"];
  for (var i = 0; i < arrSignatures.length; i++) {
    try {
      xmlHttp = new ActiveXObject(arrSignatures[i]);
      return xmlHttp;
    }
    catch (oError) {
      xmlHttp = false; //ignore
    }
  }
  // throw new Error("MSXML is not installed on your system."); 
  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 發(fā)送ajax處理請(qǐng)求(這里簡(jiǎn)單驗(yàn)證用戶名和密碼的有效性，默認(rèn)正確的輸入：用戶名和密碼都是test)
function validatePwd(oTxt) {
  var url = "/AjaxOperations.aspx?action=jsonOp";
  // JSON就只是文本,由于不需要特殊編碼而且每個(gè)服務(wù)器端腳本都能處理文本數(shù)據(jù)，所以可以輕松利用JSON并將其應(yīng)用到服務(wù)器。
  var str = '{ "userName":"' + $("txtUserName").value + '", "userPwd": "' + $("txtPwd").value + '"}';
  var jsonStr = str.parseJSON().toJSONString();   // you're sending it JSON
  xmlReq.open("post", url, true);
  xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlReq.onreadystatechange = callBack;
  xmlReq.send("sendStr=" + jsonStr); // 發(fā)送JSON(在服務(wù)器上解釋JSON)
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      var jsonStr = xmlReq.responseText.parseJSON().toJSONString(); //轉(zhuǎn)化為json數(shù)據(jù)
      alert(jsonStr);
    }
    else if (xmlReq.status == 404) {
      alert("Requested URL is not found.");
    } else if (xmlReq.status == 403) {
      alert("Access denied.");
    } else
      alert("status is " + xmlReq.status);
  }
}

附加文件，AjaxOperations.aspx的html頁面沒有改變，AjaxOperations.aspx.cs代碼稍作調(diào)整如下：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
  public partial class AjaxOperations : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      if (!string.IsNullOrEmpty(Request["action"]) && Request["action"] == "jsonOp") // 處理JSON
      {
        string responseJsonTxt = "";
        string tempStr = Request["sendStr"].Trim(new char[] { '{', '}' }); // 在服務(wù)器上解釋JSON需要引用一個(gè)能夠轉(zhuǎn)化JSON的組件:Json.Net,這里簡(jiǎn)單測(cè)試，略過Json.Net
        if (tempStr.Split(new char[] { ',' })[0].Split(new char[] { ':' })[1] == "\"test\"" && tempStr.Split(new char[] { ',' })[1].Split(new char[] { ':' })[1] == "\"test\"")
        {
          responseJsonTxt = "{\"msg\":\"驗(yàn)證通過！\"}"; // 測(cè)試用
        }
        else responseJsonTxt = "{\"msg\":\"驗(yàn)證失??！\"}";
        Response.Write(responseJsonTxt);
        Response.End();
      }
    }

jsTest.html引入json.js文件（必須下載json.js文件，否則js報(bào)錯(cuò)），如下：

<html>
<head>
 <title>js test</title>
 <script src="js/json.js" type="text/javascript"></script>
 <script src="js/testJs.js" type="text/javascript"></script>
</head>
<body>
 <form id="form1">
 <div>
 用戶名：<input id="txtUserName" name="txtUserName" type="text" />
 &nbsp;密碼：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></div>
 </form>
</body>
</html>

到此，關(guān)于“ajax數(shù)據(jù)傳輸方式詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

新聞名稱：ajax數(shù)據(jù)傳輸方式詳細(xì)介紹
網(wǎng)頁路徑：http://jinyejixie.com/article22/psicjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、小程序開發(fā)、關(guān)鍵詞優(yōu)化、定制開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)
正阳县| 永登县| 淮阳县| 峨山| 当雄县| 额尔古纳市| 长治县| 贡嘎县| 大兴区| 子长县| 古蔺县| 小金县| 荆门市| 杭锦后旗| 徐州市| 璧山县| 武汉市| 闻喜县| 清水县| 徐州市| 墨脱县| 开化县| 红原县| 五家渠市| 民县| 彰化县| 泰和县| 资中县| 平南县| 天祝| 石狮市| 石阡县| 南木林县| 澄迈县| 贵州省| 安岳县| 化州市| 会东县| 忻城县| 三台县| 寻乌县|