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地址与服务器地址必须是同一域名,协议, ...
随机推荐
- HTML学习（零）简介
一)HTML介绍 它是一个超文本标记语言,静态页面. 所谓的'超文本'就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 主要的结构为包括"头"部分(英语:Head).和 ...
- armv7 armv7s arm64
arm处理器以其低功耗和小尺寸而闻名,几乎所有的手机处理器都是基于arm,在嵌入式系统中应用非常广泛. armv6, armv7, armv7s, arm64指的是arm处理器的指令集. i386 ...
- 关于iPhone图片的问题。
由于iOS设备的屏幕分辨率不尽相同,有大有小,那么在不同设备中显示同一张图片,可能会造成图片被拉伸.变形,严重影响用户体验.为了让图片在不同设备中都能得到很好的显示效果,同一类图片我们一般会准备几种版 ...
- 由一个bug引发的SQLite缓存一致性探索
问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...
- Oracle学习笔记五 SQL命令（三）：Group by、排序、连接查询、子查询、分页
GROUP BY和HAVING子句 GROUP BY子句 用于将信息划分为更小的组每一组行返回针对该组的单个结果 --统计每个部门的人数: Select count(*) from emp group ...
- JSON字符串和JS对象之间的转换
JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象 JSON字符串 str JSON.parse(str) eval(str) eva ...
- [LeetCode] Distinct Subsequences 不同的子序列
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- SQL Server数据库设计规范
数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...
- 理解 JavaScript 回调函数并使用
JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...