Ajax
Asynchronous JavaScript and XML
1:ajax是什么?
答:标准的XHTML+CSS
动态的DOM操作
用XML进行数据的传输和交换
用XMLHttpRequest对象异步交换数据
用javascript把上述概念绑定.
2: ajax的几种名称
Ajax
无刷新技术
局部刷新技术
异步刷新技术
无刷新技术:
调用ajax程序的页面,从地址栏上看,没有变化,没有刷新,因此,无刷新技术
局部刷新技术:
调用ajax程序的页面,可能通过响应内容,动态的改变部分DOM节点
异步刷新技术:
Js会阻塞后面的js代码执行和html代码的渲染.
而用异步传输数据,不会阻塞后面js代码执行和html代码的渲染.
同步:就像打电话,电话不挂,人也不干其他的,等到挂电话后才能干其他的.
异步: 就像发短信,发完短信后,可以干其他的事情,同时等着短信回来.
3:XMLHttpRequest的详细属性
responseText: 服务器响应的主体信息,body信息.
responseXML: 对于大量的格式化文档,可以用XML来传输或交换,由后台程序把数据封装在XML文档时, js接收XML对象并解析该内容.
status: 是服务器的返回状态码,例:200,成功, 403 forbidden 禁止, 404 not found未找到
50X系列,内部服务器错误
statusText: 服务器返回的状态码,对应的文字描述
readyState: XMLHttpRequest对象自身的状态码,0,4 [0,1,4], [2,3,4]
onreadystatechange : 事件属性,绑定当XMLHttpRequest对象的状态发生变化的时候,激发的函数
4:XMLHttpRequest的详细方法
open('请求方式',url, 同步/异步); false->同步, true->异步
send(null/参数), 参数的写法:k1=v1&k2=v2&kn=vn.....
setRequestHeader(key,value); 设置请求的头信息
Abort: 忽略,不要再进行下去了,到此为止
getResponseHeader: 获取响应的某个头信息
getAllResponseHeaders: 获取响应的所有头信息
XMLHttpquest对象在各浏览器中的兼容
先考虑标准情况,在高版本IE中,也可以用XMLHttpRequest对象来创建.
Ajax返回值
字符串:
短字符串:
应用场景: 一般返回较短,具有标志的字符串,如,0/1, succ/fail, 已注册,未注册等.
Json格式字符串:
应用场景: 返回数组或对象等格式化数据
javascript object notation, javascript原生对象格式
Html代码: 一整段html代码
应用场景: 当页面上有大块的数据变化时, 用数组要牵涉到大量的DOM操作,
这时,可以用PHP+Html,预先生成需要的html代码, 然后以字符串形式返回.
再innerHTML到页面中去.
Jsonp:
XML
应用场景:返回大量的格式化数据时
如果返回XML来使用
需要1: 服务器端的返回明确指定返回类型XML
2:在客户端用 responseXML
Json的意义:
Json 出现的场景:
在PHP中, 有数组 $arr = array(1,2,3);
在C语言中,也有数组, arr = [1,2,3];
在js里, 也有数组, arr = [1,2,3]
PHP有数组, java有数组, C语句也有数组, javascript里也有数组,
各语言数组的定义也不一样,
如何把不同语言之间的数组让其他语言能够认识?
如何解决: 把各语言的数组转成大家都支持的一种格式,各语言就可以通信了.
Json就是一种轻量级的,通用的数组/对象转换格式.
PHP中如何应用json格式
PHP中,可以对对象/数组 , 应用 json_encode把对象/数组编成 json格式的字符串
也可以用json_decode把json格式的字符串转成 对象/数组
在javascript里,如果把json格式的字符串转成数组或对象?
答: 把该字符串表达式执行一下.
把json格式的字符串,用()包起来,再eval执行一下.
Eval(); // eval
Ajax的跨域传值
出于安全性考虑, XMLHttpRequest只允许访问相同域下的地址.
解决:iframe
用同域代理来解决
Jsonp:
参考地址:http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=查询词&callback=回调函数名
不用XMLHttpRequest对象,如何达到ajax的效果,比如投票效果
史前时代的ajax
通过动态的创建DOM对象,且DOM引用后台的程序文件,来达到请求服务器的目的,
比如,动态创建img对象,并设置对象.src 属性值为 后台的.php文件.
这样,当创建图片时,后台的PHP文件就会被请求
Jsonp原理:
动态的追加其他域下的js文件,
其他文件文件下返回的js文件有其内容,
本利的回调函数,执行其内容.
Jsonp使用注意:
安全性, 远程给你一段js代码,安全性是未知的,要小心使用.
Ajax上传文件能实现吗?
XMLHttpRequest发送表单信息和硬盘上的文件内容. (比如一张图片的二进制信息)
表单信息,可以通过js操作DOM, 读取表单项的值,
硬盘的文件的内容, 也需要读取出来,一起发送到服务器.
Js能否读取硬盘文件呢? 不能. (html5里加了少量权限)
因为也无法ajax上传文件?