原生Ajax（XMLHttpRequest）

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ray-h/p/10202529.html

文章标签：

#javascript #python #ViewUI

本文深入探讨了Ajax（异步的JavaScript和XML）的工作原理，以及如何使用XMLHttpRequest对象进行GET和POST请求，实现与服务器的异步数据交换，更新网页内容而无需刷新整个页面。

一、什么是Ajax：

全称Asynchronous JavaScript and XML；
异步的 JavaScript 和 XML；
可以在不重新加载整个页面的情况下（偷偷发数据），与服务器交换数据并更新部分网页内容；

二、Ajax之XMLHttpRequest：

1）五步使用法:

　　1.创建XMLHTTPRequest对象

　　2.使用open方法设置和服务器的交互信息

　　3.设置发送的数据，开始和服务器端交互

　　4.拿到数据后执行相关操作

这是GET请求：

HTML：
<a class="btn" onclick="AjaxSubmit2()">XMLHttpRequest点我</a>

<script>
        function AjaxSubmit2() {
            //第1步
            var xhr = new XMLHttpRequest();
            //第2步设置发送方法
            xhr.open('GET','/ajax1.html?p=123');
            //第3步设置发送数据
            xhr.send(null);
            //第4步，回调函数，拿到服务端数据后执行相关操作
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){        {# 有0,1,2,3,4 四个数字都代表4个状态 #}
                    // 接收服务端的全部信息
                    console.log(xhr.responseText);
                }
            };
        }
    
</script>

POST请求：跟GET请求不一样的是需要加上请求头

HTML:
<a class="btn" onclick="AjaxSubmit4()">XMLHttpRequest点我</a>

<script>
function AjaxSubmit4() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                console.log(xhr.responseText);
            }
    };
    xhr.open("POST","/ajax1.html");
    {#  POST请求需要携带请求头，Django才能解析出来  #}
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
    xhr.send("q=456");
}
</script>

转载于:https://www.cnblogs.com/ray-h/p/10202529.html