Maison > Article > interface Web > Explication détaillée des exemples de méthodes de transmission de données ajax

Explication détaillée des exemples de méthodes de transmission de données ajax

亚连original: 2018-05-24 14:30:282781parcourir

Cet article présente principalement la méthode de transmission de données ajax. Il combine une analyse plus détaillée avec des exemples pour résumer les principes de la transmission de données ajax et les techniques de mise en œuvre spécifiques pour la transmission de données au format texte, xml et json. est nécessaire. Les amis peuvent se référer à

Cet article décrit la méthode de transmission de données ajax avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Lors de l'envoi et de la réception d'informations dans des applications asynchrones, vous pouvez généralement choisir le texte brut et XML comme format de données (veuillez vous référer aux « Notes d'étude JQuery : Explication détaillée des exemples d'utilisation d'Ajax" 》), il existe désormais une autre méthode populaire : JSON (JavaScript Object Notation). Bon, voici quelques exemples d'application asynchrone de ces trois formats de données en ajax.

1. Mode texte brut

1. Envoyer/recevoir des données :

Le code est bon marché :
testJs. js

// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(&#39;document.getElementById("&#39; + s + &#39;")&#39;); } else { return eval(&#39;document.all.&#39; + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求 
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 != &#39;undefined&#39;) {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 发送ajax处理请求(这里简单验证用户名和密码的有效性，默认正确的输入：用户名和密码都是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)); // 发送文本
}
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);
  }
}

Plusieurs codes sources de fichiers supplémentaires :

jsTest.htm

<html>
<head>
<title>js test</title>
  <script src="js/testJs.js" type="text/javascript"></script> 
</head>
<body>
<form id="form1">
<p>
 用户名：<input id="txtUserName" name="txtUserName" type="text" />  密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p>
</form>
</body>
</html>

AjaxOperations.aspx

fba3096a4254f7e0042e0cf5e72a7271

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"];
        /* 测试用 实际项目中可以对数据库进行检索等等相关操作，这里简化了 */
        if (tempStr.Split(new char[] { &#39;/&#39; }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { &#39;/&#39; }, StringSplitOptions.RemoveEmptyEntries)[1] == "test")
        {
          responseTxt = "验证通过！";
        }
        Response.Write(responseTxt);
      }
    }
  }
}

Enregistrer les fichiers un par un, ctrl+F5, essayez de l'exécuter.

La méthode ci-dessus est la méthode la plus simple, la plus directe et la plus efficace. Mieux utilisé habilement.

2. Méthode XML

1. Envoyer des données XML

testJs.js

// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(&#39;document.getElementById("&#39; + s + &#39;")&#39;); } else { return eval(&#39;document.all.&#39; + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求 
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 != &#39;undefined&#39;) {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 发送ajax处理请求(这里简单验证用户名和密码的有效性，默认正确的输入：用户名和密码都是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&#39;re sending it XML
  xmlReq.setRequestHeader("Content-Type", "text/xml"); // 这里注意
  xmlReq.onreadystatechange = callBack;
  xmlReq.send(xmlStr); // 发送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);
  }
}

le fichier jsTest.htm est not Le contenu du fichier HTML d'AjaxOperations.aspx reste inchangé, et le code de traitement .CS côté serveur est le suivant :

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数据(这里需要注意接受xml数据的方法)
        }
        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 = "验证通过！";
        }
        else responseTxt = "验证失败！";
        Response.Write(responseTxt); // 写文本
      }
    }
  }
}

C'est un très code simple, exécutons-le et voyons.

2. Recevoir des données XML :

Nous voyons que l'attribut xmlReq.responseText est utilisé dans les deux fichiers .js ci-dessus lors du traitement des données de retour :

testJs.js

// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(&#39;document.getElementById("&#39; + s + &#39;")&#39;); } else { return eval(&#39;document.all.&#39; + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求 
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 != &#39;undefined&#39;) {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 发送ajax处理请求(这里简单验证用户名和密码的有效性，默认正确的输入：用户名和密码都是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&#39;re sending it XML
  xmlReq.setRequestHeader("Content-Type", "text/xml");
  xmlReq.onreadystatechange = callBack;
  xmlReq.send(xmlStr); // 发送XML
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      var xmlDoc = xmlReq.responseXML; // 接收XML
      //      var nodes = xmlDoc.childNodes;
      //      alert("文件根标签的名称： " + xmlDoc.documentElement.tagName);
      //      alert("根元素共有子节点个数: " + 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);
  }
}

De même, le fichier jsTest.htm reste inchangé, le contenu du fichier HTML d'AjaxOperations.aspx reste inchangé et le code de traitement .CS côté serveur est légèrement modifié comme suit :

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数据
        }
        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>验证通过！</msg>"; // 测试用，简单的xml文件
        }
        else responseXmlTxt = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><msg>验证失败！</msg>";
        Response.ContentType = ("text/xml;charset=UTF-8"); // 这里必须要设置，否则客户端接收不到这里写好的xml文件
        Response.Write(responseXmlTxt); // 写xml
        Response.End();
      }
    }
  }
}

D'accord, les deux premières méthodes sont familières à tout le monde dans le développement quotidien. Jetons un coup d'œil à la troisième méthode.

3. Méthode JSON

Connaissance préparatoire de json :

json est un format de données simple qui est plus léger que XML. json est le format natif de JavaScript, ce qui signifie que le traitement des données au format json en JavaScript ne nécessite aucune API ou boîte à outils spéciale. Les règles de syntaxe de json sont en réalité très simples : un objet est une collection non ordonnée de « paires nom/valeur ». Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par un "," (virgule). Regardons d'abord un exemple :

function testJson() {
  //定义一个user(json的格式,其实就是定义一个js函数(变量)的方式而已)
  var user =
  {
    "username": "jeff wong",
    "age": 25,
    "info": { "tel": "12345678", "cellphone": "13312345678" },
    "address": // 数组
      [
        { "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); 
}

La méthode de définition ci-dessus semble très simple, mais que devons-nous faire s'il existe de nombreux champs et des méthodes de dénomination mixtes, ce qui augmente considérablement la probabilité d'erreurs ? À ce stade, vous penserez à utiliser un programme pour générer des données json. json fournit le package json.js, qui fournit spécifiquement plusieurs fonctions de traitement json couramment utilisées. Téléchargez-le (json.js cliquez ici pour télécharger depuis ce site.), importez-le puis utilisez simplement object.toJSONString() pour le convertir en données json. Regardez le code :

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

Vous pouvez également utiliser la méthode eval ou parseJSON() pour convertir les données json en objet :

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

Pour en savoir plus sur json.js, veuillez vous référer vers d’autres ressources en ligne, je n’entrerai pas dans les détails ici. Cela dit, la partie pratique commence :

ajax utilise json pour envoyer/recevoir des données :

// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(&#39;document.getElementById("&#39; + s + &#39;")&#39;); } else { return eval(&#39;document.all.&#39; + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求 
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 != &#39;undefined&#39;) {
    xmlHttp = new XMLHttpRequest();
  }
  return xmlHttp;
}
var xmlReq = createXMLHTTP();
// 发送ajax处理请求(这里简单验证用户名和密码的有效性，默认正确的输入：用户名和密码都是test)
function validatePwd(oTxt) {
  var url = "/AjaxOperations.aspx?action=jsonOp";
  // JSON就只是文本,由于不需要特殊编码而且每个服务器端脚本都能处理文本数据，所以可以轻松利用JSON并将其应用到服务器。
  var str = &#39;{ "userName":"&#39; + $("txtUserName").value + &#39;", "userPwd": "&#39; + $("txtPwd").value + &#39;"}&#39;;
  var jsonStr = str.parseJSON().toJSONString();   // you&#39;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); // 发送JSON(在服务器上解释JSON)
}
function callBack() {
  if (xmlReq.readyState == 4) {
    if (xmlReq.status == 200) {
      var jsonStr = xmlReq.responseText.parseJSON().toJSONString(); //转化为json数据
      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);
  }
}

Fichier ci-joint, la page html d'AjaxOperations.aspx n'a pas changé, AjaxOperations. aspx.cs Le code est légèrement ajusté comme suit :

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[] { &#39;{&#39;, &#39;}&#39; }); // 在服务器上解释JSON需要引用一个能够转化JSON的组件:Json.Net,这里简单测试，略过Json.Net
        if (tempStr.Split(new char[] { &#39;,&#39; })[0].Split(new char[] { &#39;:&#39; })[1] == "\"test\"" && tempStr.Split(new char[] { &#39;,&#39; })[1].Split(new char[] { &#39;:&#39; })[1] == "\"test\"")
        {
          responseJsonTxt = "{\"msg\":\"验证通过！\"}"; // 测试用
        }
        else responseJsonTxt = "{\"msg\":\"验证失败！\"}";
        Response.Write(responseJsonTxt);
        Response.End();
      }
    }

jsTest.html introduit le fichier json.js (le fichier json.js doit être téléchargé, sinon js signalera une erreur), comme suit :

<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">
 <p>
 用户名：<input id="txtUserName" name="txtUserName" type="text" />
  密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></p>
 </form>
</body>
</html>

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus