您的位置：首页 > 其它

黑马day17 ajax入门案例

2015-07-12 15:04 555 查看
如何实现Ajax异步交互：

*实现Ajax的步骤：

(1).创建XMLHttpRequest对象

固定写法，不用记...如果面试问到，所以最好是背诵下来

(2).注册监听

利用XMLHttpRequest对象的onreadystatechange属性：用来监听属性的状态

利用XMLHttpRequest对象的readyState属性：获取服务器端的状态

利用XMLHttpRequest对象的status属性：获取状态码(200,404等)

(3).建立连接

利用XMLHttpRequest对象的open()方法

(4).发送请求

利用XMLHttpRequest对象的send方法(如果请求类型是get方式，send方法不起作用.如果请求方式是post方式，send方法起作用)

Ajax异步交互中get和post方式的区别

如果请求类型是post方式的话，需要设置请求头部信息："Content-Type"为"application/x-www-form-urlencoded"

send方法起作用

open方法的第一个参数

案例1：测试get方式：

1.测试使用的jsp页面...其中导入要使用的js文件...test.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	<meta http-equiv=" pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<script type="text/javascript" src="test.js"></script>
  </head>
  
  <body>
    <form action="">
    	<input type="button" name="ok" id="ok" value="测试服务器连接"/>
    </form>
  </body>
</html>
2.js文件：

<span style="font-size:14px;">//当页面加载完毕之后才执行下面的代码
window.onload=function(){
	//当点击按钮的时候就会触发下面的事件
	document.getElementById("ok").onclick=function(){
		//1.得到xmlHttpRequest对象
		var xhr=ajaxFunction();
		//2.监听服务器...服务器端向客户端进行响应
		xhr.onreadystatechange=function(){//用于监听服务器端的状态
			if(xhr.readyState==4){//readyState 属性表示请求的当前的状态。他的值可是是下面的5中情况
				if(xhr.status==200||xhr.status==304){//如果响应码是200或者304的话就接受数据
				//接收服务器端的响应结果 文本类型
					var data=xhr.responseText;
					alert(data);
				}
			}
		}
		//3.建立客户端与服务器的连接
		//-- *method:get 或者 post *url:请求路径，可以是相对路径也可以是绝对路径. *asych 是不是异步处理请求
		xhr.open("get","../servlet/TestGetServlet?c=5",true);
		//4.客户端向服务器端发送请求
		//-- * 如果请求方式是get方式的话，send方法发送数据服务器接收不到数据 * 该步骤不能够被省略
		</span><span style="font-size:18px;color:#ff0000;"><strong>xhr.send("a=3&b=4");</strong></span><span style="font-size:14px;">
		}
}
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;
 }
</span>
3.写servlet类：

package app.servlet;

import java.io.IOException;

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

public class TestGetServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.getWriter().write("connect is successful!");
		String a = request.getParameter("a");
		String b=request.getParameter("b");
		String c=request.getParameter("c");
		System.out.println(a);
		System.out.println(b);
		System.out.println(c);
	}

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

}


控制台：仅仅打印了c但是send方法中的参数没有打印..这说明send方法对get方式无效



页面：



案例2：测试post请求方式：这里的jsp页面中的form中的参数method改为了post

1.jsp页面...post提交

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	<meta http-equiv=" pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">   
	<script type="text/javascript" src="test.js"></script> 
  </head>
  <body>
    <form action=""<span style="color:#ff6666;"> </span><span style="color:#cc0000;"><strong>method="post"</strong></span>>
    	<input type="button" name="ok" id="ok" value="测试post连接"/>
    </form>
  </body>
</html>


2.js文件

<span style="font-size:14px;">window.onload=function(){
	document.getElementById("ok").onclick=function(){
		//1.得到xhr对象
		var xhr=ajaxFunction();
		//2.服务器对客户机的响应
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var data=xhr.responseText;
					alert(data);
				}
			}
		}
		//3.建立客户机和服务器的连接
		xhr.open("post","../servlet/TestPostServlet",true);
		
		//如果请求类型是POST方式的话,需要设置请求首部信息
		</span><strong><span style="font-size:18px;color:#ff0000;">xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");</span></strong><span style="font-size:14px;">
		//4.客户机向服务器发送数据
		xhr.send("a=7&b=8");
	}
}
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;
 }
</span>
3.servlet:

package app.servlet;

import java.io.IOException;

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

public class TestPostServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String a = request.getParameter("a");
		String b = request.getParameter("b");
		response.getWriter().write("connection is successful!");
		System.out.println(a);
		System.out.println(b);
	}

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

}
控制台：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航