HTML5中的新特性之Ajax篇

本篇内容是本人在学习HTML权威指南中过程中以笔记形式记录的关于Ajax的要点。

等级

Ajax核心规范的名称继承语XHR对象,这个规范有两个等级:level1和lever2,其中所有的主流浏览器都实现了level1代表的基础级别的功能,level2扩展了最初的规范,本文重点要讲解的CORS就是其中一个。

基本的步骤

  • 创建一个新的XMLHttpRequest对象
  • 给readystatechange事件设置一个事件处理器
  • 使用open方法来指定http方法和需要请求的URL
  • 调用send方法
    其中的第三步:http.Request.open(‘GET’,url),这样写是最简单的形式,还可以在后面添加参数例如http.Request.open(‘GET’,url,TRUE,‘admin’,‘password’),其中加的第三个参数TRUE是表示请求是否应该是异步的,它应该始终都是TRUE,最后面的两个参数是应当发送给服务器的用户名和密码。
    最后一步是调用send()方法发送请求,如果我们是简单的get请求并不需要想服务器发送任何的数据,可以直接http.Request.send(),如果我们有数据要向服务器发送,send方法中就会需要带参数了。

level2中新扩展的事件

  • abort 请求被终止
  • error 请求失败
  • load 请求成功完成
  • loadend 请求完成,无论是成功还是失败
  • loadstart 请求开始
  • progress 触发以提示请求的进度
  • readstatechange 请求生命周期的不同阶段触发,是从level1中转过来的,也是目前项目中实际用到的
  • timeout 请求超时

获取和设置标头

XHR对象允许你可以设置发送给服务器的请求标头和读取服务器响应里的标头

  • setRequestHeader(header,value)设置请求头
  • getResponseHeader(header) 获取指定的一个响应头
  • getAllResponseHeaders() 获取所有的响应头

关于RESTful API

RESTful 的奥义在于: 通过http方法表达出你想让服务器做什么,而不是把他用某种方式编码进URL

例如: 你想查看某条用户的记录,就可以生成这样一个请求
httpRequest.open(‘GET’,’http://myserver/records/freeman/adm‘);
如果你想删除数据,就可以生成这样一个请求
httpRequest.open(‘DELETE’,’http://myserver/records/freeman/adm‘);

局限性

REST 好是好,但是问题在于主流的Web技术只支持get 和post 更有甚者,很多防火墙只允许get 和post 你说气不气!!所以我们聪明的程序员想出来的规避这个限制方法就是使用X-HTTP-Method-Override标头来指定想要使用的http方法,形式上就是再发送一个post请求
例如,仍然是上面那个例子我们就可以这样写
httpRequest = new XMLRequest();
httpRequest .onreadystatechange = handleResponse;
httpRequest .open(“GET”,url);
httpRequest.setRequestHeader(“X-HTTP-Method-Override”,”DELETE”);
httpRequest .send();
需要注意的是,插入的这行代码的位置!open之后,send之前,另外也需要你的服务器端的应用程序框架能够理解X-HTTP-Method-Override这个头,并且设置成允许寻找和理解那些用的少的http方法。

哎呀今晚太累,明晚接着写

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章