ajax数据传输方式实例详解
这篇文章主要介绍了ajax数据传输方式,结合实例形式较为详细的分析总结了ajax数据传输的原理与传输文本、xml及json格式数据的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了ajax数据传输方式。分享给大家供大家参考,具体如下:
在异步应用程序中发送和接收信息时,常见的可以选择以纯文本和XML作为数据格式(可参考《jQuery学习笔记之Ajax用法实例详解》),现在还有一种比较流行的方式:JSON(JavaScript Object Notation)。好了,下面举例说明这三种数据格式在ajax的异步应用。
一、纯文本方式
1、发送/接收数据:
Code is cheap.看代码:
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
<%@ 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[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[0] == "test" && tempStr.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries)[1] == "test") { responseTxt = "验证通过!"; } Response.Write(responseTxt); } } } }
一一保存文件,ctrl+F5,运行试试看吧。
上面这种方式是最简单最直接也是最有效的方式。熟练使用最佳。
二、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文件内容不变,服务器端.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数据(这里需要注意接受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数据:
我们看到,上面两个.js文件里处理返回数据时都用到了xmlReq.responseText的属性,下面我们试试看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处理代码稍作修改如下:
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是一种简单的数据格式,比xml更轻巧。json是JavaScript 的原生格式,这意味着在 JavaScript 中处理json格式的 数据不需要任何特殊的API 或工具包。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); }
上面的定义方式看起来很简单,但是如果字段众多,命名方式混杂,出错的概率大大增加,怎么办?这时候你就会想到用程序的方式生成json数据。json提供了json.js包,专门提供了几种常用的json处理函数。下载下来,(json.js点击此处本站下载。) ,将其引入然后就可以简单的使用object.toJSONString()转换成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()); }
也可以使用eval或者parseJSON()方法来转换json数据到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()方法 }
关于json.js的学习,请参考网上其他资源,这里我不再赘述了。说了这么多,实践环节开始了:
ajax利用json发送/接收数据:
// 此函数等价于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); } }
附加文件,AjaxOperations.aspx的html页面没有改变,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"] == "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(); } }
jsTest.html引入json.js文件(必须下载json.js文件,否则js报错),如下:
<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>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci ajax数据传输方式实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan

Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL

Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403

Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus

Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem

Apabila ramai rakan menukar telefon Apple mereka, mereka ingin mengimport semua data dalam telefon lama ke telefon baru Secara teori, ia benar-benar boleh dilaksanakan, tetapi dalam praktiknya, adalah mustahil untuk "memindahkan semua" artikel isu ini Senaraikan beberapa cara untuk "memindahkan sebahagian daripada data". 1. iTunes ialah perisian pra-pasang pada telefon mudah alih Apple Ia boleh digunakan untuk memindahkan semua data dalam telefon mudah alih lama, tetapi ia perlu digunakan bersama dengan komputer. Penghijrahan boleh diselesaikan dengan memasang iTunes pada komputer, kemudian menyambungkan telefon dan komputer melalui kabel data, menggunakan iTunes untuk menyandarkan apl dan data dalam telefon, dan akhirnya memulihkan sandaran kepada telefon Apple baharu. 2. iCloudiCloud ialah alat "ruang awan" eksklusif Apple Anda boleh log masuk ke telefon lama anda terlebih dahulu.

Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
