Q:AJAX以何种花样来交流数据？跨域的需求怎样处置惩罚？
A:用JSON来传数据，靠JSONP来跨域（细致拜见下文）
AJAX
竖立对象
AJAX = Asynchronous(英[eɪˈsɪŋkrənəs]) JavaScript and XML（异步的 JavaScript 和 XML）。
XMLHttpRequest 用于在背景与服务器交流数据。这意味着能够在不从新加载全部网页的状态下，对网页的某部分举行更新。
竖立兼容对象
一切当代浏览器均支撑 XMLHttpRequest 对象（IE5 和 IE6 运用 ActiveXObject）。
// 竖立 XMLHttpRequest 对象
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");
}
// 向服务器发送要求
// 当运用 async=true 时，请划定在相应处于 onreadystatechange 事宜中的停当状态时实行的函数
// async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句背面即可
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// 来自服务器的相应 responseText:字符串情势 responseXML:XML情势
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
发送要求
XMLHttpRequest 要领
open(method,url,async)
method：要求的范例；GET 或 POST url：文件在服务器上的地点(该文件能够是任何范例的文件或服务器剧本文件) async：true（异步）或 false（同步）send(string)
string：仅用于 POST 要求
GET 照样 POST？
与 POST 比拟，GET 更简朴也更快，并且在大部分状态下都能用。
然则，在以下状态中，请运用 POST 要求：
没法运用缓存文件（更新服务器上的文件或数据库）
向服务器发送大批数据（POST 没有数据量限定）
发送包括未知字符的用户输入时，POST 比 GET 更稳固也更牢靠
防止获得的是缓存的效果，向URL增加一个唯一的 ID
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
愿望经由过程 GET 要领发送信息，请向 URL 增加信息
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
须要像 HTML 表单那样 POST 数据，请运用 setRequestHeader() 来增加 HTTP 头。然后在 send() 要领中划定您愿望发送的数据
// 向要求增加 HTTP 头。
// setRequestHeader(header,value)
// header: 划定头的称号 value: 划定头的值
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
服务器相应
XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText:字符串情势
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML:XML情势
// 要求 books.xml 文件，并剖析相应
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
readyState
当要求被发送到服务器时，我们须要实行一些基于相应的使命。
readyState 属性存有 XMLHttpRequest 的状态信息。
每当 readyState 转变时，就会触发 onreadystatechange 事宜。
XMLHttpRequest 对象的三个主要的属性
onreadystatechange
存储函数（或函数名），每当 readyState 属性转变时，就会挪用该函数。readyState
存有 XMLHttpRequest 的状态。从0到4发生变化。(一共被触发 5 次) 0: 要求未初始化 1: 服务器衔接已竖立 2: 要求已吸收 3: 要求处置惩罚中 4: 要求已完成，且相应已停当status
200: "OK" 404: 未找到页面
运用 Callback 函数
callback 函数是一种以参数情势通报给另一个函数的函数
JSON
JavaScript 对象示意法（JavaScript Object Notation）
是存储和交流文本信息的语法。相似 XML，比XML更小、更快，更容易剖析。
JSON有六种范例的值：对象，数组，字符串，数字，布尔值和特别值null。
JSON 语法划定规矩
数据在称号/值对中
数据由逗号分开
花括号保留对象
方括号保留数组
JSON具有两种构造：对象，数组
对象构造以”{”大括号最先，以”}”大括号终了。中心部分由0或多个以”，”分开的”key(关键字)/value(值)”对构成，关键字字符串和值之间以”：”分开
{
key1:value1,
key2:value2,
...
}数组构造以”[”最先，”]”终了。中心由0或多个以”，”分开的值列表构成
[
{
key1:value1,
key2:value2,
...
},
{
key1:value1,
key2:value2,
...
},
]
JSON的剖析与序列化
JSON对象（ECMAScript 5中增加的， 初期JSON剖析基础都运用javascript的eval()函数。然则eval有一些机能和平安上的瑕玷，ECMAScript对剖析JSON对象进 行了范例，定义了全局对象JSON，支撑的浏览器有规范浏览器和IE8+。关于不支撑的浏览器能够引入json2.js文件。）有stringify与parse这两个要领。
JSON.stringify
将javascript对象序列化为JSON花样的字符串
JSON.stringify(ob,filter,indent)包括三个参数，一般我们在运用的时刻只带第一个参数，来返回字符串。
ob:要转化成JSON字符串的对象，数组，原始值。
filter：是一个可选的参数，一般是一个函数，用来在字符串化前对值做一些替代。也能够是一个数组，包括哪些须要字符串化的属性名。就是用来过滤的。
// 第二个参数是数组过滤器
var oJson = { name: 'hum', age: 20, sex: 1};
console.log(JSON.stringify(oJson, ['age', 'sex']));
// {"age":20,"sex":1}
// 第二个参数是函数过滤器
// 假如该参数是函数，则它是一个替代函数，该函数会在每一个须要字符串化的对象上挪用。
// 这个函数的第一个参数是该对象中的属性名或数组的序号，第二个则是值自身。
// 函数的返回值会替代掉须要字符串化的值，假如函数返回undefined或没有任何的返回值，则会在字符串化的时刻疏忽这个值。
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
console.log(JSON.stringify(oJson, function(k, v){
switch (k){
case 'age':
return v > 20 ? '成年': '未成年';
case 'love':
return v.join(',');
case 'sex':
return undefined;
default :
return v;
}
}));
// {"name":"hum","age":"成年","love":"swing,jump"}
indent：也是一个可选参数，在须要输出花样化的可浏览的代码时，运用indent参数来指定用来缩进的字符串或空格。假如省略该参数，返回的字符串将不带任何的分外的空格，如许输出的值很难浏览。就是用来花样化的。
JSON.parse
JSON.parse用来剖析json花样的字符串（返回一个对象，数组或原始值）
JSON.parse(s,reviver)包括两个参数
s：要剖析的字符串
reviver：用来转换剖析值得可选函数
一般运用只运用第一个参数，可选参数reviver,主如果在返回剖析值之前，对其举行过滤或后期处置惩罚。
reviver函数会在从s中剖析的每一个原始值挪用一次。
挪用reviver函数是带有两个参数，第一个属性名（对象的属性名或是转换成字符串的数组序号），第二个参数是对象的属性或是数组的元素值。
reviver函数会作为包括原始值的对象/数组的要领来挪用。
reviver函数的返回值会成为属性的新值，假如reviver返回第二个参数，则属性稳定。
假如reviver返回undefined或非凡会任何值，则会从对象或是数组中删除属性。
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump'], birthday: '1988-01-12'};
var sJson = JSON.stringify(oJson);
console.log(sJson);
//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"}
console.log(JSON.parse(sJson));
console.log(JSON.parse(sJson, function (k, v) {
if(k == 'birthday'){ // 返回日期对象
return new Date(v);
}else if(k == 'sex'){ // sex不在了
return undefined;
}else{
return v;
}
}));
JSON花样化东西
http://www.runoob.com/jsontool
JSONP
Jsonp(JSON with Padding) 是 json 的一种”运用形式”，能够让网页从别的域名（网站）那猎取材料，即跨域读取数据。
JSONP是怎样发生的？
1、尽人皆知，Ajax直接要求一般文件存在跨域无权限接见的题目（缘由拜见 同源战略-web剧本平安）
2、然则，HTML的<script>标签是破例，能够打破同源战略从其他泉源猎取数据（本质是具有”src”这个属性的标签都具有跨域的才能，比方<script>、<img>、<iframe>）
3、因而能够推断，当前阶段假如想经由过程纯web端（ActiveX控件、服务端代办、属于将来的HTML5之Websocket等体式格局不算）跨域接见数据就只有一种能够，那就是在长途服务器上想法把数据装进js花样的文件里，供客户端挪用和进一步处置惩罚（如今能够运用nodejs做中心件了，本文暂且不表，改天我细致写一下~）；
JSONP道理
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先天生 json 数据。
然后以 javascript 语法的体式格局，天生一个function , function 名字就是通报上来的参数 jsonp.
末了将 json 数据直接以入参的体式格局，安排到 function 中，如许就天生了一段 js 语法的文档，返回给客户端。
客户端浏览器，剖析script标签，并实行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态实行回调函数）
运用代码
// 原生js 增加<script>标签的要领
//（函数名可商定，或经由过程地点参数通报）
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
//将自定义的回调函数名result传入callback参数中
addScriptTag("localhost/bns-relation/index.php?r=BnsRelation/BnsOfProd&callback=result");
}
//自定义的回调函数result
function result(data) {
//我们就简朴的猎取数据
console.log(data);
}
// zepto,jquery的JSONP用法
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 体式格局此要领不被触发.缘由多是dataType假如指定为jsonp的话,就已不是ajax事宜了
},
success: function (json) {//客户端jquery预先定义好的callback函数,胜利猎取跨域服务器上的json数据后,会动态实行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 体式格局此要领不被触发.缘由多是dataType假如指定为jsonp的话,就已不是ajax事宜了
//要求失足处置惩罚
alert("要求失足(请搜检相干度收集状态.)");
}
});
JSONP优瑕玷
JSONP的长处
不像XMLHttpRequest对象完成的Ajax要求那样遭到同源战略的限定；
兼容性更好，在越发陈旧的浏览器中都能够运转，不须要XMLHttpRequest或ActiveX的支撑；
在要求终了后能够经由过程挪用callback的体式格局回传效果。
JSONP的瑕玷
只支撑GET要求而不支撑POST等别的范例的HTTP要求；
只支撑跨域HTTP要求这类状态，不能处置惩罚差异域的两个页面之间怎样举行JavaScript挪用的题目。
summary
ajax和jsonp实在本质上是差异的东西
ajax的中心是经由过程XmlHttpRequest猎取非本页内容
而jsonp的中心则是动态增加<script>标签来挪用服务器供应的js剧本
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只一个字母差异，但实在基础不是一回事儿
JSON是一种数据交流花样
而JSONP是一种非官方跨域数据交互协定
