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的，也差不多忘光了。。。