作为一个前端，工作中除了前端工作还要和后端大量交互，于是ajax就占据了前端的一席之地，废话不多说直奔主题，由浅搞定ajax，主要针对小白，初学，望大神勿喷
ajax是什么？局部异步刷新数据，简单说就是不用刷新整个页面，想让哪加载后台数据就让哪加载，减少不必要数据传输，降低数据流量，用户不用等待等一大堆好处，就是谁用谁知道那种
ajax怎么工作的？ 相当于在用户和服务器之间添加了一个中间层，使用户操作与服务器响应异步化，这个中间层干啥，它能做一些验证和数据处理然后再请求服务器，让用户操作感觉更加流畅。在这里要注意，相当于是客户端（浏览器）帮助服务器（后台）做了一部分工作，实现了界面与应用分离的效果
ajax使用时候要注意什么？1.浏览器是否支持ajax，2.它把浏览器的后退功能给破坏了，同时加入收藏书签也不能用了3.安全问题-ajax暴露了更多的数据和逻辑
最重要的一点，我知道上边的你不会都看完，但是以后你还要看
ajax的实现过程包括四个步骤
1.实例化XMLHttpRequest对象 从客户端（浏览器）发送http请求，需要一个提供此功能的类的实例，没错XMLHttpRequest对象就是应需求实现的一个类 第一步实例化一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.连接服务器
xhr.open()
3.发送请求
xhr.send()
4.接收响应数据
监听：onreadystatechange,当readyState属性发生改变时调用
readyState有五个状态码，从0开始直到接收整个完整的HTTP响应，这个值增加到4表示已经完全接收
responseText
对请求的响应，
讲到这理论部分就结束了，接下来举个栗子，使用get方式请求ajax
js部分
var xhr = new XMLHttpRequest(); xhr.open(‘get‘, ‘getData.php‘, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseText; con.innerHTML = data; } }
后台部分
echo ‘如果你能抓到我我就让你嘿嘿嘿。。。‘;
简单的栗子用ajax实现页面无刷新获取后台数据
更上一层楼
上边简单的栗子实现页面无刷新调用后台数据，这一次我们把这个方法封装起来重复调用
function getData(json){
json = json || {};
json.data = json.data || {};
json.type = (json.type || ‘GET‘).toUpperCase();
// 实例化一个XMLHttpRequest对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
//ie6及其以下版本
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
// 设置请求
//监听事件 只要readyState的值发生改变即触发readystatechange时事件
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//判断返回得数据类型
var res=‘‘;
var dataType = xhr.getResponseHeader(‘Content-type‘);
if(dataType.indexOf(‘xml‘) !== -1){
res = xhr.responseXML
}else if(dataType == ‘application/json‘){
res = JSON.parse(xhr.responseText)
}else{
res = xhr.responseText;
}
//成功以后的回调函数
json.success && json.success(res)
}else{
json.error && json.error(status)
}
}
if(json.type==‘GET‘){
xhr.open(json.type,json.url+‘?‘+json.data,true)
xhr.send()
}else{
xhr.open(json.type,json.url,true);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘);
xhr.send(json.data)
}
}调用
getData({
type:‘GET‘,
url:‘getData.php‘,
success:function(eee){con.innerHTML = eee},
error:function(eve){console.log(eve)}
});
到这里第一期小白教学就到这了，敬请期待jsonp跨域。我从哪里来：西兄弟连前端http://www.lampbrother.net/html5/index.html
本文出自 “12133660” 博客，请务必保留此出处http://12143660.blog.51cto.com/12133660/1897134
原文地址：http://12143660.blog.51cto.com/12133660/1897134
