码迷,mamicode.com
首页 > Web开发 > 详细

黑马day17 ajax入门案例

时间:2015-07-12 17:35:29      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:ajax

如何实现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);
	}

}
控制台:

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

黑马day17 ajax入门案例

标签:ajax

原文地址:http://blog.csdn.net/u014010769/article/details/46850325

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!