美文网首页
js学习笔记----ajax学习day02AJAX异步加载数据

js学习笔记----ajax学习day02AJAX异步加载数据

作者: Pamela_Liu | 来源:发表于2018-05-04 10:37 被阅读0次
    打印请求对象

    get发送网络请求的缓存机制

    • 原因: 每次get请求时, 若路径相同, 浏览器会返回之前缓存的数据, 而不是真正的发送请求

    • 解决方式 : 在请求路径中加上参数

    1. 随机数

    2. 时间戳 date.getTime();

    • 传递三个参数: url, 成功的回调, 失败的回调


      传递三个参数

    请求的参数处理

    • 若传参, 则多加个参数

    若传的是对象, key值是否加""都可

    var arrM = []; //数组的声明

    注意: url本身不支持中文, 部分浏览器默认可以转码, 所以要对中文转码处理

    
    url = encodeURI(url);
    
    

    get请求超时处理

    • 请求超时: 一般来说, 在项目中很多请求都有时间限制 10s 15s
    
    xhr.abort(); //取消网络请求
    
    

    注意点:

    • 因为异步执行, 所以定时器可以放在请求后面

    • 若未传参, 则要对timeOut设置一个默认值

    • alert要放在abort后, 否则会导致请求已经发送成功.


      alert放在abort后面

    只要timeOut时间后执行里面代码即可, 一次性的, 所以用setTimeOut

    ajax发送post请求

    • AJAX全称 Asynchronous JavaScript and XML


      post方法发送请求

    步骤:

    1. 设置post方式

    2. 所有参数要以查询字符串的方式传给send方法

    3. 设置请求头信息

    注意点: 设置Content-Type字段要在open和send方法之间.

    Content-Type字段在chrome的network的显示

    对post请求进行封装

    注意点:

    1. post请求没有缓存问题

    2. 不用中文转码了. 一般情况下后台开发人员在请求路径里不会写中文, 中文一般出现在参数里.

    php中用.拼接字符串或者变量

    • $_REQUEST对象只要是网络请求的参数都可以拿到. 可以替代$_GET 和$_POST对象

    JSON

    • json.org 是一种轻量级的数据交换格式.

    • Javascript object notation

    • 对象和json : 都是键值对的集合

    区别

    1. key值 json里的key值必须加双引号

    2. json里不能加函数


    JSON的格式
    • json表示数据简单, 可以和很多数据进行兼容处理 value可以是null, array... 但是不能为undefined

    • 对象用{}括住 数组用[]括住

    • 参考文顶顶的博客 http://wendingding.com/

    • 推荐书 : javascript语法精粹

    json在线格式化 在线解析

    php文件中导入json文件:

    
    file_get_contents(fileName:"");
    
    
    反序列化处理
    • json => js对象

    两种方式:

    1. 使用json API进行转换(系统自带)

    
    JSON.parse();
    
    
    解析服务器返回的JSON数据

    stringify 传参可以让json缩进

    • 缺点 只支持ES5+

    • 序列化处理则相反的过程.

    方法二: eval();

    • 把字符串转换为js代码, 并马上执行


      使用eval进行转换
    • 数据更小, 速度快流量小, 直观

    8:2 json:xml 使用频率

    XML格式

    • 数据过滤放在后端的好处
    1. 体积小, 速度快

    2. 后端性能好些, 速度快


      xml格式文件需要提前声明
    • 解析xml数据


      解析XML数据的方式
    • 不能用innerTEXT方法, 否则不读取

    • innerHTML和innerText在处理标记文档的方式上有细微不同 ...待补充

    使用mamp环境, 将项目放在htdocs文件夹下

    图片.png

    相关文章

      网友评论

          本文标题:js学习笔记----ajax学习day02AJAX异步加载数据

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