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

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:AJAX

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