Ajax技术

2023-11-02 09:50:04

1、什么是ajax

(1)ajax(asynchronouse javascript and xml)异步的javascript和xml

(2)是7种技术的综合，它包含了七个技术（javascript xml xstl xhtml dom xmlhttprequest css），ajax是一个粘合剂

(3)ajax是一个与服务端语言无关的技术，即可以使用在（php/java/.net）网站

(4)ajax可以给客户端返回三种格式数据（文本格式，xml，json格式）

(5)无刷新数据交换技术有以下：flash，java applet，框架，iframe，ajax

2、ajax技术解决的问题

(1)页面无刷新的动态数据交换

(2)局部刷新页面【验证用户名唯一】

(3)界面的美观【增强用户体验】

(4)对数据库的操作

(5)可以返回简单的文本格式，也可以返回xml文件格式，json数据格式

3、传统的ajax步骤：

(1)、创建xmlHttpRequest对象

(2)、拼接url和data

(3)、xmlHttpRequest.open()

(4)、指定回调函数

xmlHttpRequest.onreadystatechange=函数

(5)、xmlHttpRequest.send()

4、Jquery方法实现

(1)jquery对象.load()

load(url,[data],[callfunction])

url：表示向哪个php发送ajax请求

data：可选参数，但是格式有要求，应当按json格式来发送，一旦有这个数据，load将以post方式提交，如果没有数据，可以设置null，则默认以get方式提交

callfunction：形式function(data,textstatus,xmlHttpRequest);

　　data:表示从服务器返回数据（string）

　　textstatus:表示文本状态succuss,error,notmodify,timeout

　　xmlHttpRequest就是XMLHttpRequest对象

　　返回的数据可能是text/xml/json，这时你需要用不同的方法来处理，然后使用jquery来显示到某个适当位置

说明：load方法需要用jquery对象来调用

(2)$.get()

get(url,[callfunction]);

(3)$.post()

post(url,[data,][callfunction]);

data也是可以选填的，格式仍然遵守json格式{"name":"sp"}，相应于$_POST[‘name‘]；

该函数返回的值就是xmlHttpRequest对象；

5、客户端向服务器发送数据和接收数据的方式

(1)load方式提交，返回数据类型为text字符串

<script language="JavaScript">
    $(document).ready(function(){
        $(‘#b1‘).click(function(){
            //使用jquery提供的方法来发出ajax的请求
            //1、第一个参数表示把ajax请求发送给url
            //2、第二个参数表示是否发送数据data，如果你要发送则数据的格式应当是"{‘username‘:‘顺平‘}"
            //如果你不发送数据，则填入null，如果你有发送数据给服务器文件，默认load方法是以post方式提交，否则以get方式提交
            //3、第三个参数是函数（回调函数）
            //data表示从服务器回送的数据(string)
            //textStatus表示状态有四个success,error,notmodify,timeout
            //xmlHttpRequest表示XMLHttpRequest对象
            $(‘#one‘).load("loadController.php?data"+Math.random()+"&username="+$(‘#username‘).val(),null,function(data,textStatus,xmlHttpRequest){
                alert("服务器返回"+data);
                $(this).text(data);
            });
        })
    });
</script>

(2)客户端发送json，以load方法的post方式提交，服务器返回text字符串

<script language="JavaScript">
    $(document).ready(function(){
        $(‘#b1‘).click(function(){
            //使用jquery提供的方法来发出ajax的请求
            //1、第一个参数表示把ajax请求发送给url
            //2、第二个参数表示是否发送数据data，如果你要发送则数据的格式应当是"{‘username‘:‘顺平‘}"
            //如果你不发送数据，则填入null，如果你有发送数据给服务器文件，默认load方法是以post方式提交，否则以get方式提交
            //3、第三个参数是函数（回调函数）
            //data表示从服务器回送的数据(string)
            //textStatus表示状态有四个success,error,notmodify,timeout
            //xmlHttpRequest表示XMLHttpRequest对象
            var send_data={‘username‘:$(‘#username‘).val(),‘psw‘:$(‘psw‘).val()};//json数据格式
            $(‘#one‘).load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
                alert("服务器返回"+data);
                $(this).text(data);
            });
        })
    });
</script>

loadController.php
<?php
    header("content-type:text/html;charset=utf-8");
    $username=$_POST[‘username‘];
    file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
    if($username=="shunping"){
        echo "不可以用";
    }else{
        echo "可以用";
    }
?>

(3)客户端发送json，以load方法的post方式提交，服务器返回的是json格式的数据

<script language="JavaScript">
    $(document).ready(function(){
        $(‘#b1‘).click(function(){
            //使用jquery提供的方法来发出ajax的请求
            //1、第一个参数表示把ajax请求发送给url
            //2、第二个参数表示是否发送数据data，如果你要发送则数据的格式应当是"{‘username‘:‘顺平‘}"
            //如果你不发送数据，则填入null，如果你有发送数据给服务器文件，默认load方法是以post方式提交，否则以get方式提交
            //3、第三个参数是函数（回调函数）
            //data表示从服务器回送的数据(string)
            //textStatus表示状态有四个success,error,notmodify,timeout
            //xmlHttpRequest表示XMLHttpRequest对象
            var send_data={‘username‘:$(‘#username‘).val(),‘psw‘:$(‘psw‘).val()};//json数据格式
            $(‘#one‘).load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
                var obj=eval("("+data+")");
                window.alert(obj.res+" "+obj.info);
            });
        })
    });
</script>

loadController.php
<?php
    header("content-type:text/html;charset=utf-8");
    $username=$_POST[‘username‘];
    file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
    if($username=="shunping"){
        echo "{‘res‘:‘不可以用‘,‘info‘:‘哈哈‘}";
    }else{
        echo "{‘res‘:‘可以用‘,‘info‘:‘嘻嘻‘}";
    }
?>

(4)客户端发送json，以load方法的post方式提交，服务器返回的是xml格式的数据

<script language="JavaScript">
    $(document).ready(function(){
        $(‘#b1‘).click(function(){
            //使用jquery提供的方法来发出ajax的请求
            //1、第一个参数表示把ajax请求发送给url
            //2、第二个参数表示是否发送数据data，如果你要发送则数据的格式应当是"{‘username‘:‘顺平‘}"
            //如果你不发送数据，则填入null，如果你有发送数据给服务器文件，默认load方法是以post方式提交，否则以get方式提交
            //3、第三个参数是函数（回调函数）
            //data表示从服务器回送的数据(string)
            //textStatus表示状态有四个success,error,notmodify,timeout
            //xmlHttpRequest表示XMLHttpRequest对象
            var send_data={‘username‘:$(‘#username‘).val(),‘psw‘:$(‘psw‘).val()};//json数据格式

            $(‘#one‘).load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
                //如果服务器返回的数据格式是xml格式的
                var result=xmlHttpRequest.resonseXML;
                //取出返回的res
                var res=result.getElementsByTagName(‘res‘);
                window.alert(res[0].childNodes[0].nodeValue);

            });
        })
    });
</script>

loadController.php
<?php
    header("content-type:text/xml;charset=utf-8");
    $username=$_POST[‘username‘];
    file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
    if($username=="shunping"){
        echo "<result><res>不可以用</res><info>哈哈</info></result>";
    }else{
        echo "<result><res>可以用</res><info>嘻嘻</info></result>";
    }
?>

(4)客户端发送json，以$.post方式提交，服务器返回的是text或json或xml格式的数据

<script language="JavaScript">
    $(document).ready(function(){
        $(‘#b1‘).click(function(){
            var send_data={‘username‘:$(‘#username‘).val(),‘psw‘:$(‘psw‘).val()};
            var xmlHttpRequest= $.post("loadController.php",send_data,function(data,ts){
                //如果服务器返回的是text
                //alert(data);
                //如果服务器返回的是json格式
                var objs=eval("("+data+")");
                //若不转objs是dom对象集合

                var $objs=$(objs);//jquery对象集合
                //$objs表示[{‘res‘:‘不可以用‘,‘info‘:‘嘻嘻‘},{‘res‘:‘不uu‘,‘info‘:‘哈哈uu‘}]
                $objs.each(function(){
                    alert(this.res+this.info);
                });
                
                //xml格式->dom
                var xmlObjs=xmlHttpRequest.responseXML;
                //dom方法来解析
                var res=xmlObjs.getElementsByTagName(‘res‘);
                alert(res[0].childNodes[0].nodeValue);

            });
        });
    });
</script>

loadController.php
<?php
    header("content-type:text/xml;charset=utf-8");
    $username=$_POST[‘username‘];
    file_put_contents("d:/mylog.log","ok".$username."\r\n",FILE_APPEND);
    if($username=="shunping"){
        echo "不可以用";
        echo "[{‘res‘:‘不可以用‘,‘info‘:‘嘻嘻‘},{‘res‘:‘不uu‘,‘info‘:‘哈哈uu‘}]";
        echo "<result><res>不可以用</res><info>哈哈</info></result>";
    }else{
        echo "可以用";
        echo "[{‘res‘:‘可以用‘,‘info‘:‘嘻嘻‘},{‘res‘:‘可以iii用‘,‘info‘:‘嘻嘻‘}]";
        echo "<result><res>可以用</res><info>嘻嘻</info></result>";
    }
?>

Ajax技术

码农公寓

相关文章