AJAX

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            background-image:linear-gradient
        
        </style>
        <script type="text/javascript">

1、创建出ajax这个对象

              var xhr;

ajax请求对象

            if(window.XMLHttpRequest) {
                //有表示当前标准的浏览器
                xhr = new XMLHttpRequest();
            } else {
无,是ie 5、6、7这几个浏览器,使用ActiveXObject()创建
在IE5\6\7这几个老板浏览器中ajax组件是放在ActiveXObject()组件库中,需要
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
                             xhr.window.XMLHttpRequest

2、配置请求信息

open函数中三个参数

1、设置请求方式 GET POST
2、设置请求的数据的接口地址
3、设置请求是否异步请求(异步请求)当请求发出后,不再等待请求的数据,而是先执行其他任务,当数据到达本地后再处理(默认的请求方式)

        //xhr.open('open','index.html',true)

post请求参数问题,把post请求所需要的参数放在send()方法中

                           xhr = ("post","demo.text",true/false)
            //xhr.send('user=liwei&password=1234567');
            //内容放在这里

post请求中如果有中文字符,则需要对中文字符进行编码操作

            xhr.send('user=' + encodeURI('李威') + '&password=1234567');
            console.log(encodeURI("李威")); * /

get请求,如果有参数则把请求参数直接拼接在url之后

在get请求中如果每次请求的是同一个接口,则浏览器会从缓存中取数据,而不是向服务器请求数据,如果服务器该接口中的数据内容发生改变,则永远拿不到最新的数据,所以我们可以在请求的接口后拼接一个随机数参数,这样浏览器每次拿到接口在缓存中都找不到这个接口对应的数据,旧会从服务器拿数据了,(而服务器端并没有开设接手随机数参数的字段,所有get发送过来的随机数会被服务器丢弃,只返回能处理的接口数据)

            xhr.open('GET', 'myJSON.json', true);
        //3、发送请求
            xhr.send(null);

4、监听数据传输情况

通过xhr的onreadystate事件来获取并判断当前服务器状态

            xhr.onreadystatechange = function() {

每当xhr的对象的readystate属性值改变时,都会执行这个函数
我们是通过xhr的onreadystate事件来获取并判断当前的服务器状态
只有当readystate的值为4,且status的值为200时,服务器的数据才算发送到本地 响应才算成功

                if(xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
获取到的json字符串换位json对象
                    var resultObj = JSON.parse(reslt);
                    alert(xhr.responseText);
alert(xhr.responseXML);

当请求的数据是使用XML格式传递的,则responseTEXT属性会把这些数据转换为一个字符串,但是responseXML属性会把这些数据当成XML的文档对象,在解析时方便

当请求的数据是Json格式传输时,则responseTEXT属性会把这些数据转换为一个json字符串,而responseXML属性并不会接收到这些数据

                    //xhr.responseText 保存 不是XML格式 之外的格式
                    //xhr.responseXML 保存 XML的 格式
            }
        }
    </script>
</head>

<body>

</body>

</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容