zoukankan      html  css  js  c++  java
  • 妙味——ajax(1)

    ajax请求:

      1、创建Ajax对象

      2、连接服务器

      3、发送请求

      4、接收返回值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oBtn = document.getElementById('btn1');
    
        oBtn.onclick=function(){
            // 1、创建Ajax对象    XMLHttpRequest在IE6下用不了
            // var oAjax = new XMLHttpRequest();
            // alert(oAjax);
    
            // IE6
            // var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            // alert(oAjax);
    
            var oAjax=null;
            if(window.ActiveXObject){
                oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            }
            else{
                oAjax = new XMLHttpRequest();
            }
    
    
            //2、链接服务器
            // open(方法,url,是否是异步)
            oAjax.open('GET', 'aaa.txt', true);
    
            //3、发送请求
            oAjax.send();
    
            // 4、接收返回
            oAjax.onreadystatechange=function(){
                // alert(oAjax.onreadyState);
                if(oAjax.readyState==4){
                    // alert(oAjax.status);
                    if(oAjax.status=200){
                        alert('成功'+oAjax.responseText);
                    }
                    else{
                        alert('失败');
                    }
                }
            };
    
            /*
            onreadystatechange事件
                readyState属性:请求状态
                    0:(未初始化)还没有调用open()方法
                    1:(载入)已调用send()方法,正在发送请求
                    2:(载入完成)send()方法完成,已收到全部响应内容
                    3:(解析)正在解析响应内容
                    4:(完成)响应内容解析完成,可以在客户端调用了
                status属性:请求结果
            */
        };
    };
    </script>
    </head>
    <body>
        <input type="button" value="读取文件" id="btn1" />
    </body>
    </html>
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    Leetcode 70 Climbing Stairs 递推
    Leetcode 83 Remove Duplicates from Sorted List 链表
    Leetcode 328 Odd Even Linked List 链表
    Leetcode 206 Reverse Linked List 链表
    Spring中注解
    SpringMVC配置文件
    java设计模式----单例模式
    java设计模式----工厂方法模式
    java设计模式----装饰者模式
    java设计模式----观察者模式
  • 原文地址:https://www.cnblogs.com/baixc/p/3474827.html
Copyright © 2011-2022 走看看