数据交互以及ajax跨域

xml，必有历史悠久的一个数据格式。早起的这种系统都是使用xml

json，互联网的项目的数据交互都是采用json

有一些大型的公司，它要对外提供接口，让别人去调用，它也要响应数据格式。一般他们都会支持两种数据格式.

XML 格式数据

概念

XML是一种可扩展标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（固定的格式的数据）。软件的配置文件。 可扩展标记语言.

1. 必须有一个根元素，xml 也是由标签组成。开始标签，结束标签
2. 不可有空格、不可以数字或.开头、大小写敏感
3. 可以嵌套，不可交叉嵌套
4. 属性双引号（浏览器自动修正成双引号了）
5. 特殊符号要使用实体
6. 注释和HTML一样

虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

使用

服务端 服务器怎么去响应xml 格式的数据.

怎么去响应xml 格式的数据
设置一个响应头,告诉客户端，服务器返回的是一个xml 格式的文本。
header("Content-Type:text/xml;charset=utf-8");
输出XML格式的数据
echo "";

客户端

怎么去接收XML格式的数据并解析，
xml 跟 html 的语法非常相似，解析html 的时候我们使用dom 对象，然后调用dom 的api 去进行解析.
xml 假设可以转换成html，就可以按照html 方式去进行解析。

怎么将xml 数据的格式，转换成dom 对象
1:服务器，必须设置一个响应头  Content-Type:text/xml;charset=utf-8
2:客户端接收数据，接收普通文本  responseText，接收的是有格式的xml
使用 xhr.responseXML;

JSON 格式数据

概念

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

语法规则

json 的数据格式是以键值对的方式进行存储,key=value,key=value
数据在名称/值对中
数据由逗号分隔(最后一个健/值对不能带逗号)
花括号保存对象方括号保存数组
使用双引号
{"key":"value","key":1}

怎么表示数据

表示一条记录
{"username":"杨丹","age":11}
表示多条记录(数组)
[{"username":"杨丹","age":11},{"username":"杨雄","age":11}]
表示复杂数据
{
     "list":[{"username":"杨丹","age":11},{"username":"杨雄","age":11}],
     "total":11,
      "data":{
           "username":"马鸿",
           "age":11 
      }
}

json 格式数据使用

服务器端怎么发送json 格式的数据
   实际上在开发的过程当中，服务器返回的数据都是从数据库取出来的，取出来的可能是一条记录，也可能是多条记录，我们怎么把这些格式的数据响应到客户端，然后在客户端进行解析。

服务端：
     怎么将数据库的数据获取到转换成json 格式的数据，向客户端输出。
     header("Content-Type:text/json;charset=utf-8");
客户端：
     怎么接收到服务器端返回的数据并解析.     
     第一种解析方式:  eval();
     第二种解析方式:  JSON.parse();

模板

模板引擎

   模板作用:我们ajax 开发一般都是通过XMLHttpRequest 发送请求，然后服务器返回数据，当我们通过js 得到数据之后，然后通过解析json 的方式去解析数据，解析完json 之后，我们再将数据通过dom 的方式放在页面上面。如果json 的数据格式特别复杂，我们可能要做很多的js 凭借，非常麻烦，性能也非常低下。这个时候我们就需要用到模板：我们可以在模板里面解析json，然后跟html 内容拼接，性能会更好。

流行模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/ b百度

ArtTemplate：https://github.com/aui/artTemplate t腾讯

velocity.js：https://github.com/shepherdwind/velocity.js/ a阿里

Handlebars：http://handlebarsjs.com/

参考资料:

http://blog.jobbole.com/56689/

1.3 artTemplate

1、引入template-native.js

2、<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式

3、<%= content %>为输出表达式

使用步骤:

• 引入模板文件
• 创建模板
• 将数据跟模板进行绑定
• 在模板里面编写代码解析数据
• 绑定数据和模板之后得到内容
• 将数据内容写到页面上面。

跨域

同源&跨域

跨域的概念

从一个站点访问一个资源，然后在这个资源当中又去访问另外的一个站点的资源，这个就是跨域。

同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

跨域

不同源则跨域

例如http://www.example.com/

  http://api.example.com/detail.html        不同源     域名不同   
  https//www.example.com/detail.html        不同源     协议不同   
  http://www.example.com:8080/detail.html   不同源     端口不同   
  http://api.example.com:8080/detail.html   不同源     域名、端口不同
  https://api.example.com/detail.html       不同源     协议、域名不同
  https://www.example.com:8080/detail.html  不同源     端口、协议不同
  http://www.example.com/detail/index.html  同源      只是目录不同 

1、JSONP 跨域

其本质是利用了标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

2· CORS 跨域（跨域资源共享）

通过服务端响应头的方式
通过想客户端输出一个响应头
header("Access-Control-Allow-Origin:*");