自己写的ajax工具

最新推荐文章于 2021-08-06 10:49:46 发布

糖薪砖

最新推荐文章于 2021-08-06 10:49:46 发布

阅读量234

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tangxinzhuan/article/details/89058066

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、ajaxTool.js

var xmlhttp;

/**
 * ajax之GET请求方式
 * @param url
 * @param data
 * @param callback
 */
function ajaxGET(url, data, callback)
{
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function() {
        // 请求完成，并且响应状态为成功
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsondata = JSON.parse(xmlhttp.responseText);
            callback(jsondata);
        }
    }
    
    xmlhttp.open("GET", url + '?' + data, true);
    xmlhttp.send();
}

/**
 * ajax之POST请求方式
 * @param url
 * @param data
 * @param callback
 */
function ajaxPOST(url, data, callback)
{
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function() {
        // 请求完成，并且响应状态为成功
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var jsondata = JSON.parse(xmlhttp.responseText);
            callback(jsondata);
        }
    }
    
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

2、testAjaxTool.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的ajax工具</title>
    </head>
    <body>
        <h1>我的ajax工具</h1>
    </body>
    <script src="ajaxTool.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        // 测试GET
        ajaxGET('http://127.0.0.1/index.php', 'name=txinz&page=1', function(data) {
            if (data) {
                // 输出结果
                document.body.innerText = data.msg;
            }
        });
        
        // 测试POST
        ajaxPOST('http://127.0.0.1/index.php', 'name=txinz&page=1', function(data) {
            if (data) {
                // 输出结果
                document.body.innerText = data.msg;
            }
        });
        
    </script>
</html>

3、index.php （服务端）

<?php

// 准备的测试数据
$arr = ['msg'=>'success', 'code'=>1];

// 告诉浏览器这是json数据
header('Content-Type:application/json;charset=UTF-8');
// 告诉浏览器允许跨域访问的域名
header('Access-Control-Allow-Origin: *');

// 输出json
echo json_encode($arr);

糖薪砖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的ajax工具

1、ajaxTool.jsvar xmlhttp;/** * ajax之GET请求方式 * @param url * @param data * @param callback */function ajaxGET(url, data, callback){ if (window.XMLHttpRequest) { // code for IE7+,...
复制链接

扫一扫

专栏目录