• Ajax学习笔记——基本原理


    Ajax(Asynchronous JavaScript + XML)不是语音,不是框架,也不能算是一种技术,而是一种模式。通过这种模式实现不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。
     
    Ajax的核心是XMLHttpRequest。XMLHttpRequest是浏览器内置对象,用于在不更新网页的情况下和服务器通信,获取数据。
     
    以下是来自菜鸟教程的示例:
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
     
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
     
    </body>
    </html>
    XMLHttpRequest.readyState属性存储请求的4个状态:
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
    readyState变化时,会触发XMLHttpRequest.onreadystatechange事件。在该事件中处理服务器返回的数据并更新网页。
     
    XMLHttpRequest.open(method,url,async)方法的三个参数分别表示:
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)
    通常async传true。如果传false,就没有必要定义onreadystatechange事件,因为程序会在send()处阻塞,可以直接在send()返回后处理response。
     
    XMLHttpRequest有两个属性用来获取服务器的响应:
    responseText:获得字符串形式的响应数据。
    responseXML:获得 XML 形式的响应数据。
     
    本文主要是了解下Ajax的基本原理,暂不涉及其他高级用法。
     
  • 相关阅读:
    “LM/w3svc/1/root /***” 别名已存在
    Dawn of a New Day
    线程池(java.util.concurrent.ThreadPoolExecutor)的使用
    放心走吧,谷歌中国
    实现MySQL允许远程连接
    Google Engineer Gets $6 Million For Not Going To Facebook
    mysql主从同步出现Slave_IO_Running: Connecting的解决思路
    解决eclipse/sts加入@Controller注解后alt+/快捷键的提示功能失效
    Maven异常:Missing artifact org.slf4j:slf4japi:jar:1.7.25以及properties标签作用
    eclipse和sts使用alt+/代码提示,有两个相同的提示
  • 原文地址:https://www.cnblogs.com/night1989/p/9693903.html
Copyright © 2020-2023  润新知