zoukankan      html  css  js  c++  java
  • ajax发送请求

    首先创建XMLHttpRequest对象,利用此对象发送请求

    主页面

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用Ajax</title>
    
    <script type="text/javascript">
    function vote(){
        //XmlHttpRequest对象,一个专门的HTTP请求工具
        /*
        实现Ajax要考虑的内容:
        1,用什么请求方式
        2,请求哪个资源(url)
        3,同步还是异步
        */
        var xhr=new XMLHttpRequest();
        // document.write(xhr);
    
    
        // alert(xhr);
        // console.log(xhr);//在IE10以下版本console未定义
    
        //单向请求
        xhr.open('GET','./01.php',true);//打开连接
        //请求方法,请求地址,同步还是异步
    
        xhr.send(null);//发送请求,不发送数据
    
        alert(xhr.responseText);
        alert("hello");
        
    }
    </script>
    </head>
    <body>
        <form action="" method="post">
            <p>用户名:<input type="text" name="username"/></p>
            <p>密码:<input type="password" name="pwd"/></p>
            <p><input type="submit" value="注册" onclick="vote()"/></p>
        </form>
    </body>
    </html>
    

     返回值为01.php中echo的内容

    同步与异步的理解
    
    等待send()执行完毕之后,再执行后面的语句为同步  false
    不等带send()的是否执行,直接执行后面的语句为异步 true
    

     

    xhr对象在请求和响应过程中,状态会不断变化,1-4逐步变化,到4时,表示成功
    可以绑定一个函数,来监听状态的改变,最终实现接收最后响应信息 
    

     添加以下代码,用异步传输

    //状态变化的回调函数
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert("请求成功了");
                alert(xhr.responseText);//弹出返回信息,responseText是属性不是方法
            }
        }
    
  • 相关阅读:
    Delphi语法
    orcad中注意的事情
    Express web框架
    Docker
    Node.JS
    再次 WebAssembly 技术探讨
    WebAssembly 浏览器中运行c/c++模块
    Http 服务 简单示例
    CentOS7 开放服务端口
    Go linux 实践4
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4860315.html
Copyright © 2011-2022 走看看