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

ajax发送请求

xhr对象在请求和响应过程中，状态会不断变化，1-4逐步变化，到4时，表示成功

可以绑定一个函数，来监听状态的改变，最终实现接收最后响应信息

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

//状态变化的回调函数

    xhr.onreadystatechange=function(){

        if(xhr.readyState==4){

            alert("请求成功了");

            alert(xhr.responseText);//弹出返回信息,responseText是属性不是方法

        }

    }

相关文章