最全最详尽的Ajax2
一.数据类型(返回数据的处理)
xhr.responseText的返回是都是字符串,但有时候我们却需要数组类型,或者着json类型,实际后台可以传递一种伪数组,伪json的形式。但还是字符串如下例
1.['leo','Bob','Gati']
2.["name":"leo"] 如果我们typeof会发现他们实际是字符串,所以我们需要将其转变为我们需要的json和数组。
高版本浏览器js为我们提供了一个对象JSON 但在ie7下没有这个对象需要我们手动下载引入 JSON.js 可以用条件注释
方法一 JSON.parse() 将格式写好的字符串转换成为JSON或者数组
var str = '{"name":"huangxiaojian","age":"23"}'
结果:
JSON.parse(str)
- age: "23"
- name: "huangxiaojian"
- __proto__: Object
当自己使用时候json的key值一定设为双引号否则报错
方法二 JSON.stringify() 将格式写好的字符串转换成为JSON或者数组
var a = {a:1,b:2}
结果:
JSON.stringify(a)
"{"a":1,"b":2}"
其实该对象还可以用于很多地方比如数组的深度遍历,想了解可以私信
像后端传输数据
get方式
url后面添加数据用&进行连接
xhr.open('get','2.get.php?username=刘伟+'&age=30,true);
get两个问题
1.当我们修改后台数据,返回的值并没有改变。
原因:浏览器存在缓存解决方法连接一个动态字符串,产生不同地址,不同地址url不同,不会调用缓存。链接一个随机数或者时间
xhr.open('get','2.get.php?username=刘伟&age=30&' + new Date().getTime(),true);
2.你会发现中文乱码
解决:编码呗
xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
post方式
xhr.open('post','2.post.php',true);
//post方式,数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
post没有缓存问题 原因:post本就是用于向后台发消息
无需编码
xhr.send('username=刘伟&age=30');