zoukankan      html  css  js  c++  java
  • JS——AJAX

    向服务器发送请求如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:Open方法了有两种请求方式——get和post

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

    1、无法使用缓存文件(更新服务器上的文件或数据库)

    2、向服务器发送大量数据(POST 没有数据量限制)

    3、发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    注释:send(string)方法只有当时post请求时才会传入参数

    onreadystatechange 事件:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:

    属性 描述
    onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState

    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪
    status

    200: "OK"

    404: 未找到页面

    在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

     GET请求:

    <body>
        <button onclick="loadXMLDoc()">点击发送异步请求</button>
        <script>
            function loadXMLDoc() {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        alert(xmlhttp.responseText);
                    }
                }
                xmlhttp.open("get", "person.ashx", true);
                xmlhttp.send();
            }
        </script>
    </body>

    PSOT请求:

    <body>
        <button onclick="fs()">点击发送异步请求</button>
        <script>
            var xmlHttp;
            function GetXmlHttpObject() {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari 
                    xmlhttp = new XMLHttpRequest();
                } else {// code for IE6, IE5 
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xmlhttp;
            } 
            function getOkPost() {
                if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
                    // 本地提示:加载中/处理中 
                }
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var d = xmlHttp.responseText; // 返回值 
                    // 处理返回值 
                    alert(d);
                }
            }
            function fs() {
                xmlHttp = GetXmlHttpObject();
                if (xmlHttp == null) {
                    alert('您的浏览器不支持AJAX!');
                    return;
                }
                var url = "info.ashx";
                xmlhttp.open("POST", url, true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                var data = "name=wqx&age=10"
                xmlhttp.send(data);
                xmlHttp.onreadystatechange = getOkPost;//发送事件后,收到信息了调用函数 
            }       
        </script>
    </body>

    参考:W3C

  • 相关阅读:
    LeetCode:230. 二叉搜索树中第K小的元素
    LeetCode:229. 求众数 II
    LeetCode:228. 汇总区间
    LeetCode:225. 用队列实现栈
    LeetCode:209. 长度最小的子数组
    LeetCode:208. 实现 Trie (前缀树)
    疯狂的订餐系统-软件需求分析挑战之旅 【转】
    产品需求文档(PRD)的写作 【转】
    软件需求文档标准格式
    通过实例编写开发规范文档 【转】
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7760703.html
Copyright © 2011-2022 走看看