JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

前端技术 2023/09/09 JavaScript

javascript版本的ajax发送请求

（1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同

（2）、请求路径

（3）、使用open方法绑定发送请求

（4）、使用send() 方法发送请求

（5）、获取服务器返回的字符串   xmlhttpRequest.responseText;

（6）、获取服务端返回的值，以xml对象的形式存储  xmlhttpRequest.responseXML;

（7）、使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。

序言：

     近来随着项目的上线实施，稍微有点空闲，闲暇之时偶然发现之前写的关于javascript原生xmlHttp ajax方法以及后来jquery插件ajax方法，于是就行了一些总结，因时间原因，并未在所有浏览器上进行测试，目前测试的IE8,9,10，Google Chrome，Mozilla Firefox，Opera常用几款，如大家在进行验证测试发现有问题，请及时反馈与我，谢谢大家。

言归正传，直接上代码：

 前端代码 

<!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 方法扩展

　　关于Jquery的方法扩展大家自行google或百度；

结束语

说明一下情况：案例中出现的html5 range标签的取值问题，写的不对，大家不要在意这些，关于range标签如何取值大家自行google或百度；

本文地址：https://www.stayed.cn/item/23931

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案