AJAX

        AJAX : Asynchronous JavaScript and XML   异步JavaScript和XML   (XML更多的是被JSON格式替代使用)

        AJAX 只做一件事情:异步获取数据,更为重要的是还是JS对返回的数据进行操作。

 

        异步获取数据极大地改善web与用户的数据交互(如下图左侧为传统web,右侧为借助AJAX实现数据交互)

          wpsA7D8.tmp  wpsF933.tmp

 

    一. js中AJAX的原理及步骤

          1. 创建AJAX对象;

          2. 设置请求方式,请求地址,是否异步或同步请求;  (POST方式需要设置数据编码请求头信息)

          3. 发送数据进行AJAX请求;

          4. 根据服务器返回状态码进行处理;

 

       1. 创建AJAX对象

var  xhr = null;                     //创建一个AJAX对象
if(window.XMLHttpRequest){           //不能直接判断XMLHttpRequest,如果不存在会报错,判断一个对象的属性,如果不存在,也不会报错
      xhr = new XMLHttpRequest();     //标准浏览器
}else{
     xhr = new ActiveXObject('Microsoft.XMLHTTP');      //兼容IE6
}

         可以封装一个创建AJAX对象的函数

//第一种方式
function createXhr(){
    var  xhr = null;                     
    if(window.XMLHttpRequest){     
          xhr = new XMLHttpRequest();   
    }else{
         xhr = new ActiveXObject('Microsoft.XMLHTTP');   
    }
    return xhr;
}

//第二种方式
function createXhr(){
    var  xhr = null;                     
    try{
        xhr =  new XMLHttpRequest();   
    }catch(e){
         xhr = new ActiveXObject('Microsoft.XMLHTTP');   
    }
    return xhr;
}

 

        2. 设置请求方式,请求地址,是否异步或同步请求;

              xhr.open( method, url, [async] ) ;

             method: 请求方式,主要有GET和POST (POST方式需要设置数据编码请求头信息setRequestHeader(header,value) )

             url: 请求地址;

             async: 是否异步请求,默认为true,

 

        3. 发送数据进行AJAX请求;

               xhr.send(content);

           

           GET方式与POST方式的区别

                GET: 只能传输字符串数据, 数据名称和数据值用等号连接,放置在url?后面,并用&进行连接;

                POST: 可以传输文本,二进制,字符串等数据,数据名称和数据值用等号连接,利用send()方法发送,并用&进行连接;

 

           GET方式请求与发送

xhr.open("GET", "server.php?username=xiaopeng&age=9");     //get方式的数据放置在url?后面进行发送
xhr.send();

 

            POST方式请求与发送

xhr.open('post','server.php');                                                 //默认异步方式,可以不写
xhr.setRequestHeader('content-type‘, 'application/x-www-form-urlencoded');    //POST方式需要申明发送的数据类型
xhr,send('username=xiaopeng&age=9');                                           //传输的数据通过send()方法发送

 

          4. 根据服务器返回状态码进行处理;

              onreadystatechange :当Ajax对象的状态码发生改变时所触发的回调函数

              status :http的响应状态码

              statusText :http的响应状态文本

              reponseText :服务器端返回的数据(字符串形式)

              responseXML :服务器端返回的数据(xml形式)

 

                  status :http的响应状态码有

                           0:表示对象已建立,但未初始化

                           1:表示对象已初始化,但未发送

                           2:已调用send方法进行请求

                           3:正在接收数据(接收到一部分)

                           4:接收完成

 
xhr.onreadystatechange = function() {             //当请求状态改变的时候,触发事件                 
    if (xhr.readyState===4) {                     //AJAX工作状态为4时,表示请求完成
        if (xhr.status===200) {                   //http状态码为200时,表示服务器工作成功
            alert (xhr.responseText);
        } else {
            alert("发生错误:" + request.status);
        }
    } 
}

 

 

              小实例:注册时检测用户名是否存在 

       //JavaScript代码
        //绑定失去焦点事件
         var oUser = document.getElementById("username");
         oUser.onblur = function(){
            //获取用户名
            var username = oUser.value;
            //生成URL
            var url = 'demo.php?username=' + username;
            //创建AJAX对象
            var xhr = createXhr();
            //初始化对象
            xhr.open('get',url);
            //设置回调函数,可以设置在send()之前
            xhr.onreadystatechange = function(){
                //当状态码为4,响应状态码为200时
                if (xhr.readyState ==4 && xhr.status == 200) {
                    //判断服务器返回情况
                    if (xhr.responseText ==1 ) {     //这里根据后台设置接口判断
                        document.getElementById("result").innerHTML = '该用户名已被占用';
                    }else{
                        document.getElementById("result").innerHTML = '该用户名可以使用';
                    }
                };
            }
       //发送AJAX请求;
xhr.send();
}
 
    //php代码
    //查询用户名是否存在
    //获取数据
    $username = $_GET['username'];
    //连接数据库
    mysql_connect('localhost','root','1234');
    //选择数据库
    mysql_select_db('db_201404');
    //设置字符编码
    mysql_query('set names utf8');
    //查询语句
    $sql = "select * from admin where username='$username'";
    $result = mysql_query($sql);
    //受影响行数
    $count = mysql_num_rows($result);
    //关闭数据库
    mysql_close();
    if ($count>0) {
        echo 1;   //表示存在
    }else{
        echo 2;   //表示不存在
    }

            实例效果:

            wpsAD38.tmp

posted @ 2015-07-28 16:54  331415706  阅读(360)  评论(0编辑  收藏  举报