php面向对象——12 php & ajax

ajax

异步处理,不影响页面的顺序执行。

函数回调,可以操作DOM。


优点:

1)局部刷新,提升用户体验;

2)减少延迟,实时交互;


使用场景:

不需要整个页面刷新,只需要局部刷新时使用。



原生JS发送ajax请求


JS代码

<script>

    // 1.创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        var xmlHttp = new XMLHttpRequest();
    }else{
        // IE低版本
        var xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
    }


    // 2.连接服务器,并规定何种方式打开,是否异步
    var url = 'http://localhost/studyPHP/lesson2/part2/ajax/test.php';
    xmlHttp.open('GET',url,true);

    // 3.发送请求
    xmlHttp.send();

    // 4.响应请求
    xmlHttp.onreadystatechange = function(){

        // 5.服务器响应完成
        if( xmlHttp.readyState === 4 && xmlHttp.status === 200){

            // 6.解析服务器返回的json字符串
            var json = xmlHttp.responseText;

            // 7.解析JSON,(注意,JSON一定要大写)
            var info = JSON.parse(json);

            // 8.更改DOM里的内容                                     
            document.getElementById('pid').innerHTML = info.name + '---' +info.age;
        }
    }

</script>

<p id="pid"></p>


php代码

<?php
     // 转换成JSON格式输出
echo json_encode(array("name"=>"tim","age"=>12));



JQ GET方式发送ajax请求


基本格式

 jQuery.get(url,[data],[callback],[type])


JS代码

var url = 'http://localhost/studyPHP/lesson2/part2/ajax/test.php';

$.get(url,{'name':'tim'},function(data){

        // DOM操作
        $('#pid').append('<h2>'+data.age+'</h2>');

},'json');



JQ POST方式发送ajax请求


基本格式

 jQuery.post(url,[data],[callback],[type])


JS代码

$.post(url,{'os':'windows',system:'php'},function(data){
        //alert(data.params2);

        // DOM操作
        $('#pid').append('<h2>'+data.params1+'</h2>');

},'json');


PHP代码

<?php
    // 获取post数据
    $os = $_POST['os'];
    $system = $_POST['system'];

    echo json_encode(array('params1'=>$os,'params2'=>$system));



JQ Ajax方式发送ajax请求

之前的博文

文章来源: php面向对象——12 php & ajax

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:php面向对象——12 php & ajax