JavaScript原生XMLHttpRequest与jQuery Ajax处理JSON数据详解
作者：闭包旅人时间：2026-10-29 18:27:35浏览：474
本文详细对比了JavaScript原生XMLHttpRequest对象与jQuery插件Ajax方法在发送异步请求及处理JSON数据时的具体实现。涵盖从创建对象、绑定请求、发送请求到解析响应字符串或XML对象的完整流程，并提供前端HTML5表单取值、后端ASHX处理JSON序列化的完整代码示例，适用于IE8至Opera等主流浏览器的开发参考。
原生XMLHttpRequest请求流程详解
本节介绍使用JavaScript原生方式发起Ajax请求的具体步骤。
第一步，实例化XMLHttpRequest对象。该对象是Ajax交互的核心载体，负责封装请求与响应数据。需要注意的是，不同浏览器创建该对象的方式存在差异，需进行兼容性处理。
第二步，确定请求的目标路径。
第三步，调用open()方法配置请求参数并绑定发送动作。
第四步，调用send()方法正式向服务器发送请求。
第五步，通过xmlhttpRequest.responseText属性获取服务器返回的原始字符串数据。
第六步，若需获取XML格式数据，可通过xmlhttpRequest.responseXML属性以XML对象形式接收服务端返回值。
第七步，利用W3C DOM节点树的相关方法和属性，对接收到的XML文档对象进行遍历、检查和解析。
前言说明：
近期项目上线后工作稍有空闲，回顾之前编写的关于JavaScript原生XMLHttpRequest Ajax方法及jQuery插件Ajax方法的代码，特此进行总结。受限于时间，目前仅在IE8、IE9、IE10、Google Chrome、Mozilla Firefox及Opera等常用浏览器中进行了基础测试。若读者在验证测试中发现兼容性问题，欢迎及时反馈，感谢支持。
接下来直接展示相关代码实现：
前后端JSON数据处理代码示例
前端HTML与JavaScript代码部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax练习</title>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
label{width:50px;display:inline-block;}
</style>
</head>
<body>
<div id="contentDiv">
<h2>html5表单元素</h2>
<label>E-mail</label><input type="email" name="UserEmail" id="UserEmail" value="251608027@qq.com" /><br />
<label>URL:</label><input type="url" name="UserURL" id="UserURL" value="http://www.baidu.com" /><br />
<label>Number:</label><input type="number" name="UserNumber" id="UserNumber" min="1" max="100" value="87" /><br />
<label>Range:</label><input type="range" name="UserRange" min="1" max="100" value="78" /><br />
<label>Date:</label><input type="date" name="UserDate" id="UserDate" value="2015-12-01" /><br />
<label>Search:</label><input type="search" name="UserSearch" id="UserSearch" value="search" /><br />
<label id="lblMsg" style="color:Red; width:100%;"></label><br />
<input type="button" id="btnXmlHttp" value="提 交" onclick="return xmlPost();" />
<input type="button" id="btnAjax" value="Ajax提 交" onclick="return Ajax();" />
<input type="button" id="btnPost" value="Post提 交" onclick="return Post();" />
<input type="button" id="btnGet" value="Get提 交" onclick="return Get();" />
<input type="button" id="btnGetJSON" value="GetJSON提 交" onclick="return GetJSON();" />
<input type="button" id="btnCustom" value="Custom提 交" onclick="return Custom();" />
<br /><label id="lblAD" style="color:Red; width:100%;">.NET技术交流群：70895254，欢迎大家</label>
<script type="text/javascript">
//基础数据
var jsonData = {
UserEmail: $("#UserEmail").val(),
UserURL: $("#UserURL").val(),
UserNumber: $("#UserNumber").val(),
UserRange: $("#UserRange").val(),
UserDate: $("#UserDate").val(),
UserSearch: $("#UserSearch").val()
};
//统一返回结果处理
function Data(data, type) {
if (data && data.length > 0) {
var lblMsg = "";
for (i = 0; i < data.length; i++) {
for (var j in data[i]) {
lblMsg += j + "：" + data[i][j];
if (j != "Name" && j != "UserSearch") { lblMsg += "，" }
}
if (i != data.length) { lblMsg += "；"; }
}
$("#lblMsg").html(type + "请求成功，返回结果：" + lblMsg);
}
}
</script>
<script type="text/javascript">
//javascript 原生ajax方法
function createXMLHttp() {
var XmlHttp;
if (window.ActiveXObject) {
var arr = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
for (var i = 0; i < arr.length; i++) {
try {
XmlHttp = new ActiveXObject(arr[i]);
return XmlHttp;
}
catch (error) { }
}
}
else {
try {
XmlHttp = new XMLHttpRequest();
return XmlHttp;
}
catch (otherError) { }
}
}
function xmlPost() {
var xmlHttp = createXMLHttp();
var queryStr = "Ajax_Type=Email&jsonData=" + JSON.stringify(jsonData);
var url = "/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random();
xmlHttp.open('Post', url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryStr);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var data = eval(xmlHttp.responseText);
Data(data, "javascript原生xmlHttp");
}
}
}
</script>
<script type="text/javascript">
//jquery $.ajax方法
function Ajax() {
$.ajax({
url: "/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
type: "Post",
async: false,
data: {
Ajax_Type: "Email",
jsonData: JSON.stringify(jsonData)
},
dataType: "json",
beforeSend: function () { //发送请求前
$("#btnPost").attr('disabled', "true");
},
complete: function () { //发送请求完成后
$("#btnPost").removeAttr("disabled");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error!" + errorThrown);
//alert("请求错误，请重试！");
},
success: function (data) {
Data(data, "Jquery $.ajax");
}
});
}
//jquery $.post方法
function Post() {
$.post("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
{
Ajax_Type: "Email",
jsonData: JSON.stringify(jsonData)
},
function (data) {
Data(data, "Jquery $.post");
}
);
}
//jquery $.getJSON方法
function GetJSON() {
$.getJSON("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
{
Ajax_Type: "Email",
jsonData: JSON.stringify(jsonData)
},
function (data) {
Data(data, "Jquery $.getJSON");
}
);
}
//jquery $.get方法
function Get() {
$.get("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
{
Ajax_Type: "Email",
jsonData: JSON.stringify(jsonData)
},
function (data) {
Data(data, "Jquery $.get");
}
);
}
</script>
<script type="text/javascript">
//javascript原生脚本自定义jquery $.ajax方法
var CustomAjax = function (custom) {
// 初始化
var type = custom.type; //type参数,可选
var url = custom.url; //url参数，必填
var data = custom.data; //data参数可选，只有在post请求时需要
var dataType = custom.dataType; //datatype参数可选
var success = custom.success; //回调函数可选
var beforeSend = custom.beforeSend; //回调函数可选
var complete = custom.complete; //回调函数可选
var error = custom.error; //回调函数可选
if (type == null) {//type参数可选，默认为get
type = "get";
}
if (dataType == null) {//dataType参数可选，默认为text
dataType = "text";
}
var xmlHttp = createXMLHttp(); // 创建ajax引擎对象
xmlHttp.open(type, url, true); // 打开
// 发送
if (type == "GET" || type == "get" || type == "Get") {//大小写
xmlHttp.send(null);
}
else if (type == "POST" || type == "post" || type == "Post") {
xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xmlHttp.send(data);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (dataType == "text" || dataType == "TEXT") {
if (success != null) {
//普通文本
success(xmlHttp.responseText);
}
} else if (dataType == "xml" || dataType == "XML") {
if (success != null) {
//接收xml文档
success(xmlHttp.responseXML);
}
} else if (dataType == "json" || dataType == "JSON") {
if (success != null) {
//将json字符串转换为js对象
success(eval("(" + xmlHttp.responseText + ")"));
}
}
}
};
};
//自定义方法
function Custom() {
CustomAjax({
type: "Post",
url: "/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
data: "Ajax_Type=Email&jsonData=" + JSON.stringify(jsonData),
dataType: "json",
success: function (data) {
Data(data, "Custom自定义");
}
});
}
</script>
</div>
</body>
</html> 后端ASHX处理程序代码部分。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;
namespace WebHTML5.Handler
{
/// <summary>
/// AjaxHandlerHelper 的摘要说明
/// </summary>
public class AjaxHandlerHelper : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
//context.Response.Charset = "utf-8";
var Ajax_Type = context.Request.QueryString["Ajax_Type"] == null ?
context.Request.Form["Ajax_Type"] : context.Request.QueryString["Ajax_Type"];
switch (Ajax_Type)
{
case "Email":
context.Response.Write(PostEmail(context));
break;
default:
context.Response.Write("[{\"Age\":28,\"Name\":\"张鹏飞\"}]");
break;
}
}
public static string PostEmail(HttpContext context)
{
string semail = string.Empty;
if (context.Request.HttpMethod == "GET")
{
semail = "[" + context.Request.QueryString["jsonData"] + "]";
}
else
{
semail = "[" + context.Request.Form["jsonData"] + "]";
}
return semail;
}
/// <summary>
/// JSON序列化
/// </summary>
public static string JsonSerializer<T>(T t)
{
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
MemoryStream ms = new MemoryStream();
ser.WriteObject(ms, t);
string jsonString = Encoding.UTF8.GetString(ms.ToArray());
ms.Close();
return jsonString;
}
/// <summary>
/// JSON反序列化
/// </summary>
public static T JsonDeserialize<T>(string jsonString)
{
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
T obj = (T)ser.ReadObject(ms);
return obj;
}
public bool IsReusable
{
get
{
return false;
}
}
}
} jQuery Ajax方法扩展与注意事项
jQuery方法的扩展应用。
关于jQuery方法的扩展细节，建议读者通过Google或百度自行查阅相关资料。
结语。
补充说明：案例中涉及的HTML5 range标签取值逻辑可能存在表述不当之处，请读者忽略该细节。关于range标签的正确取值方式，建议通过Google或百度自行查询确认。
作者最新文章
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38