jsp之ajax

1.Ajax简介
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
2.Ajax语法介绍
学习使用Ajax主要就是学习XMLHttpRequest对象的方法和属性

2.1第一个Ajax

2.2传值
		2.2.1get方式传值
		xmlHttp.open("get","${pageContext.request.contextPath}/servlet/TestServlet?name=haoren							&password=123&time="+ new Date().getTime());	
		xmlHttp.send(null);
		2.2.2post方式传值
		xmlHttp.open("post","${pageContext.request.contextPath}/servlet/TestServlet?time="+ new Date().getTime());	
		//post方式是通过send把参数发送给服务器端，所以一定要指定发的类型，					//"content-type","application/x-www-form-urlencoded"为普通的表单类型，表单默认就是这个			类型
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=好人&password=123");

3.Json
3.1 Json简介
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
3.2 Json语法介绍
window.onload = function(){
var json1 = {name:“haoren”,password:123};
var jsonArr = [{name:“huairen”,age:12+23},{name:“zhangsan”,age:23},{name:“lishi”,age:13}]
alert(json1.name);
alert(json1.password);
for(i=0;i<jsonArr.length;i++){
alert(jsonArr[i].name+","+(jsonArr[i].age+10));
}
}
3.3Json深入：
1.
Servlet：
//String data = “{name:‘haoren’,password:‘123’}”;
//response.getWriter().print(data);
//User user = new User(“huairen”,“1212”,45);
//String data = “{name:’”+user.getName()+"’,password:’"+user.getPassword()+"’,age:’"+user.getAge()+"’}";
//response.getWriter().print(data);
Jsp---------------------------------------------------------------------------------------------------------------------------------
function showInfo(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200 || xmlHttp.status == 304){

				var jdata1 = xmlHttp.responseText;
				alert(jdata1);

alert(jdata1.name+":"+jdata1.password+":"+jdata1.age);//这里会出问题，因为后台返回给我们的是普通字符串而不是js，所以无法点运算，应该做如下处理。

//eval函数可以将普通字符串变成js
var jdata = eval("("+xmlHttp.responseText+")");
alert(jdata);
alert(jdata.name+":"+jdata.password+":"+jdata.age);

			}
			
		}
		
	}

Servlet：
//利用json-lib快速的将javabean转换为了为json数据(包有点烦躁)
List list = new ArrayList();
list.add(new User(“user1”,“2323”,42));
list.add(new User(“user2”,“2324”,46));
list.add(new User(“user3”,“2325”,47));
JSONArray ja = JSONArray.fromObject(list);
//过滤掉一些字段
//JsonConfig jc = new JsonConfig();
//jc.setExcludes(new String[]{“password”});
//JSONArray ja = JSONArray.fromObject(list,jc);

	response.getWriter().print(ja.toString());

Jsp-------------------------------------------------------------------------------------------------------------------------------------
function showInfo(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200 || xmlHttp.status == 304){
var jdata = eval("("+xmlHttp.responseText+")");
//alert(jdata.name+":"+jdata.password+":"+jdata.age);
alert(jdata[0].name+","+jdata[1].name+","+jdata[2].name+","+jdata[0].password);
}

		}
		
	}

4.jQuery实现Ajax
4.1：JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。
4.2：load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）
load(url,[data],[callback]);
* url:请求的服务器的资源地址

• data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据
  * callback:function(data,textStatus,xhr){}
  data:服务器端返回的数据
  textStatus:状态。succuss, error, notmodify, timeout
  xhr：XmlHttpRequest对象本身

ex：
<!—引入jQuery库–>

<input type="button" value="Ajax" onclick="fun1()">

如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)(*.jsp h1只加载h1元素的内容)
这样就只会显示h1的内容，但是data中h1和h2都传过来了。
function fun1() {
$("#div1").load(“servlet/AjaxDemo1 h1”,{name:“huairen”,password:“123456”},function(data,textStatus,xhr){
alert(data);
alert(textStatus);
alert(xhr);
});
}
AjaxDemo1类：
public class AjaxDemo1 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(“text/html;charset=utf-8”);
response.getWriter().write(“

好人

”);
response.getWriter().write(“

坏人

”);

	//response.getWriter().write("{name:'张三',age:18}");
	System.out.println(request.getParameter("name"));
}

也可以提交给jsp，这样jsp中的内容就会被加载到当前页面，也可以提交给servlet然后转给jsp（这样很多效果就好做了）
function fun1() {
//$("#div1").load(“jsp3.jsp”);
$("#div1").load(“servlet/AjaxDemo1”);
}
Jsp3：

aa	bb
1	2
3	4

4.3：get方法： 4.4: post方法：

$.get(“servlet/AjaxDemo2”,function(data,textStatus,xhr){
alert(data);
document.getElementById(“div1”).innerHTML=data;

		});

$.post(“1.jsp”,{username:‘haoren’,psw:‘123’},function(data,textStatus){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲one").text(data…("#form1").serialize()提取表单数据

function fun1() {

		$.get("servlet/AjaxDemo3",$("#form1").serialize());
	}

	</form>
	<input type="button" value="Ajax" onclick="fun1()">

Aptana简介

Aptana插件在eclipse中安装

Aptana插件在MyEclipse中安装

Aptana增加提示功能