【JavaScript】（7）——JavaScript与Ajax交互

背景：知识在不断的更新，学习新的技术是非常有必要的，这样才能推陈出新，适应整个软件界的发展。使得用户的体验度越来越高，更好的为人民服务。[b]Ajax技术在一定的程度上能带来更好的用户体验。[/b]

一、Ajax

    Ajax，是 Asynchronous JavaScript + XML（异步JavaScript和XML）的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。

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

    AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

二、[b]GET请求与POST请求[/b]

[b]GET请求[/b]



    GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL的末尾，以便提交给服务器。



    通过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以讲页面保存和设置为 utf-8格式即可。

//一个通用的 URL提交函数
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的 url是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}

PS：当没有 encodeURIComponent()方法时，在一些特殊字符比如“ &”，会出现错误导致无法获取。


[b]POST请求[/b]



    POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST传输方式。



    而发送 POST请求的数据，不会跟在 URL的尾巴上，而是通过 send()方法向服务器提交数据。



    一般来说， 向服务器发送 POST请求由于解析机制的原因， 需要进行特别的处理。 因为POST请求和 Web表单提交是不同的，需要使用 XHR来模仿表单提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

[b]GET请求与POST请求比较[/b]

    从性能上来讲 POST请求比 GET请求消耗更多一些， 用相同数据比较， GET最多比 POST快两倍。上一篇《【JavaScript】（6）——JavaScript与XPath、JSON交互》中的的JSON也可以使用
Ajax来回调访问。

var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);

三、JavaScript与Ajax

    因为 Ajax使用起来比较麻烦，主要就是参数问题，比如到底使用 GET还是 POST；到底是使用同步还是异步等等，我们需要用JavaScript封装一个Ajax函数，来方便我们调用。

//封装Ajax
function ajax(obj) {
var xhr = new createXHR();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ?
obj.url + '?' + obj.data : obj.url + '&' + obj.data;
if (obj.async === true) {
xhr.onreadystatechange = function () {
if(xhr.readyState==4)callback();
};
}
xhr.open(obj.method,obj.url,obj.async);
if(obj.method==='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(obj.data);
}else{
xhr.send(null);
}
if(obj.async===false){
callback();
}
function callback(){
if(xhr.status==200){
obj.success(xhr.responseText); //回调
}else{
alert('数据返回失败！状态代码： '+xhr.status+'，状态信息： '+xhr.statusText);
}
}
}

//调用ajax
addEvent(document,'click',function(){ //IE6需要重写addEvent
ajax({
method:'get',
url:'demo.php',
data:{
'name':'Lee',
'age':100
},
success:function(text){
alert(text);
},
async:true
});
});

//名值对编码
function params(data){
var arr=[];
for(var i in data){
arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
}
return arr.join('&');
}


四、学习心得

1、即使再好的工具也有它的缺点，但是可以借助外界的力量让自己变得更加完美。人生就像一张心电图，只有高低起伏才代表活着，而成了平线之后，就代表死亡了。所以只有起起伏伏的人生才是完整的人生。

2、封装 Ajax并不是一开始就形成以上的形态，需要经过多次变化而成。调试错误也是一样的，很多错误并不是一下子就能调出来的，多试试，不同的方法有着不一样的收获。