转载地址:http://abstractforever.iteye.com/blog/524148
刚开始学习Ajax，当然是先把原理性的东西弄懂了，在去用什么js框架，那样才能得心应手：
以下是我收集的资料，写的注释比较多，适合快速理解和上手使用，因为大部分是js代码，就没有专门写成js文件。
originalityAjax.HTML代码如下：
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
- <htmlheadtitle>最原始的ajax写法</
- Metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"Metahttp-equiv="description"content="thisismypage"Metahttp-equiv="content-type"content="text/html;charset=UTF-8" <!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
- scripttype="text/javascript" //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- varxmlHttpRequest;
- //用户名校验的方法
- functionverify(){
- varsuccess=createXMLHTTPRequest();
- if(!success){
- return;
- }
- varuserName=document.getElementById("userName").value;//获取用户名字
- //2.注册回调函数
- //注册回调函数时，之需要函数名，不要加括号
- //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
- xmlHttpRequest.onreadystatechange=callback;
- //3。设置连接信息
- //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
- //第二个参数表示请求的URL地址，get方式请求的参数也在url中
- //第三个参数表示采用异步还是同步方式交互，true表示异步
- //记住在url后面加上时间戳
- //xmlHttpRequest.open("GET","OriginalityAjaxAction?username="+userName,true);
- //POST方式请求的代码
- xmlHttpRequest.open("POST","OriginalityAjaxAction",250); line-height:18px"> //POST方式需要自己设置http的请求头
- xmlHttpRequest.setRequestHeader("Content-Type",
- "application/x-www-form-urlencoded");
- //POST方式发送数据
- xmlHttpRequest.send("username="+userName);
- //4.发送数据，开始和服务器端进行交互
- //同步方式下，send这句话会在服务器段数据回来后才执行完
- //异步方式下，send这句话会立即完成执行
- //xmlHttpRequest.send(null);
- //回调函数
- functioncallback(){
- //alert(xmlHttpRequest.readyState);
- //5。接收响应数据
- //判断对象的状态是交互完成
- if(xmlHttpRequest.readyState==4){
- //判断http的交互是否成功
- if(xmlHttpRequest.status==200){
- //获取服务器器端返回的数据
- //获取服务器段输出的纯文本数据
- varresponseText=xmlHttpRequest.responseText;
- //将数据显示在页面上
- //通过dom的方式找到div标签所对应的元素节点
- vardivNode=document.getElementById("result");
- //设置元素节点中的html内容
- divNode.innerHTML=responseText;
- }else{
- alert("出错了！！！");
- //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
- functioncreateXMLHTTPRequest(){
- //1.创建XMLHttpRequest对象
- //这是XMLHttpReuquest对象无部使用中最复杂的一步
- //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
- if(window.XMLHttpRequest){
- //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
- xmlHttpRequest=newXMLHttpRequest();
- //针对某些特定版本的mozillar浏览器的BUG进行修正
- if(xmlHttpRequest.overrideMimeType){
- xmlHttpRequest.overrideMimeType("text/xml");
- }elseif(window.ActiveXObject){
- //针对IE6，IE5.5，IE5
- //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
- //排在前面的版本较新
- varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
- for(vari=0;iactivexName.length;i++){
- try{
- //取出一个控件名进行创建，如果创建成功就终止循环
- //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
- xmlHttpRequest=newActiveXObject(activexName[i]);
- break;
- }catch(e){
- //确认XMLHTtpRequest对象是否创建成功
- if(!xmlHttpRequest){
- alert("XMLHttpRequest对象创建失败!!");
- returnfalse;
- //0-本地响应成功
- //alert(xmlhttp.readyState);
- returntrue;
- scriptbody 请输入要验证的用户名字(输入admin试试)：br/>
- inputtype="text"id="username"/>inputtype="button"value="校验"onclick="verify()"divid="result">div>
和servlet交互的，OriginalityAjaxAction.java代码如下：
@H_738_502@ packageweb.action;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
//对原始的ajax页面请求的控制器
publicclassOriginalityAjaxActionextendsHttpServlet{
privatestaticfinallongserialVersionUID=1978049925174268801L;
voiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
this.doPost(request,response);
voiddoPost(HttpServletRequestrequest,250); line-height:18px"> request.setCharacterEncoding("UTF-8");
Stringusername=request.getParameter("username");
response.setCharacterEncoding("UTF-8");
PrintWriterout=response.getWriter();
//将数据返回给页面
if(username.equals("admin")){
out.print("用户：[admin]已经被使用了");
}else{
out.print("用户：["+username+"]可以使用");
}
web.xml的servlet配置如下：
