登录
当前位置： 首页 > 编程笔记 >

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

葛兴发
2023-03-14
本文向大家介绍JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例，包括了JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例的使用技巧和注意事项，需要的朋友参考一下

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

 类似资料：
  • 原生ajax处理json格式数据的实例代码

    本文向大家介绍原生ajax处理json格式数据的实例代码，包括了原生ajax处理json格式数据的实例代码的使用技巧和注意事项，需要的朋友参考一下 原生ajax处理json格式数据代码实例: 由于jQuery的出现，原生ajax使用频率也越来越少，这当然是因为jQuery的便利性多导致的。 但是对于原生ajax实现原理的知晓也是非常重要的，下面就改造本板块的一个使用jquery ajax实现的代码

  • jQuery AJAX和json格式

    问题内容： 我有一个期望接收json的Web服务，如下所示： 我在jquery中的ajax调用： 有什么方法可以检查数据的发送格式？据说我没有将正确的JSON发送到服务器（这是验证的第一步）。 我的jquery代码是否发送有效的JSON或我错过了什么？ 问题答案： 您实际上并不是在发送JSON。您正在将对象传递为，但是您需要对对象进行字符串化，然后传递字符串。 您只告诉jQuery您希望它解析返回

  • jQuery向后台传入json格式数据的方法

    本文向大家介绍jQuery向后台传入json格式数据的方法，包括了jQuery向后台传入json格式数据的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery向后台传入json格式数据的方法。分享给大家供大家参考。具体分析如下： 前后台数据交互一般都用json格式，后台可以直接将json对应转化为实体对象。方便以后的操作。jQuery向后台传数据的时候，我们会发现他会自动转化成

  • javascript解析ajax返回的xml和json格式数据实例详解

    本文向大家介绍javascript解析ajax返回的xml和json格式数据实例详解，包括了javascript解析ajax返回的xml和json格式数据实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript解析ajax返回的xml和json格式数据。分享给大家供大家参考，具体如下： 写个例子，以备后用 一、JavaScript 解析返回的xml格式的数据： 1、ja

  • JSP+jquery使用ajax方式调用json的实现方法

    本文向大家介绍JSP+jquery使用ajax方式调用json的实现方法，包括了JSP+jquery使用ajax方式调用json的实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法。分享给大家供大家参考，具体如下： 前台： 后台： test.jsp： 注意：返回json格式 如{"result":0} 需要设置 ： 希望本文所

  • Ajax与用户交互的JSON数据存储格式

    本文向大家介绍Ajax与用户交互的JSON数据存储格式，包括了Ajax与用户交互的JSON数据存储格式的使用技巧和注意事项，需要的朋友参考一下 数据存储是JavaScript的核心功能，这是一个在学习前期的一个容易让人迷惑的问题。它并不是那种像页面滑动、幻灯片展示、淡入淡出等吸引人眼球的特效。适当的存放好数据，就有利于我们组织起结构，又能使应用程序稍后访问这些内容更加容易。JavaScript提供

相关阅读

JSP+jquery使用ajax方式调用json的实现方法Ajax与用户交互的JSON数据存储格式原生JavaScript实现AJAX、JSONPbootstrap jquery dataTable 异步ajax刷新表格数据的实现方法简介Objective-C解析XML与JSON数据格式的方法

相关文章

Python format()格式化输出方法Pandas设置数据显示格式Scala 方法与函数JavaScript之基本数据与引用数据的简单讨论设计模式与原则

相关问答

数据模型与数据格式的区别javascript - js数据格式转换?通过jQuery ajax方法提交数据后引导模式不关闭jQuery的AJAX不发布数据人口数据的生成方式

相关工具

标准TVL格式数据解析jquery-ajax-cachejquery-jsonjQuery Html JSON Forms九宫格方式输入密码

相关文档

JavaScript 算法与数据结构JS 数据结构与算法XmlHttp 对象参考手册JavaScript 设计模式与开发实践 学习笔记知识图谱：方法、实践与应用
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.