XML、JSON与AJAX、jQuery版Ajax

一：XML

       XML：可扩展标记语言（Extensible Markup Language），是一种标记语言。

       标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。

       XML文件样式：

<?xml version="1.0" encoding="UTF-8" ?>
<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title>Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

       XML设计用来传送及携带数据信息，不用来表现或展示数据，HTML则用来表现数据，所以XML用途的焦点是它说明数据是什么，以及携带数据信息。
       XML被广泛用来作为跨平台之间交互数据的形式，主要针对数据的内容，通过不同的格式化描述手段（XSLT，CSS等）可以完成最终的形式表达（生成对应的HTML，PDF或者其他的文件格式）。

       XML语法：
所有元素都必须有关闭标签；
XML 标签对大小写敏感。标签 <Message> 与标签 <message> 是不同的。必须使用相同的大小写来编写打开标签和关闭标签；
所有元素都必须彼此正确地嵌套；
XML 文档必须有一个元素是所有其他元素的父元素。该元素称为根元素；
XML 的属性值必须加引号；
在 XML 中，一些字符拥有特殊的意义；请用字符实体来代替 这些字符；
在 XML 中，文档中的空格会被保留，不会被删减；

XML 以 LF 存储换行。

       XML中的5个字符实体：

二：JSON

       JSON(JavaScript Object Notation：JS对象表示法)  是一种轻量级的数据交换格式。
       它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式。

       JSON是理想的数据交换语言；易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)

       JSON文件样式：

{
     "firstName": "John",
     "lastName": "Smith",
     "sex": "male",
     "age": 25,
     "address": 
     {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber": 
     [
         {
           "type": "home",
           "number": "212 555-1234"
         },
         {
           "type": "fax",
           "number": "646 555-4567"
         }
     ]
 }

       JSON语法：

       一：简单值 

       数值，字符串(必须使用双引号)，布尔值，null（不支持undefined）

       二：对象

// JS原生对象
var person = {
    name:"hua",
    age:18
};

// JSON对象：属性名必须加双引号；没有末尾的分号
{
    "name":"hua",
    "age":18
}

       三：数组

// JSON数组：无变量和末尾分号
[18,"hua",true]

       JSON方法：

       JSON.stringify() 方法用于将 JavaScript 对象序列化为 JSON 字符串

JSON.stringify(value[, replacer[, space]])
value-->必需， 要转换的 JavaScript 值（通常为对象或数组）
replacer-->可选。用于转换结果的函数或数组。如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为null或者未提供，则对象所有的属性都会被序列化
space-->可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格

       JSON.parse()方法用于将JSON字符串解析为原生JS对象
参数一：必需，JSON字符串
参数二：可选，处理函数

       JSON 与 XML 的区别：

       JSON与XML最大的不同在于XML是一个完整的标记语言，而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性（如XPath），在数据存储，扩展及高级检索方面具备对JSON的优势，而JSON则由于比XML更加小巧，以及浏览器的内建快速解析支持，使得其更适用于网络数据传输领域。
       JSON 比 XML 更小、更快，更易解析。

三：AJAX

       AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
       AJAX 不是新的编程语言，而是一种使用现有标准的新方法；是一种创建交互式网页应用的网页开发技术。

       通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
       传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

       Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

       创建XHR对象

var xmlhttp; 
if (window.XMLHttpRequest) 
  {// code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest(); 
  } 
else 
  {// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  }

//使用Ajax发送请求
xmlhttp.open("GET","ajax_info.txt",true);    
xmlhttp.send();

方法open(method,url,async)：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

方法send(string/null)：
string：仅用于 POST 请求

属性：
responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

       onreadystatechange 事件

       当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

       每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

       XHR.readyState状态的变化如下：
0：请求未初始化，还没有调用 open()。 
1：请求已经建立，但是还没有发送，还没有调用 send()。  
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。  

4：响应已完成；您可以获取并使用服务器的响应了。 

status:
200  OK  完成响应
302  Found  重定向
304  Not Modified
403  Forbidden

404  Not Found

//在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。
xmlhttp.onreadystatechange=function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  }

       AJAX的优缺点
优点：
不需要插件支持；
用户体验极佳；
提升Web程序性能；
减轻服务器和宽带的负担；

缺点：
前进后退按钮被破坏；
搜索引擎的支持不够；

开发调试工具缺乏；

       Ajax实现过程

①JS监听浏览器网页事件
②JS创建Ajax引擎对象
③通过Ajax引擎对象发出请求
④Ajax引擎等待并且接受服务器的响应内容
⑤JS再从Ajax引擎对象中获取响应内容，并且通过DOM改变网页界面显示效果

四：jQuery实现AJAX

jQuery.ajax(url,[settings])

$.ajax() 返回其创建的 XMLHttpRequest 对象
url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings：

type-->(默认: "GET") 请求方式 ("POST" 或 "GET")
cache:(默认: true,dataType为script和jsonp时默认为false) 设置为 false 将不缓存此页面。
async:(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后

dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

username-->用于响应HTTP访问认证请求的用户名
password-->用于响应HTTP访问认证请求的密码
timeout-->设置请求超时时间（毫秒）。此设置将覆盖全局设置

processData-->(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

回调函数-->如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend--> 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error--> 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter--> 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success -->当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete -->当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

jQuery.get(url, [data], [callback], [type]) -->通过远程 HTTP GET 请求载入信息
jQuery.post(url, [data], [callback], [type]) -->通过远程 HTTP POST 请求载入信息
url:待载入页面的URL地址；
data:待发送 Key/value 参数；
callback:载入成功时回调函数；
type:返回内容格式，xml, html, script, json, text, _default。

示例：

$('#b1').on("click",function(){
    $.ajax({
        url:"/ajax_test/",
        type:"POST",
        data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"list": JSON.stringify([1, 2, 3])},
        success:function (data) {
            $("#i3").val(data);
        },
        error:function(data){
            alert(data)
        },
    });
});