AJAX

作者: Simon_s | 来源:发表于2016-10-10 21:28 被阅读8次

    1、创建AJAX请求

        var xhr;
        // ajax请求对象
        
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        // 2、配置请求信息
        // open函数中的三个参数:
        // 1、设置请求方式:GET、POST
        // 2、设置请求的数据接口地址
        // 3、设置请求是否是异步请求(异步请求,当请求发送出去后,不再等待请求的
    数据,而是先执行其他任务,当数据到达本地后再处理(默认的请求方式))
        
        
    //      xhr.open('POST','index.html',true);
        // post请求参数问题:把post请求所需要的参数放在send()方法中。
    //      xhr.send('user=liwei&password=1234567');
    
        // post请求参数中如果有中文字符,则需要对中文符号进行编码操作
    //      xhr.send('user='+encodeURI('李威') + '&password=1234567');
    
        // get请求,如果有参数则把请求参数直接拼接在url之后
        xhr.open('GET', 'myXML.xml', true);
        
        
        // 3、发送请求
        xhr.send(null);
        
        // 4、监听数据传输情况
        
        // 通过xhr的onreadystate事件来获取并判断当前的服务器状态
        xhr.onreadystatechange = function () {
            // 每当xhr对象的readystate属性值改变,都会执行这个函数
            // 只有当readystate的值是4,且status的值是200时,服务器的数据才算发送到本地
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 数据请求成功
                // 如果数据是xml格式的,则返回来的数据保存在responseXML属性中,否则,保存在responseTEXT属性中
                
                // 当请求的数据是使用xml格式传递的,则responseText属性会把这些数据转换为一个字符串,但是responseXML属性会吧这些数据当成XML文档对象,在解析时比字符串更方便。
                
                // 当请求的数据是使用json格式传输的,则responseText属性会把这些数据转换为一个json字符串,而pesponseXML并不会收到这些数据
                var result = xhr.responseText;
                alert(xhr.responseText);
                // 把获取到的json字符串准换位json对象
                var resultObj = JSON.parse(result);
                                
            }
        }
    

    2、Json写法

    {
    "book":[{
        "name": "《西游记》",
        "author":"吴承恩",
        "price":"30"
    }
    ,{
        "name": "《红楼梦》",
        "author":"曹雪芹",
        "price":"40"
    }]
    }   
    

    3、XML写法

    <books>
    <book>
        <name>西游记</name>
        <author>罗贯中</author>
        <price>30</price>
    </book>
    
    <book>
        <name>红楼梦</name>
        <author>曹雪芹</author>
        <price>40</price>
    </book>
    

    </books>

    相关文章

      网友评论

          本文标题:AJAX

          本文链接:https://www.haomeiwen.com/subject/nyyvyttx.html