一、Ajax概述
Asynchronous Javascript And XML:异步JavaScript和XML
并不是新的技术,只是把原有的技术,整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
二、数据请求 Get
创建一个demo01.jsp页面:主要去写浏览器点击按钮后通过ajax方式获得数据请求,servlet得到反馈。
数据请求中的Get思路:
1 2 3 4 5 6
| 1.在body里面写一个点击按钮 onclick="get()" 2.在head里面引入js代码写get()方法具体实现。 2.1 主要是去创建对象(调用我们写好的ajaxFunction()方法 ---在F盘的jar文件内) 2.2 使用open()方法可以添加数据--发送请求 2.3 使用request.onreadystatechange=function(){}--判断是不是准备好了 2.4 使用send()方法
|
jsp页面的主要代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title>
<script type="text/javascript"> <!--使用jS文件--> function ajaxFunction(){ <!--拷贝写好的创建对象的方法 --> var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } function get(){ //1.创建xmlhttprequest对象 var request=ajaxFunction(); <!--调用写好的创建对象的方法 --> //2.发送请求 request.open("GET","/day16/DemoSerlvet01?name=aa&age=18",true); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步) //3.获取响应数据 request.onreadystatechange=function(){ if(request.readyState==4&&request.status==200) // (4)已经能够正常处理 && 判断状态码是不是200 { alert(request.responseText); //弹出信息 } } request.send(); }
</script> </head>
<body> <h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3> </body>
|
DemoSerlvet01主要去写输出:
1 2 3 4 5 6 7 8 9 10
| protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取传入的信息 String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println(name+" "+age); //通过alert的方式弹出 response.setContentType("text/html;charset=utf-8"); //response解决方法加一行代码 而request可以加代码/tomcat永久更改(之前博客写过方法) response.getWriter().write("啊啊"); }
|
最终点击jsp页面的一行弹出alert提示:java控制台输出获取的信息
三、数据请求 Post
跟get的差距:
- 只是在open里面要是传输数据需在send()里面写。
- 传输数据必须现有头部
1 2 3 4 5 6
| //如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post不能根据open带过去 request.send("name=aa&age=18");
|
与get方法的前三步骤一样(不带参数):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| function post(){ //1.创建xmlhttprequest对象 var request=ajaxFunction(); <!--调用写好的创建对象的方法 --> //2.发送请求 request.open("POST","/day16/DemoSerlvet01",true); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步) //3.获取响应数据 request.onreadystatechange=function(){ if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200 { alert(request.responseText); } } //如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post不能根据open带过去 request.send("name=aa&age=18"); }
|
主要代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title>
<script type="text/javascript"> <!--使用jS文件--> function ajaxFunction(){ <!--拷贝写好的创建对象的方法 --> var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } function post(){ //1.创建xmlhttprequest对象 var request=ajaxFunction(); <!--调用写好的创建对象的方法 --> //2.发送请求 request.open("POST","/day16/DemoSerlvet01","true"); // 第一个参数:get/post 第二个:相对路径 默认从 项目开始 所以只用写servlet的代码 第三个: true(异步) /false(同步) //3.获取响应数据 request.onreadystatechange=function(){ if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200 { alert(request.responseText); } } //如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post不能根据open带过去 request.send("name=aa&age=18"); }
</script> </head> <body> <h3><a href="" onclick="post()">使用Ajax方式发送Post请求</a></h3> </body>
|
DemoSerlvet01主要去写输出:
1 2 3 4 5 6 7 8 9 10
| protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取传入的信息 String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println(name+" "+age); //通过alert的方式弹出 response.setContentType("text/html;charset=utf-8"); //response解决方法加一行代码 而request可以加代码/tomcat永久更改(之前博客写过方法) response.getWriter().write("啊啊"); }
|
四、部分方法解析#
创建xmlhttprequest对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| function ajaxFunction(){ <!--拷贝写好的创建对象的方法 --> var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }
|
open()方法
- 第一个参数: GET/POST
- 第二个参数: 相对地址(相对于localhost:8080中的8080) 一般是 “/项目名/servlet名字” (GET的方式可以直接?name=lisi&age=18;而POST的方式只能在send里面写,而且要加头)
- 第三个参数: true(异步)/false(同步)
1
| request.open("GET","/day16/DemoSerlvet01?name=aa&age=18",true);
|
onreadystatechange=function(){}–判断状态##
1 2 3 4 5 6 7
| //固定的格式: request.onreadystatechange=function(){ if(request.readyState==4&&request.status==200) // 已经能够正常处理 && 判断状态码是不是200 { alert(request.responseText); //配合request.responseText使用 } }
|
readystate状态集:
status的状态集:
send()方法
1 2 3 4 5 6 7 8 9 10
| //如果是post方式就必须要添加头 --说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post不能根据open带过去 request.send("name=aa&age=18");
// -----------------------------------------------
//get方式 request.send();
|