AJAX

2016-10-10  本文已影响8人  Simon_s

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>

上一篇下一篇

猜你喜欢

热点阅读