ajax的使用方法

ajax是为了提交用户体验，不刷新整个网页的情况下，实现跟服务器端的交互

使用原生ajax的步骤如下：

1、先注册ajax引擎（百度一般可以找到）

var xmlhttp=null;
if (window.XMLHttpRequest){// code for all new browsers
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2、设置回调函数，另一种方式xmlhttp.onload（）=function(){}也可以

         xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4&& xmlhttp.status==200){
                  var restext= xmlhttp.responseText;
                 var jsontext = eval("("+restext+")");

                    //
                 var postele = document.getElementById("searchpost");
                 postele.innerHTML="<option value='1'>请选择职务</option>";
                 for(var i=0;i<jsontext.length;i++){
                          var post= jsontext[i];
                          var postid=post.postId;
                          var postname=post.postName;
                              postele.innerHTML+="<option value='"+postid+"'>"+postname+"</option>";
                 };
                };
};

      2.1 readyState 的五种状态

            0 － （未初始化）还没有调用send()方法

            1 － （载入）已调用send()方法，正在发送请求

            2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

            3 － （交互）正在解析响应内容

            4 － （完成）响应内容解析完成，可以在客户端调用了

      2.2 status 是服务器的响应状态码  200 代表交互正常

      2.3 responseText 是返回的数据，是text文本；也可以使用responseXml，返回的是xml文件，比较少

           一般是转为Json 后使用：var jsontext = eval("("+responseText +")");

3、xmpHttp.open("GET",url)创建一个新的请求

      3.1 GET方式 ，需要自行拼接URL,使用GET方式，xmlhttp.send（）可以不输入内容

      xmlhttp.open("GET","${pageContext.request.contextPath}/postaction_findPostBydepId?department.depId="+depid);

     3.2 POST方式

      xmlhttp.open("GET","${pageContext.request.contextPath}/postaction_findPostBydepId");

      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

     使用POST ,xmlhttp.send() 放入参数

     xmlhttp.send("department.depid="+depid)

4、xmphttp.send()发送请求到服务器

5、服务器代码(使用的是struts2+hibernate+spring)只截取了部分代码

import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;

public String findPostBydepId() throws IOException{

List<Post> depidPost=postservice.findPostByDepId(post.getDepartment().getDepId());


//排除不需要的数据,排除查询出来的post中的staff,department 否则hibernate会死循环查询
JsonConfig jsonconfig = new JsonConfig();
jsonconfig.setExcludes(new String[]{"staff","department"});
String dataPost = JSONArray.fromObject(depidPost,jsonconfig).toString();
System.out.println(dataPost);
//回写数据,获取response回写数据
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");

ServletActionContext.getResponse().getWriter().write(dataPost);

return "none";
}

 

后续再写一下JQuery的，也差不多忘光了。。。

转载于:https://www.cnblogs.com/fndxsz/p/11070696.html