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请求

之前的博文