一、远古时代的ajax
1.利用http协议的204特性
设置header('HTTP/1.1 204 No Content'),当浏览器收到204时页面不做跳转
2.利用图片加载的特性来完成请求
设置src属性,浏览器将会请求src对应的资源
hh.setAttribute('src', './01-vote.php')
3.利用css,js加载的特完成请求,原理与加载图片完全一样
4.利用ifream特性
iframe为嵌套在页面内的另一个页面,form表单的action请求路径,method为请求方法,target的请求名和iframe的name保持一致,则相当于请求的targe为iframe页面,进而实现页面无刷新,且请求成功的需求。
总结:在不适用xmlHttpRequese对象的情况下,依然可以用jsz实现对后台服务器的请求,同时不带来页面的刷新或跳转。
所谓ajax,是指页面不刷新的情况下,利用XMLHttpRequest发送http请求,也就是js的网络化。
问题:ajax上传文件能实现吗?ajax上传插件是怎么实现的?
从http协议角度看,上传文件,则要把文件的内容发送到服务器,如果XMLHttpRequest对象在post数据时把文件的内容也发送过去。
js读取本地的文件内容-->XHR对象获取要上传的文件的内容
但浏览器出于安全考虑,js是不能读取到文件内容的,所以ajax上传文件是无法实现的
上传插件的实现方式:ifream,flash,html5(增加文件读取api)
二、现代的Ajax
核心:XMLHttpRequest对象,一个专门的http请求工具(需要考虑ie浏览器的兼容性)
分析:
1.如何创建该对象
按标准浏览器,new XMLHttpRequest()即可得到
考虑低版本ie,new ActiveXObject('Micorsoft.XMLHTTP')
2.如何利用xhr发送请求,获取后台服务器资源?
分析http协议,要请求需要明确这样几个因素:
(1)用什么方法请求:get,post,put,delete,head
(2)请求哪个资源:需要请求的url地址
(3)同步还是异步?true异步,false同步
创建xhr对象:var xhr = new XMLHttpRequest()
打开连接:xhr.open('GET', './01-vote.php', true)
发送请求:xhr.send(null)
获取到请求结果: alert(xhr.responseText)
3.请求的结果如何利用上?
如果为同步,则程序表现为2秒之后才alert,且获取到返回值,
如果为异步,则程序表现为立即弹出alert框,内容是空的,但两秒之后可以获取到返回值。
所以如果使用异步的话,下面的代码继续执行,等请求最终完成,怎么知道这个变化?
xhr对象在请求与响应过程中,状态会由0-4发生变化,可以绑定一个函数监听状态的变化,只要状态发生变化就触发某函数
xhr.onreadystatechange = function(){
console.log(this.readyState, '读取请求过程中的状态0-4,4意味着请求完成')
如果readyState的状态为4且返回值responseText为1,则可以使用请求后的结果,这也是使用异步的好处,
}