Ajax 请求的实例

最新推荐文章于 2024-01-13 22:40:12 发布

tokikou

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量313

点赞数

分类专栏： Ajax 文章标签： jquery javascript

本文链接：https://blog.csdn.net/tokikou/article/details/109731906

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
    function ajaxGet() {
        "use strict";
        // 创建异步对象
        var xhr = new XMLHttpRequest();

        // 设置参数
        xhr.open("get", "getServerTime.ashx", true);

        // 设置回调函数
        xhr.onreadystatechange=function() {
            if (xhr.readyState == 4) {
                if (xhr.status==200) {
                    // alert(xhr.responseText);
                    document.getElementById("div1").innerHTML = xhr.responseText;
                }
            }
        }

        //发送请求
        xhr.send();
    }
</script>
</head>
<body>
<div id="div1" style="border: 1px solid red;height: 40px"></div>
<input type="button" value="ajaxget请求" onclick="ajaxGet()" />
</body>
</html>

这是是调用的页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            ajaxHelper.ajaxGet("getgroupinfo.ashx", function (jsarr) {
                //开始创建表格
                //1.0 遍历jsarr 数组对象  [{"GroupId":"1","GroupName":"老板"},{"GroupId":"2","GroupName":"老板1"},{},{}....]
                var tbobj = document.getElementById("tb");
                for (var i = 0; i < jsarr.length; i++) {
                    //2.0 获取当前jsarr数组中的某个对象
                    var item = jsarr[i]; //{"GroupId":"1","GroupName":"老板"}

                    //3.0 开始向表格对象中添加tr
                    var tr = tbobj.insertRow(-1);

                    //4.0 向tr属性中添加td
                    tr.insertCell(-1).innerHTML = item.GroupId;
                    tr.insertCell(-1).innerHTML = item.GroupName;
                }
            });
        }        
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <th>分组id</th>
            <th>分组名称</th>
        </tr>
    </table>
</body>
</html>

var ajaxHelper = {
    markXHR: function () {
        var xhr;
        //高版本浏览器才支持 new XMLHttpRequest() 操作
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else //适配低版本浏览器的异步对象创建工作
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    },
    ajaxGet: function (url, callBackFun) {
        this.ajaxProcess("get", url, null, callBackFun);
    },
    ajaxPost: function (url, parms, callBackFun) {
        this.ajaxProcess("post", url, parms, callBackFun);
    },
    //通用的ajax请求包装方法，可以被ajaxGet和ajaxPost方法来调用
    //1、method：表示请求方法  2 url ：表示请求的服务器路径  3 parms:只有post才有参数，如果是get请求则为null
    //4 callBackFun:回调函数，其逻辑代码是在调用方法中实现好以后，传入ajaxProcess 方法中的
    ajaxProcess: function (method, url, parms, callBackFun) {
        // 将字符串统一转换成小写
        var httpMethod = method.toLowerCase();
        //1.0 实例化异步对象
        var xhr = this.markXHR();
        //2.0 设置请求相关参数
        xhr.open(httpMethod, url, true);

        //3.0 设置请求报文头
        if (httpMethod == "get") {
            xhr.setRequestHeader("If-Modified-Since", "0");
        } else {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }

        //4.0 设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 获取服务器响应回来的响应报文体的数据
                var result = xhr.responseText;
                //由于result 是一个json格式的字符串，所以在此处统一转换成js对象（数组），再传入回调函数
                var jsobj = JSON.parse(result);
                // 调用回调函数，将js对象传入
                callBackFun(jsobj);
            }
        }

        //5.0 发送请求给服务器
        if (httpMethod == "get") {
            xhr.send(null);
        } else {
            xhr.send(parms);
        }

    }

}

tokikou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 请求的实例

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script type="text/javascript"> function ajaxGet() {
复制链接

扫一扫