ajax数据传输方式实例详解

2024-09-01 08:28:13

字体：大中小

来源：转载

供稿：网友

本文实例讲述了ajax数据传输方式。，具体如下：

在异步应用程序中发送和接收信息时，常见的可以选择以纯文本和XML作为数据格式（可参考《jQuery学习笔记之Ajax用法实例详解》）,现在还有一种比较流行的方式：JSON（JavaScript Object Notation）。好了，下面举例说明这三种数据格式在ajax的异步应用。

一、纯文本方式

1、发送/接收数据：

Code is cheap.看代码：
testJs.js

// 此函数等价于document.getElementById /document.allfunction $(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"><div> 用户名：<input id="txtUserName" name="txtUserName" type="text" />  密码：<input id="txtPwd" name="txtPwd" type="password" onblur="validatePwd(this)" /></div></form></body></html>

AjaxOperations.aspx
代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

上一篇：谈谈Ajax原理实现过程

下一篇：IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析