原生AJAX

原生AJAX需要注意的地方。

Posted by 南三号 on July 28, 2018

AJAX

大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

  1. 使用CSS和XHTML来表示。
  2. 使用DOM模型来交互和动态显示。
  3. 使用XMLHttpRequest来和服务器进行异步通信。
  4. 使用javascript来绑定和调用。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest对象的使用

//创建一个XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();

//设置异步通信的回调函数
xmlhttp.onreadystatechange=function(){
	//请求完成后要进行的操作
}

//规定请求的类型,URL,是否异步
xmlhttp.open("GET","ajax_info.txt",true);

//发送请求,string仅用于post请求。
xmlhttp.send(string);

XMLHttpRequest对象的方法

  • abort( ) 如果请求已经被发送,则立刻中止请求
  • getAllResponseHeaders( ) 返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回null
  • open( ) 初始化一个请求
  • overrideMimeType( ) 重写由服务器返回的MIME type
  • send( ) 发送请求
  • setRequestHeader( ) 给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open( ) 方法打开了一个url.

XMLHttpRequest对象的属性

  • onreadystatechange 每次状态改变所触发事件的事件处理程序。
  • responseText 从服务器进程返回数据的字符串形式。
  • responseXML 从服务器进程返回的DOM兼容的文档数据对象。
  • status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
  • status Text 伴随状态码的字符串信息
  • readyState 对象状态值
    • 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
    • 1 (初始化) 对象已建立,尚未调用send方法
    • 2 (发送数据) send方法已调用,但是当前的状态及http头未知
    • 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
    • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

AJAX的缺陷

  • 浏览器后退机制的破坏,即使用ajax技术修改的局部页面不能够后退。