ajax第二篇

来源：互联网发布：Linux check_match 编辑：程序博客网时间：2024/06/01 08:00

ajax对象XMLHttpRequest详细解析

文章简述：    这篇文章主要借助一个简单的程序对ajax对象进行详细的分析。    主要知识点有如下部分：    1.如何创建一个ajax对象(解决兼容性问题)；    2.open方法的各个参数的主要作用，包括get，post的区别，异步与同步的区别；    3.ajax的onreadystatechange方法的详细的解析。

第一部分从一个简单的程序说起

    该程序的主要功能是从服务器中获取一些数据展示在页面上。

源码

ajax2.html

<!DOCTYPE html>        <html>            <head>                <meta charset="UTF-8">                <title>ajax第二篇</title>                <script>                    window.onload=function(){                        var obtn=document.getElementById('btn');                        obtn.onclick=function(){                            var xhr=null;                            //创建ajax的对象                            if(window.XMLHttpRequest){                                xhr=new XMLHttpRequest();                            }else{                                xhr=new ActiveXObject('Microsoft.XMLHTTP');                            }                            //调用ajax的open方法                            xhr.open('get','1.php?username='+encodeURI("张三")+'&age='+encodeURI("30"),true);                            //提交                            xhr.send();                            //等待服务器返回数据                            xhr.onreadystatechange=function(){                                //readyState是指ajax的工作状态                                if(xhr.readyState==4){                                    //status指的是服务器的状态                                    if(xhr.status==200){                                        //JSON.parse是将json数据进行解析成相应的数据                                        var data = JSON.parse(xhr.responseText);                                        var username = data[0];                                        var age= data[1];                                        alert("用户名是："+ username +",年龄是:"+age);                                    }else{                                        alert('出错了，错误是:'+xhr.status);                                    }                                }                            }                        }                    }                </script>            </head>            <body>                <input type="button" id="btn" value="按钮"/>            </body>        </html>

1.php

<?php            header('content-type:text/html;charset="utf-8"');            $username = $_GET['username'];            $age = $_GET['age'];            $arr1 = array($username,$age);            //对变量进行 JSON 编码            echo json_encode($arr1);

程序截图

第二部分分析XMLHttpRequest对象。

    ajax的执行流程:          1.创建一个XMLHttpRequest对象。        2.调用open的方法，设置数据请求的方式，数据请求的地址，是否是异步。        3.调用send的方法，提交参数。        4.等待获取服务器的数据。

1.创建一个XMLHttpRequest对象

var xhr=null;    //创建ajax的对象    if(window.XMLHttpRequest){        xhr=new XMLHttpRequest();    }else{        xhr=new ActiveXObject('Microsoft.XMLHTTP');    }

代码解析：上诉代码主要是处理浏览器的兼容性问题，首先判断在浏览器中是否存在XMLHttpRequest对象（一般都有，除了ie7以下版本）。如果存在就直接创建；如果没有就使用ActiveXObject插件中创建(Microsoft.XMLHTTP),创建一个ajax的对象。

2.调用open的方法，设置数据请求的方式，数据请求的地址，是否是异步。

open()方法有三个参数，分别如下：    1.数据的请求方式：如get，post。    2.数据请求的地址：如1.php。    3.是否是异步：true--->异步；false--->同步。1.get，post的区别    在传输方式上：GET方式通过url地址传输；POST通过浏览器的头部信息中传输。    传输数据量：GET有数据量的限制；POST在理论上是无限的。2.异步与同步的区别    异步：当ajax发送请求后，在等待服务器返回的这个过程中，前台会继续执行ajax块后面的脚本。    同步：当ajax发送请求后，在等待服务器返回的这个过程中，前台不会继续执行ajax块后面的脚本。

3.调用send方法，向服务器提交参数。

    注：如果数据请求方式是以post方式提交，那么提交的参数就写在send方法的参数中；        如：send("username=张三&password=111");

4.onreadystatechange事件

    该事件主要用于对请求状态进行监控的。每当ajax的工作状态发生改变时，该事件就会被触发。    readystate：ajax的工作状态。        0：未初始化，还没有执行open方法。        1：载入，已经调用了send方法，正在发送请求。        2：载入完成，send方法已经执行完了，收到从服务器端返回的全部数据。        3：解析，正在解析从服务器返回的数据。        4：解析完成，响应的内容已经准备好了，可以在浏览器中展示。    responseText:ajax请求数据返回内容的存放容器。(主要是以文本的形式)。    status:服务器的响应状态码。（由三位阿拉伯数字组成）        1xx：关于消息的状态码。        2xx:关于成功的状态码。        3xx:关于重定向的状态码。        4xx:关于浏览器错误(请求出错)的状态码。        5xx：关于服务器出错的状态码。

阅读全文

0 0

ajax第二篇

ajax对象XMLHttpRequest详细解析

第一部分 从一个简单的程序说起

源码

ajax2.html

1.php

第二部分 分析XMLHttpRequest对象。

1.创建一个XMLHttpRequest对象

2.调用open的方法，设置数据请求的方式，数据请求的地址，是否是异步。

3.调用send方法，向服务器提交参数。

4.onreadystatechange事件

第一部分从一个简单的程序说起

第二部分分析XMLHttpRequest对象。