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

2019-11-20 11:04:36

字体：大中小

来源：转载

供稿：网友

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或百度；

上一篇：jQuery mobile转换url地址及获取url中目录部分的方法

下一篇：使用jQuery mobile库检测url绝对地址和相对地址的方法