培训第十天，AJAX第一天：

fhdking

浏览: 6317 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2007-11 ( 6)
更多存档...

Ajax 浏览器应用服务器 JavaScript Servlet

北京传智播客
一、AJAX的技术核心
1. XMLHttpRequest对象
2. DOM与HTML
3. DOM与XML
4. 面向对象的Javascript
二、创建XMLHttpRequest对象
不同版本的浏览器创建XMLHttpRequest对象的方式不同，所以必须针对不同的浏览器创建不同的XMLHttpRequest对象 , 主要可分两类：
创建XMLHttpRequest对象之前应先使用if…else..语句判断是哪种浏览器
1 . IE7.0以下版本是以ActiveX组件方式创建XMLHttpRequest对象 , 创建方法如下 :
如: var xmlhttp;
xmlhttp=new ActiveXObject();
2 . 其它浏览器可直接创建Javascript的XMLHttpRequest对象
如: var xmlhttp;
xmlhttp=new XMLHttpRequest();
完整代码如下：

//针对不同的浏览器建立XMLHttpRequest对像
if(window.XMLHttpRequest){ 
//针对非IE7.0以下的多款浏览器
     xmlhttp=new XMLHttpRequest();
//此if语句主要针对部分版本的Mozillar浏览器的xml bug
if(xmlhttp.overrideMimetype){
      xmlHttp.overrideMimeType("text/xml");
        }
}
else if(window.ActiveXObject){
 //针对IE6.0及以下的IE浏览器
    	var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
                    'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
                    'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
       //for语句检测与MSXML列表对应的系统MSXML版本
for(var n = 0; n < MSXML.length; n ++){        	
try{//如果找到则创建该对象
             xmlhttp = new ActiveXObject(MSXML[n]);
             break;
            }catch(e){}
        }
    }

三、关于document.getElementById
document.getElementById的作用是根据id名获得对应的节点（某一个html标签的内容），我们这里分别用这个语句来获得div和文本框的节点；.value的作用是获得文本框的value属性值，也就是文本框中的内容

四一个完整的建立AJAX的步骤
1. 建立XMLHttpRequest对象
2. 设置回调函数
---注意: 回调函数后不能有括号 , 否则就变成得到回调函数的返回值
3. 使用open方法与服务器建立连接
其中open方法的三个参数必填
--- 注意: POST 和 GET方法在编写open和send方法时会有所不同。
使用POST方法时,须设置setRequestHeader(String header,String value)方法,且send()内的参数不为空
使用GET方法,将参数直接写在OPEN方法中…send(null)
4. 使用send 方法向服务器发送数据
5. 编写回调函数 ,针对不同响应状态进行处理
判断响应状态码readystate 及服务器返回状态码status
使用格式 : xmlhttp.readystate
响应状态码readystate及其含义:
0：表示未初始化
1：表示open方法成功调用以后
2:：表示服务器已经应答客户端的请求
3：表示交互中。Http头信息已经接收，响应数据尚未接收。
4：表示数据接收完成。
服务器返回状态码status:   使用格式 : xmlhttp.status
200表示“成功”，404表示“未找到” 其它具体代码含义见”张老师JAVAWEB开发内幕”P122页
五、重要的方法和属性
1 . 方法 : open(String method,String url,boolean asynch,String username,String password)
建立与服务器的连接，其中method表示HTTP调用方法。一般使用“GET”，“POST”。url表示调用的服务器的地址，asynch表示是否采用异步方式，如果为true则表示异步。username和password分别表示提供http认证机制需要的用户名和密码，这两个参数可以不指定。
2 . 方法 : send(content)
向服务器发出请求，如果采用异步方式，该方法会立即返回。Content可以不指定，其内容可以是DOM对象，输入流或是字符串。
3 . 方法 : setRequestHeader(String header,String value)
此方法需在open方法以后调用，且使用POST方式时必须设置。
4 . 属性 : onreadystatechange
请求状态改变的事件触发器（readyState变化时会调用此方法）。通常是一个javascript函数
如 : xmlhttp.onreadystatechange=callback;   callback即为一个用function定义的函数。
5 . 属性 : readyState    status 见第四条第五点
6 . 属性 : responseText 服务器返回的文本内容
responseXML 服务器返回的兼容DOM的XML内容
statusText     服务器返回状态码的文本信息
六、需要注意的内容
1 . 不同浏览器下XMLHttpRequest对象的不同的建立方式
2 . 设置回调函数时不要加括号
3 . OPEN方法三个参数的含义,此外还需要注意GET 和POST方式服务器端地址的不同写法
4 . GET方式和POST方式SEND的参数的不同之处,以及使用POST方式时，SEND之前需要设置请求头信息的工作
5 . 如何判断正确的响应数据已经返回 , 此外还要注意如何获取响应数据内容
七、AJAX应用的简单实例
该实例是AJAX的一个简单应用，用来判断用户名是否存在。
1、HTML页面
用AJAX做的HTML页面：把很多代码都写到了HTML客户端

<html>
<head>
  <title></title>
</head>
<body>
    校验用户名是否存在的例子<br/>
    用户名：<input type="text" id="name"/>
    <input type="button" value="检验" onclick="submit()"/><br/>
    <div id="result"></div>
    <script type="text/javascript">
        var xmlhttp;
        var resultNode;
        function submit(){
	   //把DIV标签对中的内容取出来
         resultNode = document.getElementById("result");
     /* 初始化XMLHttpRequset对象
 * 因为IE5,IE6和其他浏览器不一样，它的内部没有XMLHttpRequset对象，所以我
 * 们要判断浏览器的类型，然后用不同的方法去初始化。
	  */
	    if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
	  //有些浏览器中有BUG，这段就是防止BUG，不需要记住，知道就好
                if(xmlhttp.overrideMimetype){
                    xmlHttp.overrideMimeType("text/xml");
                }
	 //针对不同的浏览器判断，然后以数组的形式来初始化
            } else if (window.ActiveXObject) {
            var MSXML =
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
                for(var n = 0; n < MSXML.length; n ++){
                    try{
                        xmlhttp = new ActiveXObject(MSXML[n]);
                        break;
                    }catch(e){}
                }
            }
            if(xmlhttp == null){
                resultNode.innerHTML = "不能建立XMLHttpRequest对象";
            }
	      //取出name中的值，然后在浏览器端判断
            var name = document.getElementById("name").value;
            if(name == null || name == ""){
                resultNode.innerHTML = "用户名不能为空";
                return false;
            }
	//GET方式发出请求
            xmlhttp.onreadystatechange=callback;
            xmlhttp.open("GET"," ClassicServer ?name=" +
                                 encodeURI(encodeURI(name)),true);
            xmlhttp.send(null);
	  //POST方式发出请求，POST方式一定要加上setRequestHeader
	  xmlhttp.open("POST"," ClassicServer ",true);
	  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  xmlhttp.send("name=" + encodeURI(encodeURI(name)));
        }
	  //处理服务器返回的数据
        function callback(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200){
                    resultNode.innerHTML = xmlhttp.responseText;
                } else{
                    resultNode.innerHTML = "服务器故障";
                }
            }
        }
    </script>
</body>
</html>

2、servlet的代码

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class ClassicServer extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        try{
            response.setContentType("text/html;charset=GB2312");
            PrintWriter out = response.getWriter();
            String old = request.getParameter("name");
            if(old == null || old.length() == 0){
                out.println("用户名不能为空");
            } else{
                String name = new String(old.getBytes("ISO8859-1"));
                if(name.equals("wangxingkui")){
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名");
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");
                }
            }
            out.println("<br/><a href=\"index.html\">返回校验页面</a>");
        } catch(Exception e){
            e.printStackTrace();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        doGet(request,response);
    }
}

http://www.itcast.cn

分享到：