首先创建一个HTML页面。
<!DOCTYPE html>
<html>
<head>
<title>Convert XML to JSON In Angular JS - SibeeshPassion </title>
</head>
<body>
</body>
</html>
现在，如下添加所需的引用。
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
你注意到了吗，我已经添加了xml2json.js文件？这就是将要转换的文件。你可以从 .google.com/p/x2js/下载文件。
现在创建一个控制器和应用程序指令，如下所示。
<div ng-app="httpApp" ng-controller="httpController">
</div>
接下来我们需要做的是添加服务。你可以按如下方式添加$http服务。
var app = angular.module('httpApp', [])
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS()
var aftCnv = x2js.xml_str2json(cnv)
return aftCnv
}
})
.success(function (response) {
console.log(response)
})
})
（1）在url中加来源参数
ps :之前手动在hearder里面添加编码格式， headers.append('Content-Type','multipart/form-data')编码格式为，后端会报Unable to parse request body，
Content-Type 实体头部用于指示资源的MIME类型 media type 。
在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值为了防止这种行为，可以将标题 X- Content-Type-Options 设置为 nosniff 。
在请求中 (如 POST 或 PUT )，客户端告诉服务器实际发送的数据类型。
常用的编码方式：
(1) application/json作为请求content-type，告诉服务器请求的主题内容是json格式的字符串，服务器端会对json字符串进行解析，这种方式的好处就是前端人员不需要关心数据结构的复杂度，只要是标准的json格式就能提交成功
通过HTML表单改变编码方式，请求头的Content-Type由 <form> 元素上的enctype属性指定，默认第一种。表单编码方式包括一下三种
（2）application/x-www-form-urlencoded ：数据被编码为名称/值对。这是标准的编码格式。
当用get方法时，浏览器用 x-www-form-urlencoded 的编码方式把form数据转换成一个字串 （name1=value1&name2=value2...），然后把这个字串追加到url后面，用 ? 分割，加载这个新的url。
当用post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有 type=file 的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有 type=file 的话，就要用到multipart/form-data了。
（3）multipart/form-data ： 数据被编码为一条消息，页上的每个控件对应消息中的一个部分。这个一般文件上传时用。
当用方法post且Content-Type类型是 multipart/form-data ， 浏览器会把整个表单以控件为单位分割。同时还需要规定一个内容分割用于分割请求提中多个post的内容，如文件内容和文本内容是需要分隔开来的，不然接收方就无法解析和还原这个文件了，具体的头信息如下：
Content-Type: multipart/form-databoundary=${bound}
其中${bound} 是一个占位符，代表我们规定的分割符，可以自己任意规定，但为了避免和正常文本重复了，尽量要使用复杂一点的内容。如：--------------------56423498738365
boundary对于多部分实体，boundary 是必需的，其包括来自一组字符的1到70个字符，已知通过电子邮件网关是非常健壮的，而不是以空白结尾。它用于封装消息的多个部分的边界。
（4）text/plain ： 数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。
参考：
http://tool.oschina.net/commons
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type
post请求进行跨域angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: '',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: ''
}
}).then(function success(result) {
//数据请求成功
console.log(result.data)
},function error(err) {
//数据请求失败
console.log(err)
})
}
}
注意：表面上是向$http中传入了一个回调函数提供相应时调用，实际是返回了一个promise对象，angular1.2以上的版本对$http进行了优化
优化后：
$scope.main = {
getData: function () {
var myUrl = ''
var url = ''
var promise = $http({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
},
data: {
myUrl: myUrl
}
})
console.log(promise)
//第一中写法
promise.then(function success(data) {
console.log(data)
},function error(err) {
console.log(err)
})
//第二种写法
promise.success(function (data) {
console.log(data)
})
promise.error(function (err) {
console.log(err)
})
}
}
当promise对象返回时，可以链式调用；也可以分开来 *** 作
node服务器配置：
只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。不会使用自定义请求头（类似于 X-Modified 这种）。
但请求以如果 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求或者使用自定义请求头（比如添加诸如 X-PINGOTHER）时，浏览器就需要向服务器发送预请求，以确定服务器是否支持后续请求，如果支持，浏览器则继续发送后续Ajax请求
//http对象,通过他可以创建服务器,设置端口号...
var http = require('http')
//url对象,可以解析url中的内容
var url = require('url')
//查询参数对象,处理查询参数
var ql = require('querystring')
var server = http.createServer(function (request,response) {
//设置编码格式
request.setEncoding('UTF-8')
//允许跨域请求, * 代表接收任何请求
response.setHeader('Access-Control-Allow-Origin','*')
//接收前端发送的所有请求数据
var postData = ''
//监听,前端有数据,有就调用
request.addListener('data',function (data) {
postData += data
})
//前端数据接收完毕
request.addListener('end',function () {
console.log('数据接收完毕')
//转化为JSON对象
var postDataObj = JSON.parse(postData)
console.log(postDataObj)
console.log([url,ql])
//接收服务器请求别的服务器或借口返回的数据
var resultData = ''
http.get(postDataObj.myUrl,function (request) {
request.setEncoding('UTF-8')
//监听数据,有数据执行回调
request.on('data',function (result) {
resultData += result
})
//接收完毕,相应给前端
request.on('end',function () {
response.end(resultData)
})
}).on('error',function (err) {
response.end(err)
})
})
})
server.listen(8000,function (err) {
if(!err){
console.log('服务器端口在8000')
}
})
angularjs请求：
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: '',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: ''
}
}).then(function success(result) {
//数据请求成功
console.log(result.data)
},function error(err) {
//数据请求失败
console.log(err)
})
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）