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="/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参数可选，默认为gettype = "get";}if （dataType == null） {//dataType参数可选，默认为textdataType = "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或百度；
易网时代-编程资源站