日期:2014-05-16  浏览次数:20615 次

ajax-总结

ajax相关技术:

? ? ? ? DOM(Document Obj Model),树形文档结构

? ? ? ? XML:通信载体//很规范

? ? ? ? JS:基于(大量内置)对象

Ajax的问题:

? ? ? ? 前进/后退,失效。浏览器会缓存上一个页面的信息

? ? ? ? ? ? ? ? Ajax通信的是数据段(xml,html)片段,不是完整的文档,不会被缓存

? ? ? ? 刷新失效

?

?

XMLHttpRequest对象,

? ? ? ? 已获得现代浏览器较好的支持,W3C 已经开始了标准化的工作

?

属性

? ? ? ? onreadystatechange

? ? ? ? ? ? ? ? 指定当readyState属性改变时的事件处理句柄,属性为只写

? ? ? ? readyState

? ? ? ? ? ? ? ? 返回当前请求的状态,属性为只读

? ? ? ? ? ? ? ? ? ? ? ? 0 ? ? ? ?未初始化 ? ? ? ?对象已经建立,但是未初始化,即尚未调用open方法创建http请求

? ? ? ? ? ? ? ? ? ? ? ? 1 ? ? ? ?初始化 ? ? ? ?对象已经建立,但是为调用send方法发送http请求

? ? ? ? ? ? ? ? ? ? ? ? 2 ? ? ? ?发送数据 ? ? ? ?send方法已经被调用,但是当前的状态以及http头未知

? ? ? ? ? ? ? ? ? ? ? ? 3 ? ? ? ?数据传送中 ? ? ? ?已经接收部分数据,因为响应及http头不全,这是通过response系列方法获取部分数据会出现错误

? ? ? ? ? ? ? ? ? ? ? ? 4 ? ? ? ?传送完成 ? ? ? ?数据接收完毕,此时可以通过response系列方法获取完整的回应数据

? ? ? ? responseBody

? ? ? ? ? ? ? ? 将回应信息正文以unsigned byte数组形式返回,属性为只读

? ? ? ? responseStream

? ? ? ? ? ? ? ? 以Ado Stream对象的形式返回响应信息,属性为只读

? ? ? ? responseText

? ? ? ? ? ? ? ? 以字符串的形式返回服务器响应信息,属性为只读

? ? ? ? responseXML

? ? ? ? ? ? ? ? 将响应信息格式化为XML Document对象返回,属性为只读

? ? ? ? status

? ? ? ? ? ? ? ? 返回当前HTTP请求的状态码,属性为只读。如:404 = "文件未找到" 、200 ="成功"

? ? ? ? statusText

? ? ? ? ? ? ? ? 返回当前HTTP请求的状态行,属性为只读

?

?

方法

? ? ? ? abort ? ? ? ? ? ? ? ?取消当前请

? ? ? ? ? ? ? ? 求关闭连接并且结束任何未决的网络活动。重置为 readyState 为 0。如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。

? ? ? ? getAllResourceHeaders ? ? ? ?获取相应的全部http头信息

? ? ? ? getResourceHeader ? ? ? ?从响应信息中获取指定的http头信息

? ? ? ? open(method, url, async, username, password)初始化 HTTP 请求参数,实现通常不会打开一个到 Web 服务器的网络连接。

? ? ? ? ? ? ? ? method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。

? ? ? ? ? ? ? ? url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

? ? ? ? ? ? ? ? async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞并不会返回,直到响应完全接收。

? ? ? ? ? ? ? ? ? ? ? ? 如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。

? ? ? ? ? ? ? ? username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。

? ? ? ? send ? ? ? ? ? ? ? ?发送请求到http服务器并接收回应

? ? ? ? setRequestHeader ? ? ? ? ? ? ? ?单独设定请求的某个http头

?

browser client -- javaScript call -- ajax engine --http request -- server --xml data -- html+css data --browser client

?

?

---------------------------ajax例子:-------------------------

主要checkUser()--initXMLHttpRequest()--call()--CheckUserServlet()--web.xml

?

? ? ? ? /**checkUser()必须写在jsp中--wnj

? ? ? ? function checkUser() {?

? ? ? ? ? ? ? ? var loginname=document.getElementById("loginname").value.trim();?

? ? ? ? ? ? ? ? var http_request=initXMLHttpRequest();?

? ? ? ? ? ? ? ? //设置回调函数?

? ? ? ? ? ? ? ? http_request.onreadystatechange=call;?

? ? ? ? ? ? ? ? //使用AJAX引擎的核心对象发送请求 //"&ts="+new Date()解决IE不刷新的bug

? ? ? ? ? ? ? ? var url="${pageContext.request.contextPath}/checkUser.ok?loginname="+encodeURI(loginname);

? ? ? ? ? ? ? ? http_request.open("GET",url+"&ts="+new Date(),true);?

? ? ? ? ? ? ? ? http_request.send(null);?

? ? ? ? }?

? ? ? ? */ ? ? ? ?

?

? ? ? ? function initXMLHttpRequest(){?

? ? ? ? ? ? ? ? if(window.XMLHttpRequest){ //firefox

? ? ? ? ? ? ? ? ? ? ? ? http_request=new XMLHttpRequest();?

? ? ? ? ? ? ? ? ? ? ? ? if(http_request.overrideMineType){?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? http_request.overrideMineType("text/xml");?

? ? ? ? ? ? ? ? ? ? ? ? }?

? ? ? ? ? ? ? ? }else if(window.ActiveXObject){ //ie系列

? ? ? ? ? ? ? ? ? ? ? ? try{?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? http_request=new ActiveXObject("Msxml2.XMLHTTP");?

? ? ? ? ? ? ? ? ? ? ? ? }catch