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或百度；
JS原生ajax与Jquery插件ajax深入学习的更多相关文章
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
- jQuery插件——ajax
一.ajax请求 1.load(url, [data], [callback]) 概述:加载远程的HTML文件代码,并插入到指定的DOM节点中. 参数:url:待装入 HTML 网页网址. data: ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 如何将Js代码封装成Jquery插件
很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
- ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异
先引入脚本 这里最好是把jquery的脚本升级到1.7 <script src="js/jquery-1.7.js" type="text/javascript& ...
- 原生js实现ajax与jquery的ajax库，及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
随机推荐
- xUtils 3.0 post使用详解
github:https://github.com/wyouflf/xUtils3 xUtils3简介 xUtils 包含了很多实用的android工具. xUtils 支持超大文件(超过2G)上传, ...
- Atitit.android播放smb 网络邻居视频文件解决方案
Atitit.android播放smb 网络邻居视频文件解决方案 Android4.4 1.1. Android4视频播放器不能直接地支持smb协议..子好先转换成个http流 1.2. ES文件浏览 ...
- 批处理bat 命令
1.批处理常用符号: - echo 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置 语法:@echo [{ on|off }] echo{"显示 ...
- 国产方法论之 ReDoIt -- 惟思捷
最近上了PMP课程,感觉受益匪浅,思路有被打开. 很同意一个观点“国人很擅长做事,但是不擅长总结出解决问题的通用框架和方法论”. 为了能提高中小企业生产力我最近成了一个小的软件咨询公司取名“惟思捷”, ...
- Sql基础
SELECT 列名称 FROM 表名称 SELECT * FROM 表名称 SELECT DISTINCT Company FROM Orders 去重 SELECT 列名称 FROM 表名称 WHE ...
- shell 脚本之循环使用 for while 详解
任何一种编程语言中循环是比不可少的,当然 shell 脚本也少不了循环语句,包括 for 语句. while 语句.文中主要以实际用例来说明 for while 都有哪些常见的使用方法和技巧. 一.f ...
- 基于TCP的网络编程
HTTP协议,FTP协议等很多广泛应用的协议均基于TCP协议.TCP编程主要为C/S模式,客户端和服务器之间的程序设计存在较大差异. TCP编程框图 服务器调用socket().bind().list ...
- 连载《一个程序猿的生命周期》-《发展篇》 - 3.农民与软件工程师，农业与IT业
相关文章:随笔<一个程序猿的生命周期>- 逆潮流而动的“叛逆者” 15年前,依稀记得走出大山,进城求学的场景.尽管一路有父亲的陪伴,但是内心仍然畏惧.当父亲转身离去.准备回到 ...
- hdu----(1849)Rabbit and Grass（简单的尼姆博弈）
Rabbit and Grass Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 树上启发式合并 (dsu on tree)
这个故事告诉我们,在做一个辣鸡出题人的比赛之前,最好先看看他发明了什么新姿势= =居然直接出了道裸题 参考链接: http://codeforces.com/blog/entry/44351(原文) ...