Ajax实现异步操作实例_针对XML格式的请求数据

简介:

js分类中有一节【原生js异步请求,XML解析】主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回的XML数据的解析,今天我将用一个实例来说明具体要如何操作.

前台的参数类型也是XML使用的是jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
     function test(){
     var  xmlString = "<bookstore>" +
                     "<book Type='必修课' ISBN='7-111-19149-2'>" +
                     "<title>数据结构</title>" +
                     "<author>严蔚敏</author>" +
                     "<price>30.00</price>" +
                     "</book></bookstore>" ;
 
     $.ajax({
     type:  "post" ,
     url:  "Hand/Ajax.ashx" ,
     data:  "strxml=" +xmlString,
     datatype: "xml" ,
     success: function(xml){
         //根据resultText更新页面
         alert( "success" );
         alert($(xml).find( 'Table1' ).find( 'title' ).text());
     },
     error:function(XMLResponse){alert(XMLResponse.responseText)}
});
}

  前台出入的是XML格式的参数,后台该如何操作呢?这个有针对XML读写,这里就简单的说明一下:

1
2
XmlDocument xdoc =  new  XmlDocument();<br> //xml字符串操作
xdoc.LoadXml(strxml); //读取xml字符串strxml
// Add a price element.添加一个节点
   XmlElement newElem = doc.CreateElement("price");
   newElem.InnerText = "10.95";
   doc.DocumentElement.AppendChild(newElem);//添加一个节点
1
xdoc.Load(fileName); //读取xml文件fileName是文件的路径

  以上简单说明LoadXml和Load简单用法,这里就不做详细说明。下面是后台处理前台的xml格式的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 得到根节点bookstore
XmlNode xn = xdoc.SelectSingleNode( "bookstore" );
// 得到根节点的所有子节点
XmlNodeList xnl = xn.ChildNodes;
// 将节点转换为元素,便于得到节点的属性值
XmlElement xe = (XmlElement)(xnl.Item(0));
// 得到Type和ISBN两个属性的属性值
string  bookISBN = xe.GetAttribute( "ISBN" ).ToString();
string  bookType = xe.GetAttribute( "Type" ).ToString();
// 得到Book节点的所有子节点
XmlNodeList xnl0 = xe.ChildNodes;
string  bookName = xnl0.Item(0).InnerText;
string  bookAuthor = xnl0.Item(1).InnerText;
double  bookPrice = Convert.ToDouble(xnl0.Item(2).InnerText);

  后台处理之后,返回xml格式的数据,当然这个前提context.Response.ContentType = "text/xml";

1
2
3
4
DataSet ds =  new  DataSet();
ds = GetList();
context.Response.Clear();
context.Response.Write(ds.GetXml()); 

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private  DataSet GetList()
{
     DataSet ds =  new  DataSet();
     DataTable dt =  new      DataTable();
     dt.Columns.Add( "title" );
     dt.Columns.Add( "author" );
     dt.Columns.Add( "price" );
     DataRow dr = dt.NewRow();
     dr[ "title" ] =  "book1" ;
     dr[ "author" ] =  "matest" ;
     dr[ "price" ] = 30.01;
     dt.Rows.Add(dr);
     ds.Tables.Add(dt);
     return  ds;
}

这个是jQuery+Ajax+xml的应用

分类:  ASP.NET, JAVASCRIPT, Jquery

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/4642722.html ,如需转载请自行联系原作者
相关文章
|
1月前
|
XML 前端开发 JavaScript
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
42 3
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
61 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
39 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
83 4
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
126 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
47 4
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
60 0