Ajax开发
1. netbeans 中文版改成英文版在NetBeans的配置文件 "etc/netbeans.conf" 的netbeans_default_options="..." 配置项中加一个值： -J-Duser.language=en
2. 建立XMLHttpRequest对象
* IE7,IE8,FireFox,Mozilla,Safari,Opera中直接new XMLHttpRequest()创建
* IE6,IE5.5,IE5则需要通过某一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式创建
3. XMLHttpRequest方法
* open(String method, String url,boolean asynch, String username, String password)
- 指定和服务器端交互的HTTP方法，URL地址及其它请求信息
- method 表示HTTP所有请求方法，取值GET，POST、
- url 请求服务器的地址
- asynch 取值为true表示异步请求，false表示同步请求
- username password 表示http认证机制需要的用户名和密码
* send(content)
- 向服务器发出请求，如果采用异步方式，该方法会立即返回
- Content可以为null，DOM，输入流或字符串
* setRequestHeader(String header, String value)
- 设置HTTP请求中的指定头部header的值
- 此方法在open方法后调用
* getAllResponseHeaders()
- 返回包含HTTP的所有响应头信息
- 返回的头信息是字符串的形式，其中键名和键值用冒号分开，每组键之间用回车换行分隔
* getResponseHeader(String header)
- 返回HTTP响应头中指定的键名所对应的值
* abort()
- 停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化状态
4. XMLHttpRequest的属性
* readyState
- 0 表示未初始化，对象已创建，未调用open
- 1 表示open方法成功调用，Send方法尚未调用
- 2 表示send方法已经调用，尚未开始接受数据
- 3 正在接受数据，Http响应头信息已经接收，响应数据尚未接收完成
- 4 完成。响应数据接收完成
* onreadystatechange
- 请求状态改变的时间触发器(readyState变化时，会调用这个属性上注册的javascript函数)
* responseTest 服务器响应的文本内容
* responseXML 服务器响应的XML内容对应的DOM对象
* status 服务器返回的http状态码
* statusText 服务器返回状态码的文本信息
5. 判断服务器端返回的XML数据是否正确
当服务器端没有正确返回XML数据时，在JavaScript中使用responseXML的方式获取返回的XML数据对应的DOM对象时，FireFox和IE的结果是有差别的，IE获取根元素节点为null，FireFox获取根元素节点则是表示解析错误的元素节点
var rootElement = xmlhttp.responseXML.documentElement;if(rootElement == null || rootElement.nodeName != ""){}else{//数据正确返回，可以进行相关处理}AJAX请求完整的示例代码
<script type="text/javascript"> var xmlhttp; //1.创建XMLHttpRequest对象， function submit(){ if(window.XMLHttpRequest){ //适应IE7，IE8，FireFox，Mozillar，Safari，Opera xmlhttp= new XMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //IE6,IE5.5,IE5 var activexName=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP','Microsoft.XMLHTTP']; for(var i=0;i<activexName.length;i++){ try{ xmlhttp=new ActiveXObject(activexName); break; }catch(e){ } } } if(xmlhttp== undefined || xmlhttp == null){ alert("当前浏览器不支持XMLRequest对象"); return; } //2.设置回调方法 xmlhttp.onreadystatechange= callback; //3.设置和服务器端交互的参数 var name = document.getElementById("name").value; //Get方式交互 //xmlhttp.open("GET","ajaxrequest?name="+name,true);//true表示采用异步交互 //4. 设置向服务器发送数据，启动和服务器的交互 //xmlhttp.send(null);//设置GET方法，不必在再send中传递参数 //Post方式提交 xmlhttp.open("POST","ajaxrequest",true); //指定http请求中header的值，在open方法后调用 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("name="+name+"&password=123");//send参数的内容可以是dom对象，输入流或字符串 } function callback(){ //5. 判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据 if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var messageNode = document.getElementById("message"); //纯文本数据接收方法 var message = xmlhttp.responseText; //xml数据接收方式，使用前提：服务器需要设置content-type为text/xml //var domXml=xmlhttp.responseXML; messageNode.innerHTML=message; /* 判断返回的XML数据是否正确 var rootElement = xmlhttp.responseXML.documentElement; if(rootElement == null || rootElement.nodeName != ""){ }else{//数据正确返回，可以进行相关处理} */ } } } </script>
6. 解决XMLHttpRequest请求的缓存问题
* 主要是浏览器对请求有缓存，同样的请求IE浏览器会访问缓存
* 解决办法：请求参数增加时间戳，使每次请求的url都不同。关键代码如下
if(url.indexOf("?") >=0){ url=url + "&t="+(new Date()).valueOf();}else{ url = url + "?t=" + (new Date()).valueOf();}
* IE中调试工具HttpWatch Basic
* 验证码例子------*
7. 解决Ajax应用中的中文乱码问题 (参考)
* 请求数据中包含中文，服务器端程序接收错误导致出现乱码
- 在页面端将包含中文信息的请求数据利用javascript中的encodeURI进行两次编码处理，在服务器端将获取到的数据使用URLDecode类的decode方法(一次)按照utf-8的方式进行解码
在服务器端只进行一次解码的原因是：应用服务器如Tomcat会自动进行一次解码，在Servlet中getParameter得到的数据已经是经过服务器解码一次的数据。
- 解决方法原理：2.40分
即，页面端对于参数name: name = encodeURI(encodeURI(name));服务器端: name=URLDecoder.decode(request.getParameter("name"),"utf-8")
http://dl.iteye.com/upload/attachment/524641/337bc63e-6d86-3bc1-8a9b-05385ce20ce6.jpg
* 响应数据包中包含中文，编码设置错误导致浏览器中看到的结果数据是乱码
- 保证页面端定义的charset和http响应头的Content-Type中定义的charset一致即可
- IE6 中XMLHttpRequest对象在页面端定义的charset和http响应头的Content-Type中定义的charset都是GB2312时，中文响应数据出现乱码。其它浏览器没有这种现象。解决办法：
*- 将http响应头的Content-Type中定义的charset设置成utf-8。这不会影响IE7和IE8
*- 仅仅使用MSXML2.XMLHTTP和Microsoft.XMLHTTP这两个中的一个来创建XMLHttpRequest对象，即
var activexName=['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];for(var i=0;i<activexName.length;i++){ try{ xmlhttp=new ActiveXObject(activexName); break; }catch(e){}}
页:
[1]