JavaScript ネイティブの xmlHttp と jquery の ajax メソッド json データ形式 example

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript ネイティブの xmlHttp と jquery の ajax メソッド json データ形式 example_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

Ajax 送信リクエストの JavaScript バージョン

(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&#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 バックエンドコード

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 メソッド拡張

Jquery メソッド拡張については、Google または Baidu で自分で確認できます。

結論

状況を説明します。このケースで出てきた html5 range タグの値の問題は間違っています。range タグの値を自分で取得する方法については、心配しないでください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7369

Java チュートリアル

1628

CakePHP チュートリアル

1355

Laravel チュートリアル

1266

PHP チュートリアル

1215

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。開発者がいないべきではありません！タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース

ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム