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

打印请求对象

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