php进阶——03 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请求

之前的博文

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值