JS原生ajax与Jquery插件ajax深入学习

  • 序言:

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

上一篇:原生Ajax


下一篇:原生Ajax( XHR 和 Fetch )