suchen

Heim >Web-Frontend >js-Tutorial >JavaScript natives xmlHttp und die Ajax-Methode von jquery, JSON-Datenformat, example_javascript-Kenntnisse

JavaScript natives xmlHttp und die Ajax-Methode von jquery, JSON-Datenformat, example_javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:27:351349Durchsuche

Javascript-Version der Ajax-Sendeanforderung

(1) Erstellen Sie ein XMLHttpRequest-Objekt. Dieses Objekt ist der Kern der Ajax-Anfrage und der Informationsträger der Ajax-Anfrage und -Antwort. Verschiedene Browser haben unterschiedliche Erstellungsmethoden

(2), Anforderungspfad

(3). Verwenden Sie die offene Methode, um eine Anfrage zu binden und zu senden

(4). Verwenden Sie die send()-Methode, um eine Anfrage zu senden

(5), Holen Sie sich die vom Server zurückgegebene Zeichenfolge xmlhttpRequest.responseText;

(6), holen Sie sich den vom Server zurückgegebenen Wert und speichern Sie ihn in Form des XML-Objekts xmlhttpRequest.responseXML;

(7) Verwenden Sie W3C-DOM-Knotenbaummethoden und -attribute, um das XML-Dokumentobjekt zu überprüfen und zu analysieren.

Vorwort:

Kürzlich, als das Projekt gestartet und implementiert wurde, hatte ich in meiner Freizeit zufällig entdeckt, was ich zuvor über die Javascript-native xmlHttp-Ajax-Methode und die spätere Jquery-Plug-in-Ajax-Methode geschrieben hatte. Daher habe ich aus Zeitgründen nicht alle Browser getestet, die derzeit getestet werden: IE8, 9, 10, Google Chrome, Mozilla Firefox und Opera Bitte geben Sie mir rechtzeitig Feedback. Vielen Dank an alle.


Zurück zum Geschäft, gehen wir direkt zum Code:

Frontend-Code 

<!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&#63;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&#63;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&#63;no.=" + Math.random(),
        {
          Ajax_Type: "Email",
          jsonData: JSON.stringify(jsonData)
        },
        function (data) {
          Data(data, "Jquery $.post");
        }
      );
      }
    //jquery $.getJSON方法
    function GetJSON() {
      $.getJSON("/Handler/AjaxHandlerHelper.ashx&#63;no.=" + Math.random(),
        {
          Ajax_Type: "Email",
          jsonData: JSON.stringify(jsonData)
        },
        function (data) {
          Data(data, "Jquery $.getJSON");
        }
      );
      }
    //jquery $.get方法
    function Get() {
      $.get("/Handler/AjaxHandlerHelper.ashx&#63;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&#63;no.=" + Math.random(),
        data: "Ajax_Type=Email&jsonData=" + JSON.stringify(jsonData),
        dataType: "json",
        success: function (data) {
          Data(data, "Custom自定义");
        }
      });
    }
  </script>
</div>
</body>
</html>

.ashx-Backend-Code 

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 &#63;
        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-Methodenerweiterung

Über die Jquery-Methodenerweiterung können Sie selbst googeln oder Baidu verwenden


Fazit


Lassen Sie mich die Situation erklären: Das in diesem Fall aufgetauchte Wertproblem des HTML5-Range-Tags ist falsch. Sie können selbst googeln oder Baidu verwenden, um den Wert des Range-Tags zu ermitteln.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Mobile-Methode zum Konvertieren der URL-Adresse und zum Abrufen des Verzeichnisteils von url_jqueryNächster Artikel：jQuery-Mobile-Methode zum Konvertieren der URL-Adresse und zum Abrufen des Verzeichnisteils von url_jquery

In Verbindung stehende Artikel

Mehr sehen