AJAX请求原理讲解（适合入门）

最新推荐文章于 2022-04-23 13:25:14 发布

Strip_lue

最新推荐文章于 2022-04-23 13:25:14 发布

阅读量482

点赞数

分类专栏： AJAX 文章标签： ajax json

本文链接：https://blog.csdn.net/lin_bing110/article/details/80702879

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax基本流程原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script>
        /**
         * Ajax: 异步javascript和XML
         * 用javascript异步形式操作XML
         * 数据交互 节省用户操作，时间，提高用户体验，
         */
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                /**
                 * 1、创建ajax对象（ie6以下用插件 ActiveXObject('Microsoft.SMLHTTP'))
                 * @type {XMLHttpRequest}
                 */
                var xhr = null;

               /* if (window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }*/

               try {
                   xhr = new XMLHttpRequest();
               }catch (e){
                   xhr = new ActiveXObject('Microsoft.XMLHTTP');
               }
                /**
                 * open()方法
                 * 参数
                 *      1.打开方式
                 *      2.地址URL
                 *      3.是否异步
                 *          异步：非阻塞模式 通俗讲：前面代码不会影响后续代码执行
                 *          同步：阻塞模式 通俗讲：前面代码未执行完毕无法执行后续代码
                 */
                xhr.open('get','1.txt',true);
                //发送请求
                xhr.send();
                //等待服务器返回数据
                /**
                 * readyState：ajax工作状态
                 *              0：初始化 还没有调用open()方法
                 *              1：载入状态 已经调用send()方法，正在发送请求
                 *              2：载入完成 send()方法完成，已经接受到全部响应内容
                 *              3：解析内容  正在解析响应内容
                 *              4：完成状态  响应内容解析完成，可以在客户端调用了
                 * responseText：ajax请求返回的内容被存放在这个属性下面
                 * 返回内容：
                 *          responseText:返回文本形式存放内容
                 *          responseXML：返回XML形式内容
                 * onreadystatechange：当readystate状态值改变的时候触发
                 * status属性：服务器（请求资源）的状态 http状态码（三位数字）
                 *                          1头：信息类
                 *                          2头：成功累
                 *                          3头：重定向
                 *                          4头：错误类
                 *                          5头：服务器错误
                 */
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){
                        if (xhr.status == 200){
                            alert(xhr.responseText);
                        }else{
                            alert('Error:' + xhr.status);
                        }

                    }
                }

            }

        }

    </script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>

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页面当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/ajax.js"></script>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            
            oBtn.onclick = function () {
                ajax('get','getNews.php','',function (data) {
                    var data = JSON.parse(data);
                    var oUl = document.getElementById('ul1');
                    var html = '';
                    for(var i=0; i<data.length; i++){
                        html += '<li><a href="">'+ data[i].title +'</a><p>'+ data[i].data +'</p></li>'
                    }
                    oUl.innerHTML = html;
                });
        //这里开启了定时器：每隔1秒会向后台请求一次
                setInterval(function () {
                    ajax('get','getNews.php','',function (data) {
                        var data = JSON.parse(data);
                        var oUl = document.getElementById('ul1');
                        var html = '';
                        for(var i=0; i<data.length; i++){
                            html += '<li><a href="">'+ data[i].title +'</a><p>'+ data[i].data +'</p></li>'
                        }
                        oUl.innerHTML = html;
                    });
                },1000);
            }
        }
    </script>
</head>
<body>
<input type="button" value="获取" id="btn1">
<ul id="ul1"></ul>
</body>
</html>

后台PHP文件（getNews.php）

<?php
/**
 * Created by PhpStorm.
 * User: Strip
 * Date: 2016/8/25
 * Time: 12:34
 */
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
    array('title'=>'测试数据标题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方式没有缓存问题也不需要编码

Strip_lue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录