1. AJAX是什么，如何使用AJAX?
ajax (异步的 javascript 和 xml) 能够刷新局部网页数据而不是重新加载整个网页。
第一步，创建 xmlhttprequest 对象，var xmlhttp =new XMLHttpRequest();
XMLHttpRequest 对象用来和服务器交换数据。
第二步，使用 xmlhttprequest 对象的 open() 和 send() 方法发送资源请求给服务器;
第三步，使用 xmlhttprequest 对象的 responseText 或 responseXML 属性获得服务器的响应;
第四步，onreadystatechange 函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用; onreadystatechange 函数，每次 xmlhttprequest 对象的 readyState 发生改变都会触发 onreadystatechange 函数
2. 具体实现
2.1 创建 XMLHttpRequest();
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();//标准浏览器 } else { xhr = new ActiveXObject('Microsoft')//IE老版本 }
2.2 准备发送；
// 参数一：请求方式（get获取数据；post提交数据）； // 参数二：请求地址 // 参数三：同步或异步标志位，默认是true表示异步，false表示同步 // 如果是get请求，那么请求参数必须在url中传递,encodeURI()用来对中文参数 var param = 'username='+uname+'&password='+pw; xhr.open('get','./check.php?'+encodeURI(param),true);
2.3 执行发送动作；
2.3.1 get请求
xhr.send(null)
2.3.2 post请求
xhr.setRequestHeader("content-type","application/x-www-form-url-urlencoded");//请求头 xhr.send(param);//post请求参数在这里传递，并且不需要转码
2.4 指定回调函数；
xhr.onreadystatechange=function(){ if(xhr.radyState==4){ if(xhr.status==200){ var data=xhr.responseText; var info=document.getElementById('info'); if(data=='1'){ info.innerHTML='登录成功'; }else if(data=='2'){ info.innerHTML='用户名或密码错误'; } } } } }
xhr.readyState状态值含义
0 xhr对象初始化； 1 执行发送动作； 2 服务器端数据已经完全返回； 3 数据正在解析； 4 数据解析完成，可以使用了；
xhr.status（部分）状态值含义
200 数据响应正常； 404 没有找到资源； 500 服务器端错误；
3. jquery中 使用 jsonp，解决跨域请求
$(function(){ $('#btn').click(function(){ $.ajax({ type:'get', url:'http://tom.com/jsonp.php', dataType:'jsonp', jsonp:'cb',//自定义参数名字（callback=abc),指的是等号前面的键，后端根据这个键获取方法名，jquery默认的参数名称是callback jsonpCallback:'abc',//自定义参数名字（callback=abc),指的是等号后面的值 data:{}, success:function(data){ console.log(data.username) }, error:function(data){ console.log('error') } }) }) })
