您的位置：首页 > Web前端 > JQuery

ajax的基本应用及原理，及在jquery里ajax的应用

2018-01-15 13:57 337 查看

//首先在标签中调用函数比如onblur
//在js中写如下两个函数
functionXhr(){
     var xhr=null;
     if(window.XMLHttpRequest){
//判断是不是ie浏览器，此判断是非ie浏览器
    xhr = new XMLHttpRequest();
     }else{
//是ie浏览器
     xhr= new ActiveXObject("Microsoft.XMLHTTP");
     }
     return xhr;
}
function getText(){
//获取ajax对象
var xhr = Xhr();
//创建请求
//其中post是使用post或者get方法在servlet中的
//action位置是写要传输的servlet文件，true表示异步，一般都写true
    xhr.open("post","Action",true);
//发送请求，发送的
    xhr.send(null);
xhr.onreadystatechange=function(){
//判断这里面还有一个问题，就是xmlhttp.readyState一直会变，
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪。
//xhr.status==200，表示请求成功
     if (xhr.readyState==4 &&xhr.status==200) {
   //成功后页面需要的操作下面的是弹框
//接收servlet返回的数据
var result = xhr.responseText;//接收数据
    alert(result);
        }
       }
    }
//在servlet中
response.setContentType("text/html;utf-8");
PrintWriter out = response.getWriter();
//返回的数据
out.println("ajaxtext success!!!");
out.close();
-------------------------jquery里面ajax应用---------------------------
<script type="text/javascript">//在js中应用ajax首先建立一个失去焦点的控件onblur指向下面的函数//在onblur中写入this表示当前的控件onblur=“getFirstFloorValue(this)”    function getFirstFloorValue(element){           $.ajax({              //指向的servlet    url:'ValuegetController',              //执行的方法              type:'post',              //传的参数相当于正常ajax源代码url后面？后面的数值              data:'action=GetFirstFloorValue',              //返回值的类型              dataType:'json',//如果成功了调用function(data)函数，返回值赋值给data              success:function(data){for(var i = 0;i< data.length; i++){// $(element)对本select进行操作append（）增加option           $(element).append("<option>"+data[i]+"</option>");                  }              }           });       }    </script>    </head>    <body>       <div id="">           <selectid="select2" onfocus="getFirstFloorValue(this)">              <optionvalue="1">点击取值</option>           </select>      </div>    </body>========servlet里面的post方法========== request.setCharacterEncoding("UTF-8");       response.setContentType("text/html;utf-8");       PrintWriterout = response.getWriter();       Stringaction = request.getParameter("action");       if(action.equals("GetFirstFloorValue")){           String[] str = getFirstfloor();           //将数据转换成json格式的字符串           JSONArray ja = JSONArray.fromObject(str);           System.out.println(ja.toString());           out.println(ja.toString());           //刷新流           out.flush();           out.close();           return;       }       out.flush();       out.close();    }    private String[] getFirstfloor(){       String[] str = new String[4];       str[0]="java";       str[1]="java";       str[2]="java";       str[3]="java";       return   str;   }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 原理

相关文章推荐

新的分享

章节导航