Ajax基础与运用

Ajax基础与运用

Ajax是很多种技术的结合体，工作的原理是开通一条可以传递信息的隧道，是新型的传递信息技术，
传统模式的web传递信息是需要加载整个页面，这样的效果是反应的速度慢，过渡依赖服务器的响应，占用较多的宽带，
现在流行的ajax技术，仅向服务器发发送所需要的数据，并不用加载整一个页面，这样服务器和游览器的交互就少了很多，大大的提高了响应的速度，
Ajax应用程序的优势在于：
1通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax与服务器端链接的主要有四步曲，
1，         建立ajax对象；
2，     function ajax(){
3，                    //1号线：创建ajax对象
4，                    var oAjax;
5，                    if(window.XMLHttpRequest){
6，                    兼容   //IE7+, Firefox, Chrome, Opera,Safari
7，                        oAjax=newXMLHttpRequest();
8，                    }
9，                    else{//兼容ie6以下
10，                     oAjax=newActiveXObject("Microsoft.XMLHTTP")
11，                   }
12，                   return oAjax;
13，                }
2向服务器发送数据请求；
1.   对象.onkeyup=function(){            
2.                  //2号线：发送请求(准备资料，真正的发送)
3.                  //open(get,url,true)
4.                  //第一个参数：数据传输方式 get  post
5.                  //第二个参数：处理文件  xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
6.                  //第三个参数：同步或者异步方式，默认是异步true
7.                  var url='/checkName4.php?time='+newDate()+'&name='+$('username').value;
8.                  ajax.open('GET',url,true);
9.                  //send() 如果是get方式，写null或者为空
10.                 //如果是post，参数那就直接写要传输的内容
11.                ajax.send(null);
4服务器发回请求格式有（xml,json,text,html）；
1.  //4号线：接收3号线传来的数据，进行处理
2.                  服务器改变事事件
3.        ajax.onreadystatechange=function(){                             if(ajax.readyState==4){       请求完成并且响应                              if(ajax.status==200){ ok
4.                        这是text格式                                                                                                                 对象.innerHTML=ajax.responseText;
5.                        这是xml格式
6.                 //alert(ajax.responseXML);
7.                           这是json格式
8.                     var bb=JSON.parse(ajax.responseText);
9.                    //alert(bb);
10.                    对象.innerHTML=bb.inf;
第三步服务器 php；
json处理代码：
1.  <?php
2.        
3.         //3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作
4.         //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
5.         header("Content-Type:text/text;charset=utf-8");
6.         //告诉浏览器不要缓存数据
7.         header("Cache-Control: no-cache");
8.        
9.         $userName=$_GET['name'];
10.       
11.        //0 不合法
12.        //1 已被注册
13.        //2 可以注册
14.       
15.        if($userName=='admin'){//把内容拿到，进行判断，输出信息返回给ajax
16.               echo'{"inf":"这个用户名不能用"}';
17.        }
18.       
19.        else{
20.               echo'{"inf":"这个用户名能用"}';
21.        }
22.       
23. ?>