原生AJAX的GET和POST

来源：互联网发布：ssl端口号编辑：程序博客网时间：2024/06/05 18:26

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

一、GET

index.php

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax</title></head><body>    <div id="container">        <button id="btn">点击提交</button>    </div>    <script>    document.getElementById("btn").addEventListener("click", function() {        var xmlhttp = null;        if (window.XMLHttpRequest) {            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码            xmlhttp = new XMLHttpRequest();        } else if (window.ActiveXObject) {            // IE6, IE5 浏览器执行代码            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        } else {            alert("请升级至最新版本的浏览器");        }        xmlhttp.onreadystatechange = function() {            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                var obj = JSON.parse(xmlhttp.responseText);                console.log(obj)            }        }        xmlhttp.open("GET", "data.php?name=weijia_kmys&skill=web", true);        xmlhttp.send();    });    </script></body></html>

data.php

<?php echo json_encode($_GET);?>

请求结果：

二、POST

index.php

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax</title></head><body>    <div id="container">        <button id="btn">点击提交</button>    </div>    <script>    document.getElementById("btn").addEventListener("click", function() {        var xmlhttp = null;        if (window.XMLHttpRequest) {            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码            xmlhttp = new XMLHttpRequest();        } else if (window.ActiveXObject) {            // IE6, IE5 浏览器执行代码            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        } else {            alert("请升级至最新版本的浏览器");        }        xmlhttp.onreadystatechange = function() {            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {                var obj = JSON.parse(xmlhttp.responseText);                console.log(obj)            }        }        //true（异步）  false（同步）        xmlhttp.open("POST", "data.php", true);        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        var postData = {"name":"weijia_kmys","skill":"web"};        //转成post需要的字符串.         postData = (function(obj) {            var str = "";            for (var prop in obj) {                str += prop + "=" + obj[prop] + "&";            }            return str;        })(postData);        xmlhttp.send(postData);    });    </script></body></html>

data.php

<?phpecho json_encode($_POST);?>

请求结果：

阅读全文

1 0