Ajax基础

1.什么是Ajax?

*Asynchronous Javascript and Xml 异步的JavaScript和Xml

*Ajax就是一种为改善用户体验的技术，实质是使用XMLHttpRequest对象异步的向服务器发送请求；

*服务器返回部分数据，而不是一个完整的页面，以页面的无刷新效果更改页面中的内容。

*Ajax实现的是B/S架构下的异步交互，而此前我们还有一种实现异步交互的技术：<iframe src="" >元素，这是基于C/S架构的异步交互。

(1)同步交互：我们在提交一个请求之后，要等到服务器给一个响应，在响应回来这期间，用户不能做其他事情，只能等待；

(2)异步交互：异步提交请求之后，我们不必等待服务器响应，期间可以做其他操作，互不影响，用户体验良好。

2.实现异步交互的四大步骤：

(1)创建核心异步对象：XMLHttpRequest对象；

function getXhr(){

        var xhr=null;

       if(window.XMLHttpRequest){

          xhr=new XMLHttpRequest(); 

      }else{

         xhr=new ActiveXObject("Microsoft.XMLHttp");

     }

    return xhr;

}       

(2)第二步：与服务器建立连接

       var xhr=getXhr();

      xhr.open("get","01.php?username=zhangsan");

(3)第三步：向服务器发送请求

     xhr.send(null);

(4)第四步：接收服务器响应数据。

     xhr.onreadystatechange=function(){

          if(xhr.readyState==4){

             if(xhr.status==200){

                var data=xhr.responseText;

                console.log(data);

             }

         }

     }

注意的是：如果是get请求，将传递的参数附载在URL后面，xhr.send(null),这个必不可少；

                  如果是Post请求，在send()的方法调用之前要添加请求头，因为之前以表单的形式提交的时候，content-Type为"application/x-www-form-urlencoded",而在这里我们是以一个按钮的onclick事件去执行异步请求的，所以Post请求必须加请求头，不然无法将数据传送到后台。