ajax

  　　　　　　　　 <在容易忘记的里面有详细说明>

前期准备

　　1.安装WAMP  

了解WAMP的主要作用是什么

　　 WAMP：Windows Apache MySql PHP的缩写 WAMP是一个集成环境，

　　对前端而言： 集成了后台语言PHP环境和数据库MYSQL 能够将一台计算机变成web服务器 方便开发者在真正的服务器环境进行测试

JSON的优势：

　　轻量级，体积小，节省流量，

　　提高加载速度

　　解析成原生JS对象，解析比XML更快 查找数据无需查找标签，更快

ajax的使用

　

　// 1.创建XMLHttpRequest对象
　　var xhr=null;
　　if (window.XMLHttpRequest) {// 非IE5/6
　　　　xhr=new XMLHttpRequest();//实例对象
　　} else{// IE5/6
　　　　xhr=new ActiveXObject('Microsoft.XMLHTTP');
　　};
　　// 2.打开与服务器的链接
　　xhr.open('get','abc.txt',true);
　　// 3.发送给服务器
　　xhr.send(null);//get请求
　　// 4.响应就绪
　　xhr.onreadystatechange=function (){
　　　　if (xhr.readyState==4) {//请求完成
　　　　　　if (xhr.status==200) {//ok
　　　　　　　　txt.innerHTML=xhr.responseText;
　　　　　　} else{
　　　　　　　　alert(xhr.status);
　　　　　　};
　　　　};
　　}

把ajax写在一个js里面，用的时候引入就行

　　

function ajax(Url,successFn,failureFn){
　　　　// 1.创建XMLHttpRequest对象
　　　　var xhr=null;
　　　　if (window.XMLHttpRequest) {// 非IE5/6
　　　　　　xhr=new XMLHttpRequest();//实例对象
　　　　} else{// IE5/6
　　　　　　xhr=new ActiveXObject('Microsoft.XMLHTTP');
　　　　};
　　　　// 2.打开与服务器的链接
　　　　xhr.open('get',Url,true);//生成不一样的url解决缓存问题
　　　　// 3.发送给服务器
　　　　xhr.send(null);//get请求

　　　　// 4.响应就绪 异步请求
　　　　xhr.onreadystatechange=function (){//回调函数
　　　　　　if (xhr.readyState==4) {//请求完成
　　　　　　　　if (xhr.status==200) {//ok
　　　　　　　　　　successFn(xhr.responseText);
　　　　　　　　} else{
　　　　　　　　　　if (failureFn) {
　　　　　　　　　　　　failureFn();
　　　　　　　　　　} else{
　　　　　　　　　　　　alert(xhr.status);
　　　　　　　　　　};
　　　　　　　　};
　　　　　　};
　　　　}

　　}

html中书写

ipt.onkeyup=function (){
　　list.innerHTML='';
　　ajax('baidu.php?wd='+ipt.value+'&t='+new Date().getTime(),function (str){
　　　　　　var json=JSON.parse(str);
　　　　　　for (var i = 0; i < json.s.length; i++) {
　　　　　　list.innerHTML+='<li>'+json.s[i]+'</li>';
　　　　};
　　});
}

 post请求

ipt.onkeyup=function(){
            list.innerHTML='';
            var xhr=null;
            if (window.XMLHttpRequest) {
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.open('post','baidu.php',true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send('wd='+ipt.value);
             xhr.onreadystatechange=function(){
                 if (xhr.readyState==4) {
                     if (xhr.status==200) {
                         var json=JSON.parse(xhr.responseText);
                         for (var i = 0; i < json.s.length; i++) {
                             list.innerHTML+='<li>'+json.s[i]+'</li>';
                         }
                     }
                 }
             }//同步，open里的值改为false
             var json=JSON.parse(xhr.responseText);
                 for (var i = 0; i < json.s.length; i++) {
                     list.innerHTML+='<li>'+json.s[i]+'</li>';
                 }
        }