JavaScript原生XMLHttpRequest与jQuery Ajax处理JSON数据详解

Ajax请求的核心流程与对象创建

JavaScript发起Ajax请求的核心在于创建XMLHttpRequest对象。不同浏览器对此对象的支持方式存在历史差异，因此在兼容模式下，通常需要尝试多种ActiveXObject命名空间。

function createXMLHttp() {
  var XmlHttp;
  // 兼容IE老版本
  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) { }
  }
}

一旦获取了XMLHttp实例，后续步骤包括：
1. 绑定请求：使用open方法指定URL、HTTP方法（GET/POST）及是否异步。
2. 发送请求：调用send()传递数据（GET通常为null，POST可传递字符串或FormData）。
3. 监听状态：通过onreadystatechange事件处理readyState变化，当readyState为4且status为200时，表示响应成功，此时可通过responseText（字符串）或responseXML（XML对象）获取服务器返回的数据。

jQuery Ajax方法的多样化应用

jQuery对原生XHR进行了高度封装，提供了更简洁的API。根据应用场景不同，主要有以下几种常用形式：

第1步：使用$.ajax进行全配置控制

适用于需要复杂配置（如自定义头、同步/异步控制、错误处理）的场景。

$.ajax({
  url: "/Handler/AjaxHandlerHelper.ashx",
  type: "Post",
  async: false, // 同步请求，阻塞后续代码执行
  data: {
    Ajax_Type: "Email",
    jsonData: JSON.stringify(jsonData) // 将对象序列化为JSON字符串
  },
  dataType: "json", // 预期服务器返回的是JSON格式，jQuery会自动解析为JS对象
  beforeSend: function () {
    $("#btnSubmit").attr('disabled', "true"); // 发送前禁用按钮防止重复提交
  },
  complete: function () {
    $("#btnSubmit").removeAttr("disabled");
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert("请求失败: " + errorThrown);
  },
  success: function (data) {
    console.log(data); // 直接使用解析后的JS对象
  }
});

第2步：使用$.post/$.get简化HTTP方法

当仅需简单POST或GET请求时，可使用快捷方法。它们自动处理dataType推断，但默认行为可能不如$.ajax明确。

// $.post 示例
$.post(
  "/Handler/AjaxHandlerHelper.ashx",
  {
    Ajax_Type: "Email",
    jsonData: JSON.stringify(jsonData)
  },
  function (data) {
    console.log(data);
  }
);

第3步：使用$.getJSON专门处理JSON数据

专为JSON设计的方法，仅支持GET请求，并自动将响应解析为JSON对象。

$.getJSON(
  "/Handler/AjaxHandlerHelper.ashx?Ajax_Type=Email",
  function (data) {
    console.log(data);
  }
);

第4步：自定义轻量级Ajax封装

若不想依赖jQuery库，可基于原生XHR编写简易封装，模拟jQuery的部分功能结构：

var CustomAjax = function (custom) {
  var type = custom.type || "get";
  var url = custom.url;
  var data = custom.data;
  var dataType = custom.dataType || "text";
  var success = custom.success;

  var xmlHttp = createXMLHttp();
  xmlHttp.open(type, url, true);

  if (type.toLowerCase() == "post") {
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(data);
  } else {
    xmlHttp.send(null);
  }

  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var result;
      if (dataType.toLowerCase() == "json") {
        // 注意：eval存在安全风险，生产环境建议使用JSON.parse
        result = eval("(" + xmlHttp.responseText + ")");
      } else {
        result = xmlHttp.responseText;
      }
      if (success) success(result);
    }
  };
};

后端处理与JSON序列化

无论前端使用何种工具，后端都需要正确解析请求数据并返回符合规范的JSON响应。以下以.NET C# (.ashx)为例：

接收参数与构建响应

在处理程序中，首先判断请求类型是GET还是POST，从而从QueryString或Form中获取参数。对于JSON格式的输入数据，通常直接透传或重新包裹后返回。

public void ProcessRequest(HttpContext context) {
  context.Response.ContentType = "application/json";
  string ajaxType = context.Request.QueryString["Ajax_Type"] ?? context.Request.Form["Ajax_Type"];
  
  switch (ajaxType) {
    case "Email":
      string emailJson = GetJsonData(context); // 获取前端传来的jsonData
      context.Response.Write("[" + emailJson + "]"); // 封装为数组格式返回
      break;
    default:
      context.Response.Write("[{\"Age\":28,\"Name\":\"张鹏飞\"}]");
      break;
  }
}

private string GetJsonData(HttpContext context) {
  string jsonStr = "";
  if (context.Request.HttpMethod == "GET") {
    jsonStr = context.Request.QueryString["jsonData"];
  } else {
    jsonStr = context.Request.Form["jsonData"];
  }
  return jsonStr;
}

高级JSON序列化与反序列化

利用System.Runtime.Serialization.Json命名空间下的DataContractJsonSerializer，可以实现强类型的JSON转换：

// 序列化：将对象转为JSON字符串
public static string JsonSerializer(T t) {
  DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
  MemoryStream ms = new MemoryStream();
  ser.WriteObject(ms, t);
  return Encoding.UTF8.GetString(ms.ToArray());
}

// 反序列化：将JSON字符串转为对象
public static T JsonDeserialize(string jsonString) {
  DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
  MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
  return (T)ser.ReadObject(ms);
}

在实际开发中，确保前后端编码一致（如UTF-8），并在返回JSON时正确设置Content-Type头部，是避免乱码和数据解析错误的关键。以上就是JavaScript原生XMLHttpRequest与jQuery Ajax处理JSON数据的详细内容，更多关于前端网络编程的资料请关注本站其它相关文章！