标签：
对前端工程师来说，ajax这么个大招一定得点满啊，对开发绝对是超有用的。
能够无刷新的部分更新页面的数据，这么逆天的技能属性可是能实现出很多很酷炫的交互效果的。
然而虽然是很厉害，但其实ajax实现的原理并不会很复杂的，基本上利用ajax实现出一个效果主要都是要经过这两个步骤：
1 通过HTTP请求，获取数据或者提交数据。
2 取得响应数据，对响应数据操作。
对数据的操作一般都是通过dom来完成，这里不再多赘述，我们来看一下ajax是如何请求到数据或着发送数据的吧。
function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest();//new一个xhr对象，这个对象像信使一样存在着 } catch (e) { xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);//为了兼容IE6 } //如果是get请求，而且data存在，则是要通过get请求发送数据，通过get请求发送数据，数据会被链接到请求地址之后 if (method == ‘get‘ && data) { url += ‘?‘ + data; } //初始化请求，method表示请求方式，url是请求地址，true表示异步 xhr.open(method,url,true); if (method == ‘get‘) { xhr.send();//发送请求 } else { xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);//post方式，需要设置请求头 xhr.send(data);//发送提交数据 } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) {//4是请求最后的阶段， //http状态码，2开头便是还请求成功 if ( xhr.status == 200 ) { success && success(xhr.responseText);//在这里判断一下，如果success存在，则执行它，将响应数据作为参数传入回调函数 } else { alert(‘出错了,Err：‘ + xhr.status); } } } }
这就是一个还算挺完整的从数据请求到获取的过程了，我们如何使用取得到的数据呢？
一段小代码说明一下：
ajax("get","***.php",null,function(data)
{
var data=JSON.parse(data);//通过xhr.responseText取得的数据是字符串格式的，需要解析成json对象
for(var i=0;i<data.length;i++){
...
}
...
});
get和post：
1.get请求需注意缓存问题,post请求不需担心这个问题
2.post请求必须设置Content-Type值为application/x-form-www-urlencoded
3 Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据
Post请求的目的是向服务器发送一些参数,例如form中的内容.
标签：
原文地址：http://www.cnblogs.com/tianheila/p/4940240.html
