数据交互

2016-10-22　　　　12:22:42

相关概念

AJAX（Asynchronous Javascript And XML）即“异步JavaScript和XML”；

是指一种实现客户端和服务器的数据传递的网页开发技术；

核心：局部刷新，异步加载；

即“在不需要刷新页面的情况下，就可以与Web服务器交换数据，产生局部刷新的效果”。

基础步骤

　　第一步 ：先创建AJAX对象

    /*兼容处理*/        
    var xhr;  //声明AJAX对象变量
    if(window.XMLHttpRequest){ 
        xhr = new XMLHttpRequest();  //标准模式下创建的AJAX对象
    }else{ 
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); //非标准模式下创建的AJAX对象
    }
    
    /*不考虑兼容*/
　　 var xhr = new XMLHttpRequest();

　　第二步 ：确定发送方式（连接服务器）

1　　 xhr.open("get", url, true)　　//get请求
　　xhr.open("post", url, true)　　//post请求

　　第三步 ：发送请求

　　xhr.send(null);

　　第四步：监听服务端响应的数据

　　/*
     同步：不需要监听事件
         readystate  请求状态
         如果请求状态是4的话：
         表示的是http包已经完全接收！
         status  完全接收后的状态码
         如果状态码是200
         表示的是http包已经完全解析

     异步：需要监听事件
     xhr.onreadystatechange = function(){
         readystate  请求状态
         如果请求状态是4的话：
         表示的是http包已经完全接收！
         status  完全接收后的状态码
         如果状态码是200
         表示的是http包已经完全解析
         responseText 
         表示服务端给你返回过来的结果
     }
    */
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                alert(xhr.responseText)
            }else{
                //不是ok  会话失败
                alert(xhr.statusText)
            }
        }
    }

（未完待续~~）