首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 04, 2015

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

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

- Author -

251608027

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
基于Jquery的表格隔行换色，移动换色，点击换色插件
Dec 22 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 #Javascript
详解JavaScript逻辑Not运算符
Dec 04 #Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 #Javascript
jQuery1.9.1源码分析系列（十六）ajax之ajax框架
Dec 04 #Javascript
主从复制(1) 封装(1) PyAutoGUI(1) Master(1) gRPC(3) 百度地图(1) transaction(1) Slave(1) variables(1) 继承(1)
You might like
PHP注释实例技巧
2008/10/03 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
DWR Ext 加载数据
2009/03/22 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jquery UI Datepicker时间控件的使用方法（基础版）
2015/11/07 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python中使用动态变量名的方法
2014/05/06 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
美国购买新书和二手书网站：Better World Books
2018/10/31 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
农民入党思想汇报
2014/01/03 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
正科级干部考察材料
2014/05/29 职场文书
大一新生检讨书
2014/10/29 职场文书
英文慰问信范文
2015/03/24 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
Python实现数据的序列化操作详解
2022/07/07 Python