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

前端之家收集整理的这篇文章主要介绍了JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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常用几款,如大家在进行验证测试发现有问题,请及时反馈与我,谢谢大家。

言归正传,直接上代码

前端代码

Ajax练习

.ashx后端代码

/// AjaxHandlerHelper 的摘要说明 /// 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; } /// /// JSON序列化 /// public static string JsonSerializer(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; } /// /// JSON反序列化 /// public static T JsonDeserialize(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或百度

原文链接:https://www.f2er.com/ajax/51271.html

猜你在找的Ajax相关文章