AJAX基础知识总结

妖狐艹你老母 2021-09-16 23:30 508阅读 0赞

**目录**

AJAX工作原理图：

基于AJAX的异步处理（AJAX采用异步方式与后台交互）：

基于AJAX的异步加载过程

XMLHttpRequest的方法：

XMLHttpRequest的属性：

创建XMLHttpRequest对象：

例1.

例2.使用get方法和POST方法向服务器传送参数：https://blog.csdn.net/qq\_40323256/article/details/83933005

--------------------

AJAX（Asynchronous JavaScript and XML）它是一种由多种技术组合的技术。  包括Javascript、**HTML5**和**CSS3.0**、DOM、XML和XSTL、XMLHttpRequest 等。

XHTML，CSS用于呈现

DOM实现动态显示和交互

XML和XSTL进行数据交换与处理

XMLHttpRequest对象用于进行异步数据读取

Javascript绑定和处理所有数据

通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

##      AJAX工作原理图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 基于AJAX的异步处理（AJAX采用异步方式与后台交互）： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 基于AJAX的异步加载过程 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

## XMLHttpRequest的方法： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

##  XMLHttpRequest的属性： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

##  创建XMLHttpRequest对象： ##

var xmlhttp;
                if (window.XMLHttpRequest)//code for IE7+ ,FireFox,chrome,opera,safari
                {
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {//code for IE5,6
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

## 例1. ##

![20181112134756339.png][]

HtmlPage1.html

<head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function loadXMLDoc()
            {
                var xmlhttp;
                if (window.XMLHttpRequest)//code for IE7+ ,FireFox,chrome,opera,safari
                {
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {//code for IE5,6
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //xmlhttp.onreadystatechange = callback;
                //function callback() {
                //    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                //    }
                //}
                xmlhttp.onreadystatechange = function ()
                {
                    alert("xmlhttp.readyState:" + xmlhttp.readyState);
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "WebForm1.aspx", true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="请求数据" onclick="loadXMLDoc()" /> <div id="myDiv">  </div>
    </body>

WebForm1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
            {
                Response.Expires = -1;
                string a = "请求时间";
                System.DateTime currentTime = new System.DateTime();
                currentTime = System.DateTime.Now;
                a = a + currentTime;
                Response.Write(a);
            }

![20181112135205336.gif][]

## 例2.使用get方法和POST方法向服务器传送参数：[https://blog.csdn.net/qq\_40323256/article/details/83933005][https_blog.csdn.net_qq_40323256_article_details_83933005] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/c250ed97096e4b2ab40b0244851f5d79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/468ff11d20eb467a9c7b01c0915f871f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/244a0b3af4ef4b50a2a7385f35c66bbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/6e45cdc32f47493790dcf53212bda0d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/a13c36d6376f4e06bec9b6126736ac45.png
[20181112134756339.png]: /images/20210725/c9171028a35f49969b8ae0da03fba902.png
[20181112135205336.gif]: /images/20210725/be1e11f4b37444a185ea1d68937a6995.png
[https_blog.csdn.net_qq_40323256_article_details_83933005]: https://blog.csdn.net/qq_40323256/article/details/83933005