Ajax post方法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'test1.jsp' starting page</title>

<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="${pageContext.request.contextPath }/ajaxpost/test1.js">

</script>
</head>

<body>
<form action="" enctype="application/x-www-form-urlencoded" >
<input type="button" name="ok" id="ok" value="测试服务器连接"><span id="ceshi"></span>
</form>
</body>
</html>

js文件：

/*
* AJAX建立和服务器的连接，接收服务器的请求，处理服务器返回的数据
* 开发步骤
* *1.创建XMLHttpRequest对象
* *2.接收服务器的响应
* *3.打开和服务器的连接
* *4.发送数据
* *
*
*/
/*创建XMLHttpRequest对象*/
function ajaxFunction() {
var xmlHttp;
try{
//Firefox,opera 8.0+,safari
xmlHttp = new XMLHttpRequest();
}
catch(e){
try {
//IE 5.0
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e){
try{
//IE 5.5 及更高版本
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}

}

return xmlHttp;
}

window.onload = function() {

document.getElementById("ok").onclick = function() {
//alert("zhixing");
//1.获取xmlHttpRequest对象

var xmlReq = ajaxFunction();

//2.接收服务器的响应
/*
* XMLHttpRequest对象中有一个readyState属性
* 0 代表未初始化。还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次 readyState 值的改变，都会触发 onreadystatechange 事件。
* */
xmlReq.onreadystatechange = function() {
//alert(xmlReq.readyState);
//alert(xmlReq.status);

//响应发送完毕
if(xmlReq.readyState==4) {
//通过把这个值和200（服务器处理成功）或304（文件没有被修改）
if(xmlReq.status==200||xmlReq.status==304){

//alert("****");

//接收服务器端返回的的数据
var date = xmlReq.responseText;
//alert("接收到的服务器端返回来的数据："+date);

//把返回的结果插入到指定的地方
document.getElementById("ceshi").innerHTML=date;

}
}
};
//3.打开和服务器的连接
/*
* open(method,url,asynch)
* * method 请求方法：get post
* * url 请求的路径
* * asynch：表示请求是否要异步传输，默认是（true）异步
* **/
xmlReq.open("post","Testservlet?timeStemp="+new Date().getTime()+"&a=8",true);
/*如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.
* 它会告知服务器正在发送数据，并且数据已经符合URL编码了。该方法必须放在open()方法之后*/
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4.发送数据
/*
* 若选用的是get请求，则不会发送任何数据(如果用xmlReq.send("a=2&b=4")则后台收不到数据，此时可以用post方法)，给send传递null即可
* */
xmlReq.send("b=33&c=22");

};

};

servlet文件：

package cn.itcast.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

import cn.itcast.model.Province;
//此类是练习ajaxget,和ajaxpost的
public class JsonServlet extends HttpServlet {

public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
this.doPost(request,response);
}

public void doPost(HttpServletRequest request,IOException {

response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();

//1.测试用的，简单的
/*String str ="{pid:1,pname:'吉林省'}";
out.print(str);
*/
//2.这样用在开发中也不方便
/*String str = "[{pid:1,pname:'吉林省'},{pid:2,pname:'辽宁省'},{pid:3,pname:'山东省'}]";//当有多个对象时，就用数组的形式
out.print(str);*/

//3.一个对象转换为json

/*Province p1 = new Province(1,"吉林省");
JsonConfig config1 = new JsonConfig();
//如果不想把某个属性生成json，就用下面的方法，避免浪费资源
config1.setExcludes(new String[] {"pid"});//pid属性不生成json
JSONObject jsonObject = JSONObject.fromObject(p1);
//toString()方法转换为字符串形式
System.out.println(jsonObject.toString());*/

//4.因为实际开发中要从数据库中读数据，这里暂时用list集合模拟
//集合（多个对象）转换为json
List<Province> list = new ArrayList<Province>();

Province p1 = new Province(1,"吉林省");
Province p2 = new Province(2,"辽宁省");
Province p3 = new Province(3,"山东省");

list.add(p1);
list.add(p2);
list.add(p3);
JsonConfig config = new JsonConfig();
//如果不想把某个属性生成json，就用下面的方法，避免浪费资源
config.setExcludes(new String[] {"pid"});//pid属性不生成json
JSONArray jsonArray = JSONArray.fromObject(list,config);
//转换为字符串形式
System.out.println(jsonArray.toString());
out.print(jsonArray.toString());

}

}

model java文件

package cn.itcast.model; public class Province { private int pid; private String pname; public Province() { } public Province(int pid,String pname) { super(); this.pid = pid; this.pname = pname; } public int getPid() { return pid; } public void setPid(int pid) { this.pid = pid; } public String getPname() { return pname; } public void setPname(String pname) { this.pname = pname; } }

原文链接：https://www.f2er.com/ajax/166003.html

猜你在找的Ajax相关文章