Ajax数据传递
前端页面--------------------------------------------------------------------------------------------
一：get请求
function btn_get_click() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
//添加参数,以求每次访问不同的url,以避免缓存问题
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username) + "&random=" +Math.random());---1、前端发送数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var txt = xmlHttp.responseText;-----1、前端获取回调数据(文本形式：name=value)
document.getElementById("result").innerHTML =txt;----给页面节点赋值
var txt = xmlHttp.responseText;-----2、前端获取回调数据(JSON格式的文本形式)
var citys = txt.evalJSON();
$('s2').innerHTML = '';
for(i=0;i<citys.length;i++){
var op =new Option(citys[i].cityName,citys[i].cityValue);
$('s2').options[i] = op;
}
var txt = xmlHttp.responseText;
var obj = txt.evalJSON();
$('d1').innerHTML = 'name:'+ obj.name + 'birthay:' + obj.birthday; //日期
var xml = xmlHttp.responseXML;----3、前端获取回调数据(xml dom 对象形式)
var mes=xml.getElementsByTagName("mes"); //获取mes节点
var mes_val=mes[0].childNodes[0].nodeValue; //表示第一个mes节点的第一个子节点
$('myres').value=mes_val; //给页面节点赋值
方法二：
var xmlDoc =xhr.responseXML.documentElement；
var name=xmlDoc.childNodes[0].childNodes[0].nodeValue;
var age =xmlDoc.childNodes[1].childNodes[0].nodeValue
}
}
xmlHttp.send(null); //发送请求,参数为null
}
二：post请求
function btn_post_click() {
var xmlHttp = window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
//文本数据组装：
var data = "username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age);
//JSON数据组装：
var page_data={}; //声明一个JSON类型
page_data.username=username;
page_data.age=age;
var json=JSON.stringify(page_data);//转换为JSON数据，将这个变量json传值到后台，最简单的form提交
//XML数据组装：
第一步:创建一个XML的DOM对象
function CreateDomDoc(){ //该函数应在btn_post_click()函数外定义
Var signatures = ["Msxml2.DOMDocument.5.0","Msxml2.DOMDocument.4.0","Msxml2.DOMDocument.3.0","Msxml2.DOMDocument","Microsoft.XmlDom"];
for(var i=0;i<signatures.length;i++){
try{
var domDoc = new ActiveXObject(signatures[i]);
return domDoc;
}catch(e){ }
}
return null;
}
第二步:从客户端取得数据写入XML的DOM对象
function CreateXml(doc){ //该函数应在btn_post_click()函数外定义
var root= doc.createElement("root");
var NAME = doc.createElement("NAME");
NAME.text= username;
root.appendChild(NAME);
var AGE = doc.createElement("AGE");
AGE.text= age；
root.appendChild(AGE);
doc.appendChild(root);
return doc.xml;
}
第三步 互相调用
var domDoc = CreateDomDoc(); //创建对象 将用send发送到服务器端
if(domDoc!=null){
var xml = CreateXml(domDoc); //写入xml 返回xml文档
}else{
alert("未安装MSXML控件");
}
XML数据组装方法二：
var Xml="<?xml version='1.0' encoding='UTF-8'?>"
+"<root>"
+ "<name>" + username + "</name>"
+"<age>" + age +"</age>"
+"</root>";
//不用担心缓存问题
xmlHttp.open("post", "Server.aspx", true);
//必须设置,否则服务器端收不到参数
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var txt = xmlHttp.responseText;-----1、前端获取回调数据(文本形式：name=value)
document.getElementById("result").innerHTML =txt;----给页面节点赋值
var txt = xmlHttp.responseText;-----2、前端获取回调数据(JSON格式的文本形式)
var citys = txt.evalJSON();
$('s2').innerHTML = '';
for(i=0;i<citys.length;i++){
var op =new Option(citys[i].cityName,citys[i].cityValue);
$('s2').options[i] = op;
}
var txt = xmlHttp.responseText;
var obj = txt.evalJSON();
$('d1').innerHTML = 'name:'+ obj.name + 'birthay:' + obj.birthday; //日期
var xml = xmlHttp.responseXML;----3、前端获取回调数据(xml dom 对象形式)
var mes=xml.getElementsByTagName("mes"); //获取mes节点
var mes_val=mes[0].childNodes[0].nodeValue; //表示第一个mes节点的第一个子节点
$('myres').value=mes_val; //给页面节点赋值
方法二：
var xmlDoc =xhr.responseXML.documentElement；
var name=xmlDoc.childNodes[0].childNodes[0].nodeValue;
var age =xmlDoc.childNodes[1].childNodes[0].nodeValue
}
}
//发送请求,要data数据
xmlHttp.send(data);---1、前端发送数据(发送前数据处理)
xmlHttp.send(data+“sex=男”);---前端发送数据(数据不处理)
xmlHttp.send(json);---2、前端发送JSON数据(发送前数据处理)
xmlHttp.send(domDoc);---3、前端发送XML对象数据(发送前数据处理)
xmlHttp.send(xml);
}
后端（servlect、jsp、Action）：-------------------------------------------------------------------------------------------------------------
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8"); //XML形式数据输出时：html换成xml
PrintWriter out = response.getWriter();
数据接收----------------------------------------------------------------------------------
1、文本字符串形式数据：
String username =request.getParameter("username");
Double random =Double.parse(request.getParameter("random"));
int age =Int.parse(request.getParameter("age"));
String sex =request.getParameter("sex ");
2、JSON形式数据：
String jsonStr=request.getParameter("json");
JSONArray jsonArray = JSONArray.fromObject(jsonStr);
for(int i=0;i<jsonArray.length(); i++){
JSONObject jsonJ = jsonArray.getJSONObject(i);
User user=new User();
user.setAge(jsonJ.getInt("age"));
user.setUserName(jsonJ.getString("username"));
}
3、XML对象形式数据：
Request.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");//设置接受类型,防止中文出现乱码情况
XmlDocument xmldoc = new XmlDocument(); //建立xml文档对象
xmldoc.Load(Request.InputStream); //接受ajax发送的xml文档对象流 //也可以接受普通字符流
XmlNode nodeName = xmldoc.SelectSingleNode("//NAME"); //获得NAME节点
String name = nodeName.InnerText; //取得节点值
XmlNode nodeAge = xmldoc.SelectSingleNode("//AGE"); //获得AGE节点
String age = nodeAge.InnerText; //取得节点值
数据输出----------------------------------------------------------------------------
1、普通文本形式：（字符串形式）
if("king".equal(username)) out.println("用户名被占用");
out.close();
2、JSON形式：导入 JSON 的 jar 包： JSON_jar.zip
1）java对象：
Option op = new Option("海淀","hd");
JSONObject obj = JSONObject. fromObject (op);
String str = obj.toString();
out.println(str);
out.close();
2）数组：
Option[] ops = {op,op2,op3};
JSONArray obj = JSONArray. fromObject (ops);
String str = obj.toString();
out.println(str);
out.close();
3）集合：
//手工组装josn格式的java数据：
Option op = new Option("海淀","hd");
Option op2 = new Option("东城","dc");
Option op3 = new Option("西城","xc");
List<Option> ops = new ArrayList<Option>();
ops.add(op);
ops.add(op2);
ops.add(op3);
//数据库查询的java对象：（前端取有用的值）
List<Option> ops=optionService.findAll();
JSONArray obj = JSONArray.fromObject(ops);
String str = obj.toString();
out.println(str); ----后端输出JSON数据
out.close();
4）日期：（日期转为JSON需特殊处理）
User user = new User();
user.setBirthday(new Date());
JsonConfig config = new JsonConfig();
config.registerJsonValueProcessor(Date.class, new DateProcessor());
JSONObject obj =JSONObject. fromObject (user,config);
String str = obj.toString();
out.println(str);
out.close();
}
class DateProcessor implements JsonValueProcessor{ //提供日期转换规则的类
private String pattern = "yyyy-MM-dd";
public void setPattern(String pattern) {this.pattern = pattern;}
public Object processArrayValue(Object arg0,JsonConfig arg1) {
SimpleDateFormat sdf = new SimpleDateFormat(pattern);
return sdf.format((Date)arg0);
}
public Object processObjectValue(String arg0,Object arg1, JsonConfig arg2) {
SimpleDateFormat sdf = new SimpleDateFormat(pattern);
return sdf.format((Date)arg1);
}
}
3、XML对象形式：(组装xml数据和页面的组装一样)
String Xml="<?xml version='1.0' encoding='UTF-8'?>"
+"<root>"
+ "<name>" + username + "</name>"
+"<age>" + age +"</age>"
+"</root>";
out.println(xml);
out.close();
}