• 序言:

近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest 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或百度;

JS原生ajax与Jquery插件ajax深入学习的更多相关文章

  1. jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案

    jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...

  2. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  3. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  4. jQuery插件——ajax

    一.ajax请求 1.load(url, [data], [callback]) 概述:加载远程的HTML文件代码,并插入到指定的DOM节点中. 参数:url:待装入 HTML 网页网址. data: ...

  5. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  6. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  7. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

  8. ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异

    先引入脚本  这里最好是把jquery的脚本升级到1.7 <script src="js/jquery-1.7.js" type="text/javascript& ...

  9. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

随机推荐

  1. Android InputType详解

    android:inputType 如果设置android:inputType = "number",则默认弹出的输入键盘为数字键盘,且输入的内容只能为数字. InputType文 ...

  2. iOS sqlite 的各种操作

    iOS --SQL的增加.删除.查找.修改 iOS对于数据库的操作:增加.删除.查找.修改 首先需要创建一个数据库:本程序的数据库是在火狐浏览器里的插件里写的微量型数据库 火狐找查找SQLite Ma ...

  3. visual studio自动导入 using 的快捷键

    快捷键是  shift + alt + f10 ,从 vs 2012开始 还增加了 ctrl+.  功能名称叫: 视图.显示智能标记

  4. Web性能优化:基本思路和常用工具

    听了荣华的演讲之后,我对性能优化有了更深层次的认识. 性能优化的重要性 性能优化是为了赢得用户,为了降低成本. 性能优化思路 Web常见优化点   Java常见排查工具  

  5. ajaxFileUpload插件

    关键词: $.ajaxFileUpLoad(); data status dataType 参考资料: http://www.cnblogs.com/kissdodog/archive/2012/12 ...

  6. python中的迭代器

    1.可以直接作用于for循环的数据类型 第一类:集合数据类型,如list.tuple.dict.set.str等: 第二类:generator,包括集合定义generator和带yield的gener ...

  7. python 小程序 复制目录树

    1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...

  8. [LeetCode] Maximum Product of Word Lengths 单词长度的最大积

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  9. Jquery揭秘系列:实现$.fn.extend 和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的 ...

  10. hihocoder-1014 Trie树

    hihocoder 1014 : Trie树 link: https://hihocoder.com/problemset/problem/1014 题意: 实现Trie树,实现对单词的快速统计. # ...