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

摘要：javascript版本的ajax发送请求（1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应...

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="http://www.jb51.netScripts/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"></label><br /> <input type="button" id="btnXmlHttp" value="提交" /> <input type="button" id="btnAjax" value="Ajax提交" /> <input type="button" id="btnPost" value="Post提交" /> <input type="button" id="btnGet" value="Get提交" /> <input type="button" id="btnGetJSON" value="GetJSON提交" /> <input type="button" id="btnCustom" value="Custom提交" /> <br /><label id="lblAD">.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" + 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" + 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" + Math.random(), { Ajax_Type: "Email", jsonData: JSON.stringify(jsonData) }, function (data) { Data(data, "Jquery $.post"); } ); } //jquery $.getJSON方法 function GetJSON() { $.getJSON("/Handler/AjaxHandlerHelper.ashx" + Math.random(), { Ajax_Type: "Email", jsonData: JSON.stringify(jsonData) }, function (data) { Data(data, "Jquery $.getJSON"); } ); } //jquery $.get方法 function Get() { $.get("/Handler/AjaxHandlerHelper.ashx" + 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" + 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或百度；

【JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例】相关文章：

★ 基于jQuery实现的无刷新表格分页实例

★ JavaScript数组去重的3种方法和代码实例

★ JavaScript实现Iterator模式实例分析

★ JavaScript中的anchor()方法使用详解

★ JavaScript实现表格点击排序的方法

★ JavaScript中的Math.sin()方法使用详解

★ Jquery使用css方法改变样式实例