AJAX相关

发布时间：2020-12-15 22:05:58 所属栏目：百科来源：网络整理

导读：大学时的笔记，整理一下备忘 1 ajax的缺点 A:ajax通信常常是一个数据片段,例如,xml.html片段,或者纯文本,这些信息不是完整的html文档,而且通过后台来异步获取,不能被搜索引擎发现并缓存. B:ajax将大量的运算从服务器端转移到了客户端,意味着浏览器将承受更大

大学时的笔记，整理一下备忘

1 ajax的缺点

A:ajax通信常常是一个数据片段,例如,xml.html片段,或者纯文本,这些信息不是完整的html文档,而且通过后台来异步获取,不能被搜索引擎发现并缓存.

B:ajax将大量的运算从服务器端转移到了客户端,意味着浏览器将承受更大的负担,不再是简单的文档显示。ajax中的核心语言是javascript,作为一门解释型的脚本语言,其运行效率不是很高.而且依赖不同的浏览器实现

参考文档： http://hi.baidu.com/renxian/item/ec39f881bd65875d840fabe2

http://www.cn-java.com/www1/?action-viewnews-itemid-10528

2全面剖析XMLHttpRequest对象

AXMLHttpRequest对象的属性和事件

readyState属性

　　当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。

　　表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值	描述
0	描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1	描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3	描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4	描述一种"已加载"状态；此时，响应已经被完全接收。

　　onreadystatechange事件

　　无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

　　responseText属性

　　这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

　　responseXML属性

　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

　　status属性

　　这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

　　statusText属性

　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

BXMLHttpRequest对象的方法

abort()方法

你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

open()方法

　　你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

　　send()方法

　　在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

　　send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

　　setRequestHeader()方法

　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

　　getAllResponseHeaders()方法

　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

C 发送请求

＜script type="text/javascript"＞
function sendRequest(){
　var xmlHttpReq=init();
　function init(){
　　if (window.XMLHttpRequest) {
　　　return new XMLHttpRequest();
　　} 
　else if (window.ActiveXObject) {
　　return new ActiveXObject("Microsoft.XMLHTTP");
　}
}
＜/script＞

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true);

xmlHttpReq.onreadystatechange=processRequest;

D处理请求

function processRequest(){
　if(xmlHttpReq.readyState==4){
　　if(xmlHttpReq.status==200){
　　　processResponse();
　　}
　}
}

var msg=xmlHttpReq.responseXML;

参考文档：http://dev.yesky.com/91/2687091.shtml

3http请求状态及其含义

值	描述	值	描述
100	客户必须继续发出请求	404	没有发现文件、查询或URl
101	客户要求服务器根据请求转换HTTP协议版本	405	用户在Request-Line字段定义的方法不允许
200	交易成功	406	根据用户发送的Accept拖，请求资源不可访问
201	提示知道新文件的URL	407	类似401，用户必须首先在代理服务器上得到授权
202	接受和处理、但处理未完成	408	客户端没有在用户指定的饿时间内完成请求
203	返回信息不确定或不完整	409	对当前资源状态，请求不能完成
204	请求收到，但返回信息为空	410	服务器上不再有此资源且无进一步的参考地址
205	服务器完成了请求，用户代理必须复位当前已经浏览过的文件	411	服务器拒绝用户定义的Content-Length属性请求
206	服务器已经完成了部分用户的GET请求	412	一个或多个请求头字段在当前请求中错误
300	请求的资源可在多处得到	413	请求的资源大于服务器允许的大小
301	删除请求数据	414	请求的资源URL长于服务器允许的长度
302	在其他地址发现了请求数据	415	请求资源不支持请求项目格式
303	建议客户访问其他URL或访问方式	416	请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
304	客户端已经执行了GET，但文件未变化	417	服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
305	请求的资源必须从服务器指定的地址得到	500	服务器产生内部错误
307	申明请求的资源临时性删除	501	服务器不支持请求的函数
400	错误请求，如语法错误	502	服务器暂时不可用，有时是为了防止发生系统过载
401	请求授权失败	503	服务器过载或暂停维修
402	保留有效ChargeTo头响应	504	关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
403	请求不允许	505	服务器不支持或拒绝支请求头中指定的HTTP版本

4AJAX核心对象-- XMLHttpRequest 对象使用详解

获取xmlhttpRequest对象

＜script language="javascript" type="text/javascript"＞

var request;

function createRequest() {
　try {
　　request = new XMLHttpRequest();
　} catch (trymicrosoft) {
　　try {
　　　request = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (othermicrosoft) {
　　　try {
　　　　request = new ActiveXObject("Microsoft.XMLHTTP");
　　　} catch (failed) {
　　　　request = false;
　　　}
　　}
　}

　if (!request)
　　alert("Error initializing XMLHttpRequest!");
}

function getCustomerInfo() {
　createRequest();
　// Do something with the request variable
}
＜/script＞

创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。

　　·增加 try/catch 块：

　　　1、尝试创建 XMLHttpRequest 对象。

　　　2、如果失败（catch (trymicrosoft)）：

　　　　1) 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP）。

　　　　2) 如果失败（catch (othermicrosoft)）尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象（Microsoft.XMLHTTP）。

　　　　3) 如果失败（catch (failed)）则保证 request 的值仍然为 false。

　　·检查 request 是否仍然为 false（如果一切顺利就不会是 false）。

　　·如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。

open方法

function getCustomerInfo() {
　var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　request.open("GET",url,true);
}

回调方法

function updatePage() {
　if (request.readyState == 4)
　　if (request.status == 200)
　　　alert("Server is done!");
　　else if (request.status == 404)
　　　alert("Request URL does not exist");
　　else
　　　alert("Error: status code is " + request.status);
}

参考文档：

http://www.cnblogs.com/meil/archive/2006/09/21/510794.html

http://www.cnblogs.com/meil/archive/2006/09/21/510799.html

5 AJAX的中文问题

A发送路径中的参数有中文，在服务器段接收参数值是乱码'

var url="a.jsp?name=小李"；
xmlHTTP.open ("post",true);

解决方法：

客户端：

var url="a.jsp?name=小李"；
   url=encodeURI(url); 
   url=encodeURI(url); //两次，很关键
   //var url="a.jsp?name=escape("小李")"；
   xmlHTTP.setrequestheader("cache-control","no-cache");  
   xmlHTTP.setrequestheader("Content-Type","application/x-www-form-urlencoded"); 
   xmlHTTP.setrequestheader("contentType","text/html;charset=uft-8")//指定发送数据的编码格式
   xmlHTTP.open ("post",true);

服务器端：

String name = request.getParameter("name"); 
name = java.net.URLDecoder.decode(name,"UTF-8");

B 返回来的responseText或responseXML的值中含有中文是乱码

原因：AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的，如果服务器段发送的数据不是UTF-8的格式，那么接收responseText或responseXML的值有可能为乱码。
解决办法：在服务器指定发送数据的格式：
在jsp文件中：

response.setContentType("text/text;charset=UTF-8");//返回的是txt文本文件

或是

response.setContentType("text/xml;charset=UTF-8");//返回的xml文件

总结:1)ajax提交数据的格式默认为utf-8,利用javascript的提供的escape()或encodeURI()方法.在服务器端接收的时候要使用java.net.URLDecoder.decode("","UTF-8")方法进行解码.

2)xtmlhttp 返回的数据默认的字符编码是utf-8,所以服务器要向客户端发送数据的时候,也要采用utf-8编码
如果上述方法仍然解决不了乱码问题,那你尝试一下把jsp,htm,java文件用UTF-8编码格式保存.
总之:前后台数据交互都采用utf-8编码就行了.

参考文档：http://www.blogjava.net/hulizhong/archive/2007/04/21/112416.html

6重构的xmlhttpRequest调用的使用方法

var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;


/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type',contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}


net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  var httpStatus=req.status;
  if (ready==net.READY_STATE_COMPLETE){
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"/n/nreadyState:"+this.req.readyState
    +"/nstatus: "+this.req.status
    +"/nheaders: "+this.req.getAllResponseHeaders());
}

本质上就是以OO的方式构造了一个net对象，通过它来实现AJAX调用，构造函数必需的就两个参数：URL和回调函数（也就是你要处理服务器返回文档的函数），其他就是参数，方法，返回类型等。

使用方法如下：

<script type='text/javascript' src='ContentLoader.js'></script>
<script type='text/javascript'> 
window.onload=function(){
var loader1=new net.ContentLoader("data.txt",displayResult);
}
function displayResult(){
   var tmp=document.getElementById("hello");
   var txt=this.req.responseText;
   alert(txt);
   var childEl=document.createElement("div");
   var textNode=document.createTextNode(txt);
   childEl.appendChild(textNode);
   tmp.appendChild(childEl);
}

</script>
<div id="hello"></div>

此例中的回调函数就是displayResult()方法，url为同个文件夹下面的data.txt，很简单的例子，显示data.txt中的内容。

总结一下，本博客主要介绍了ajax的优缺点，以及xmlHttprequest的一些属性和方法，另外介绍了ajax中中文乱码的解决方案。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!