ajax（分析ajax的使用）

1、远古时代的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)

2、现代的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，则可使用请求后的结果，这也是使用异步的好处

3、深度探讨ajax

1.XMLHttpRequest的详细属性

responseText 服务器响应的主体信息

responseXML 对于大量的格式化文档，能够用XML来传输或交换，由后台程序把数据封装在xml文档，js接收xml对象并解析该内容

status 服务器的返回状态码，200成功,403禁止，400请求语法错误，404未找到，5xx内部服务器错误

statusText 服务器返回状态码对应的文字描述

readyState xhr对象自身的状态码（0,1,2,3,4）

onreadystatechange 事件属性，当xhr对象的状态码发生变化时触发，xhr发送请求后在此方法里经过status 和readyState 来肯定请求成功而且获取到数据后去作一些操做

2.XMLHttpRequest的详细方法

open('请求方式'，url,同步/异步)，使用post请求时请求头必须加上Content-type和Content-length

send()，没参数时传null，有参数时传‘usernam=11&email=11’这种形式的

setRequestHeader(key,value) 设置请求头信息

getResponseHeader 获取响应的某个头信息

getAllResponseHeaders 获取响应的全部头信息

3.返回值类型

　xml类型

   普通文本：

　　返回简短的标志字符串，如：0,1，ok

　　后台返回大段的html代码，直接innerHTML到前端页面

　　返回json格式，再由前端去解析

　　返回jsonp(跨域时使用)

　　　　浏览器默认是不能跨域的，使用jsonp能够实现跨域请求，jsonp目前没有统一的规范，通常都是先后端约定以什么样的方式请求，以什么样的方式返回数据

　　　　请求的url地址通常是 ：‘http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=11&callback=aa’

　　　　aa为回调函数

　　　　function aa(res){

　　　　　　console.log(res, '请求成功后，res为获取到的数据')

　　　　}

4.异步原理

　　状态值：

　　　　0 XHR对象刚建立时

　　　　1 open成功后为1，此时已创建链接成功

　　　　2 接收头信息完毕

　　　　3 接收body信息完毕后

　　　　4 成功结束后

　　同步：代码从上往下依次执行，必须等前一个执行完后才能继续往下执行

　　异步： 代码从上往下执行，当前执行代码不影响后面的代码执行，当当前代码须要回调时可当即插队到进程最前列执行