AJAX基础知识总结

AJAX工作原理图：

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

基于AJAX的异步加载过程

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

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

XHTML，CSS用于呈现

DOM实现动态显示和交互

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

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

Javascript绑定和处理所有数据

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

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

AJAX工作原理图：

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

基于AJAX的异步加载过程

XMLHttpRequest的方法：

XMLHttpRequest的属性：

创建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.

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);
        }

AJAX工作原理图：

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

基于AJAX的异步加载过程

XMLHttpRequest的方法：

XMLHttpRequest的属性：

创建XMLHttpRequest对象：

例1.

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

猜你喜欢