ホームページ > 記事 > ウェブフロントエンド > ajaxデータ送信方式例を詳しく解説
この記事では、主に、より詳細な分析と例を組み合わせて、Ajax データ送信の原理と、テキスト、XML、および JSON 形式のデータを送信するための具体的な実装テクニックをまとめています。 need it can 参考までに
この記事では、ajax データ送信方法を例とともに説明します。参考までに皆さんとシェアしてください。詳細は以下の通りです:
非同期アプリケーションで情報を送受信する場合、データ形式としてプレーンテキストとXMLを選択するのが一般的です(「JQuery学習ノート:JQueryの詳細解説」を参照してください) Ajax の使用例」を参照してください。現在では、より一般的な方法である JSON (JavaScript Object Notation) も使用されています。さて、ここで、ajax でのこれら 3 つのデータ形式の非同期アプリケーションを示すいくつかの例を示します。
1. プレーンテキストメソッド
1. データの送受信:
コードを見てください:
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 != 'undefined') { 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); } }
いくつかの追加ファイルソースコード:
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
4784cc8617a2795dfb46f310286bec69
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[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test") { responseTxt = "验证通过!"; } Response.Write(responseTxt); } } } }
保存1つずつファイル、ctrl+F5、実行してみてください。
上記の方法は、最も簡単で、最も直接的で、最も効果的な方法です。上手に使うのがベスト。
2. XML メソッド
1. XML データを送信します
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 != 'undefined') { 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'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); } }
jsTest.htm ファイルは変更されず、AjaxOperations.aspx の HTML ファイルの内容は変更されません。処理コードは次のとおりです。
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); // 写文本 } } } }
非常に単純なコードです。実行して見てください。
2. XML データを受信します:
戻りデータを処理するときに、xmlReq.responseText 属性が上記の 2 つの .js ファイルで使用されていることがわかります。xmlReq.responseXML 属性を試してみましょう:
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 != 'undefined') { 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'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); } }
同様に、 jsTest.htm ファイルは変更されず、AjaxOperations.aspx の HTML ファイルの内容は変更されず、サーバー側の .CS 処理コードは次のようにわずかに変更されています。 3 番目の方法を見てみましょう。
3. JSON メソッドjson の予備知識:
json は、xml よりも軽量なシンプルなデータ形式です。 json は JavaScript のネイティブ形式です。つまり、JavaScript での json 形式のデータの処理には特別な API やツールキットは必要ありません。 json の構文規則は実際には非常に単純です。オブジェクトは「名前と値のペア」の順序付けされていないコレクションです。オブジェクトは「{」(左括弧)で始まり「}」(右括弧)で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。まずは例を見てみましょう:
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(); } } } }
上記の定義方法は非常に簡単そうに見えますが、フィールドが多く、命名方法が混在していて、エラーの可能性が大幅に増加した場合はどうすればよいでしょうか?このとき、jsonデータを生成するプログラムを使用することを考えます。 json は、一般的に使用されるいくつかの json 処理関数を具体的に提供する json.js パッケージを提供します。それをダウンロードし (json.js ここをクリックしてこのサイトからダウンロードします。)、インポートしてから、object.toJSONString() を使用して json データに変換します。コードを見てください:
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); }
eval または parseJSON() メソッドを使用して json データをオブジェクトに変換することもできます:
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()); }
json.js の学習については、インターネット上の他のリソースを参照してください。ここでは説明しません。ここで詳細を説明します。ここまで述べたところで、実践的な部分が始まります:
ajax はデータの送受信に json を使用します:
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()方法 }
添付ファイル、AjaxOperations.aspx の HTML ページは変更されていません。AjaxOperations.aspx.cs コードは次のようにわずかに調整されています。以下:
// 此函数等价于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 != 'undefined') { xmlHttp = new XMLHttpRequest(); } return xmlHttp; } var xmlReq = createXMLHTTP(); // 发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test) function validatePwd(oTxt) { var url = "/AjaxOperations.aspx?action=jsonOp"; // JSON就只是文本,由于不需要特殊编码而且每个服务器端脚本都能处理文本数据,所以可以轻松利用JSON并将其应用到服务器。 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); // 发送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); } }
jsTest .html は、次のように json.js ファイルを導入します (json.js ファイルをダウンロードする必要があります。ダウンロードしないと、js がエラーを報告します):
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[] { '{', '}' }); // 在服务器上解释JSON需要引用一个能够转化JSON的组件:Json.Net,这里简单测试,略过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\":\"验证通过!\"}"; // 测试用 } else responseJsonTxt = "{\"msg\":\"验证失败!\"}"; Response.Write(responseJsonTxt); Response.End(); } }
上記は、私が皆さんのためにコンパイルしたものです。将来みんなに役立つでしょう。
関連記事:
ajaxをベースにした簡単な検索実装方法jsとjQueryで送られてくるajaxリクエストを終了する方法ajax呼び出しにおけるIEのキャッシュ問題を解決する方法以上がajaxデータ送信方式例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。