jQuery技术

jQuery学习笔记之Ajax用法实例详解(2)

字号+ 作者:H5之家 来源:H5之家 2016-12-25 16:03 我要评论( )

//jQTest.jsfunction jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; //1、 加载并执行一个 JS 文件 $.ajax({type: "GET",url: "js/jqLoadJs.js",dataType: "script" }); //2、装载一个 HTML 网页最新版本

//jQTest.js function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; //1、 加载并执行一个 JS 文件 $.ajax({ type: "GET", url: "js/jqLoadJs.js", dataType: "script" }); //2、装载一个 HTML 网页最新版本 $.ajax({ url: "test.htm", cache: false, //没有缓存的说 success: function(html) { //alert(html); $("#spanGetHtml").css("display", "block"); $("#spanGetHtml").css("color", "red"); $("#spanGetHtml").append(html); } }); //3、获取并解析一个xml文件(从服务端获取xml) $.ajax({ type: 'GET', dataType: 'xml', //这里可以不写,但千万别写text或者html url: jqRequestUrl + "?action=jquerGetXmlRequest", success: function(xml) { //正确解析服务端的xml文件 $(xml).find("profile").each(function(i) { var name = $(this).children("userName").text(); //取对象文本 var location = $(this).children("location").text(); alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location); }); }, error: function(xml) { alert('An error happend while loading XML document '); } }); //4、发送 XML 数据至服务器(客户端发送xml到服务端) var xmlDocument = "<profile>" + " <userName>jeff wong</userName>" + " <location>beijing</location>" + "</profile>"; $.ajax({ url: jqRequestUrl + "?action=jqueryXmlRequest", processData: false, //设置 processData 选项为 false,防止自动转换数据格式。 //type: "xml", cache: false, type: "xml", data: xmlDocument, success: function(html) { alert(html); //弹出提示 $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html(html); //给当前dom的一个span元素赋值 }, error: function(oXmlHttpReq, textStatus, errorThrown) { alert("jquery ajax xml request failed"); $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html("jquery ajax xml request failed"); //提示出错 } }); //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ //没有type 默认为GET方式 url: jqRequestUrl + "?action=syncRequest", async: false }).responseText; alert(html); //6、显式get测试 $.ajax({ type: "GET", url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(), cache: false, success: function(html) { // alert(html); //弹出提示 $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html(html); //给当前dom的一个span元素赋值 }, error: function(oXmlHttpReq, textStatus, errorThrown) { alert("jquery ajax request failed"); $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html("jquery ajax request failed"); //提示出错 } }); //7、显式POST测试 $.ajax({ type: "POST", url: jqRequestUrl, data: "action=jquerySaveData&userName=jeffwong&location=beijing", success: function(html) { alert(html); } }); }

几个相关文件:

a、处理ajax请求的服务端文件:AjaxHandler.ashx,对应的cs文件:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.SessionState; using System.Xml; namespace MyJqTest { public class AjaxHandler : IHttpHandler, IRequiresSessionState { /// <summary> /// 可复用 /// </summary> public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { AjaxOperations(context); } private void AjaxOperations(HttpContext context) { string action = context.Request["action"]; if (!string.IsNullOrEmpty(action)) { switch (action) { default: break; case "jquery": ProcessJQueryRequest(context); break; case "jquerySaveData": ProcessJQuerySaveData(context); break; case "syncRequest": ProcessJQuerySyncRequest(context); break; case "jqueryXmlRequest": ProcessJQueryXMLRequest(context); break; case "jquerGetXmlRequest": ProcessJQueryGetXMLRequest(context); break; } } } private void ProcessJQueryRequest(HttpContext context) { context.Response.ClearContent(); context.Response.ContentType = "text/plain"; //设置输出流类型 context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存 string result = context.Request["userName"].Trim(); context.Response.Write("You have entered a name:" + result); } private void ProcessJQuerySaveData(HttpContext context) { context.Response.ClearContent(); context.Response.ContentType = "text/plain"; //设置输出流类型 context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存 string name = context.Request["userName"].Trim(); string location = context.Request["location"].Trim(); context.Response.Write("Your data have been saved:your name is " + name + ",living in " + location); } private void ProcessJQuerySyncRequest(HttpContext context) { context.Response.ClearContent(); context.Response.ContentType = "text/plain"; //设置输出流类型 context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存 context.Response.Write("Your sync ajax request has been processed."); } /// <summary> /// 简单的xml请求处理(服务端从客户端获取xml) /// </summary> /// <param></param> private void ProcessJQueryXMLRequest(HttpContext context) { context.Response.ClearContent(); context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存 XmlDocument doc = new XmlDocument(); try { doc.Load(context.Request.InputStream); //获取xml (这里需要注意接受xml数据的方法) context.Response.ContentType = "text/plain"; //设置输出流类型 string name = doc.SelectSingleNode("profile/userName").InnerText; string location = doc.SelectSingleNode("profile/location").InnerText; context.Response.Write("Your XML data have received,and your name is " + name + ",living in " + location); } catch (Exception ex) { context.Response.Write("Get xml data failed."); throw ex; } } /// <summary> /// 返回简单的xml(服务端返回客户端xml) /// </summary> /// <param></param> private void ProcessJQueryGetXMLRequest(HttpContext context) { context.Response.ClearContent(); context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存 XmlDocument doc = new XmlDocument(); try { doc.Load(context.Server.MapPath("/jeffWong.xml")); context.Response.ContentType = "text/xml;charset=UTF-8"; //设置输出流类型 context.Response.Write(doc.OuterXml); } catch (Exception ex) { context.Response.Write("Load xml data failed."); throw ex; } } } }

b、aspx,html和xml文件(直接放在根目录下)

aspx文件是ajax请求页面:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记之jQuery中的$

    jQuery学习笔记之jQuery中的$

    2016-12-25 17:00

  • 基于jquery实现即时检查格式是否正确的表单

    基于jquery实现即时检查格式是否正确的表单

    2016-12-25 15:00

  • jquery处理xml

    jquery处理xml

    2016-12-25 14:01

  • jQuery EasyUI如何给Combobox附加项option?

    jQuery EasyUI如何给Combobox附加项option?

    2016-12-25 14:00

网友点评