Ajax基础（新手宝典）

Ajax基本流程原理

ajax请求数据实例

ajax.js  封装好的ajax请求处理

参数：method  请求方式 url 请求地址  data 请求时前台发送的数据  function回调函数

/**
 * Created by Strip on 2016/8/25.
 */
function ajax(method,url,data,success) {
    var xhr = null;

    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data){
        url += '?' + data;
    }

    xhr.open(method,url,true);
    if (method == 'get'){
        xhr.send();
    }else{
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4){
            if (xhr.status == 200){
                success && success(xhr.responseText);
            }else{
                alert('Error:' + status);
            }
        }
    }
}

前台处理：

这里通过ajax得到数据  渲染到html页面当中

后台PHP文件（getNews.php）

'测试数据标题1','data'=>'测试数据内容1'),
    array('title'=>'测试数据标题2','data'=>'测试数据内容2'),
    array('title'=>'测试数据标题3','data'=>'测试数据内容3'),
    array('title'=>'测试数据标题4','data'=>'测试数据内容4'),
    array('title'=>'测试数据标题5','data'=>'测试数据内容5'),
    array('title'=>'测试数据标题6','data'=>'测试数据内容6'),
    array('title'=>'测试数据标题7','data'=>'测试数据内容7'),
    array('title'=>'测试数据标题8','data'=>'测试数据内容8'),
    array('title'=>'测试数据标题9','data'=>'测试数据内容9'),
);
echo json_encode($news);

get方式问题：

1、缓存：        在url?后面连接一个随机数（时间戳）+ new  Date().getTime()

2、中文乱码：编码    encodeURI(‘中文’)

post方式注意：

1、设置请求头  （声明发送的数据类型）

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

2、数据放在send()方法里作为参数传递

xhr.send('username=strip&age=25');

post方式没有缓存问题也不需要编码

 

转载于:https://my.oschina.net/strip/blog/737658