communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 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

亚连
Libérer： 2018-05-24 14:30:28
original
2832 Les gens l'ont consulté

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('document.getElementById("' + s + '")'); } else { return eval('document.all.' + 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);
  }
}
Copier après la connexion

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>
Copier après la connexion

AjaxOperations.aspx

<%@ 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"];
        /* 测试用 实际项目中可以对数据库进行检索等等相关操作，这里简化了 */
        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);
      }
    }
  }
}
Copier après la connexion

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);
  }
}
Copier après la connexion

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); // 写文本
      }
    }
  }
}
Copier après la connexion

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);
  }
}
Copier après la connexion

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();
      }
    }
  }
}
Copier après la connexion

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); 
}
Copier après la connexion

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());
}
Copier après la connexion

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()方法
}
Copier après la connexion

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);
  }
}
Copier après la connexion

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();
      }
    }
Copier après la connexion

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>
Copier après la connexion

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 connexes :

Une méthode simple d'implémentation de recherche basée sur ajax

Comment mettre fin à la requête ajax envoyée avec js et jQuery

Solution au problème de mise en cache IE dans l'appel ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
ajax 数据传输 详解
source：php.cn
Article précédent：Explication détaillée de l'utilisation des événements de composants dans React Article suivant：Parlez brièvement des objets principaux d'AJAX
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...
Depuis 2024-04-04 13:45:50
0
1
3465
Générer du contenu à l'aide d'Ajax - le défilement jusqu'à Id ne fonctionne pas Je génère du contenu de page basé sur des données obtenues via ajax. Le problème que j'ai ...
Depuis 2024-04-04 09:29:39
0
1
397
Comment passer plusieurs listes d'ajax à Django J'ai un problème, je veux obtenir toutes les données de la liste, donc je veux parcourir c...
Depuis 2024-04-03 23:20:06
0
1
362
Téléchargez plusieurs fichiers image dans CodeIgniter en utilisant Ajax et PHP J'ai du mal à télécharger plusieurs fichiers image côté serveur. Ce serait formidable si q...
Depuis 2024-04-03 22:35:03
0
1
318
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal