#千锋逆战班，拼搏永向前#

小六子_Java魔法师

于 2020-03-04 23:07:24 发布

阅读量71

点赞数

分类专栏：笔记

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Ajax入门案例之get、post方式

get步骤：
a.创建异步的XMLHttpRequest对象。
b.设置监听:监听对象的状态的变化,触发一个函数。
c.打开链接。
d.发送数据。
代码：

<head>
    <title>ajax的get请求</title>

    <script>



        function createXMLHttpRequest(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            } catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }
            return xmlHttp;
        }

        function myget() {
           //1,创建一个异步请求对象
            var xhr = createXMLHttpRequest();
            //2,监听异步请求对象的状态
            xhr.onreadystatechange = function () {
                //有响应来了
                if (xhr.status == 200) {
                    //响应成功
                    if (xhr.readyState == 4) {
                        //读取响应完成
                        //获取响应正文
                        var content = xhr.responseText;
                        console.log(content)
                    }
                }
            }
            //3,打开连接
            xhr.open("get","${pageContext.request.contextPath}/testGet?name=root",true);
            //4,发送参数
            xhr.send();

        }


    </script>
</head>
<body>

<button onclick="myget()">get异步请求</button>


</body>

post方式步骤:
a.创建异步的XMLHttpRequest对象。
b.设置监听:监听对象的状态的变化,触发一个函数。
c.打开链接。
d.设置请求头。
e.发送数据。

代码实现：

<head>
    <title>ajax的post请求</title>
    <script>

        function createXMLHttpRequest(){
            var xmlHttp;
            try{ // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
            } catch (e){
                try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }
            return xmlHttp;
        }

        function mypost() {
            //1,创建异步请求对象
            var xhr = createXMLHttpRequest();
            //2,监听异步请求对象状态改变
            xhr.readystatechange = function () {
                if (xhr.status == 200) {
                    if (xhr.readyState == 4) {
                        var content = xhr.responseText;
                        console.log(content);
                    }
                }
            }
            //3,打开连接
            xhr.open("post","${pageContext.request.contextPath}/testPost",true);
            //ajax的post请求本质是在模仿form表单的post请求
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            //4,发送参数
            xhr.send("name=root");
            //get:查询,不安全
            //post:增删改,安全
        }

    </script>
</head>
<body>

<button onclick="mypost()">post异步请求</button>
</body>

小六子_Java魔法师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#千锋逆战班，拼搏永向前#

Ajax入门案例之get、post方式get步骤：a.创建异步的XMLHttpRequest对象。b.设置监听:监听对象的状态的变化,触发一个函数。c.打开链接。d.发送数据。代码：<head> <title>ajax的get请求</title> <script> function createX...
复制链接

扫一扫