黑马day17 ajax入门案例

最新推荐文章于 2024-02-07 08:15:00 发布

adr5970

最新推荐文章于 2024-02-07 08:15:00 发布

阅读量147

点赞数

文章标签： java javascript 面试 ViewUI

原文链接：http://www.cnblogs.com/ljbguanli/p/7159897.html

版权

怎样实现Ajax异步交互：

*实现Ajax的步骤：

(1).创建XMLHttpRequest对象

固定写法。不用记...假设面试问到。所以最好是背诵下来

(2).注冊监听

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

利用XMLHttpRequest对象的readyState属性：获取server端的状态

利用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="測试server连接"/>
    </form>
  </body>
</html>

2.js文件：

<span style="font-size:14px;">//当页面载入完成之后才运行以下的代码
window.οnlοad=function(){
	//当点击button的时候就会触发以下的事件
	document.getElementById("ok").οnclick=function(){
		//1.得到xmlHttpRequest对象
		var xhr=ajaxFunction();
		//2.监听server...server端向client进行响应
		xhr.onreadystatechange=function(){//用于监听server端的状态
			if(xhr.readyState==4){//readyState 属性表示请求的当前的状态。他的值但是是以下的5中情况
				if(xhr.status==200||xhr.status==304){//假设响应码是200或者304的话就接受数据
				//接收server端的响应结果 文本类型
					var data=xhr.responseText;
					alert(data);
				}
			}
		}
		//3.建立client与server的连接
		//-- *method:get 或者 post *url:请求路径，能够是相对路径也能够是绝对路径. *asych 是不是异步处理请求
		xhr.open("get","../servlet/TestGetServlet?

c=5",true); //4.client向server端发送请求 //-- * 假设请求方式是get方式的话。send方法发送数据server接收不到数据 * 该步骤不能够被省略 xhr.send("a=3&b=4"); } } 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; }

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.οnlοad=function(){
	document.getElementById("ok").οnclick=function(){
		//1.得到xhr对象
		var xhr=ajaxFunction();
		//2.server对客户机的响应
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var data=xhr.responseText;
					alert(data);
				}
			}
		}
		//3.建立客户机和server的连接
		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.客户机向server发送数据
		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);
	}

}

控制台：

转载于:https://www.cnblogs.com/ljbguanli/p/7159897.html

adr5970

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马day17 ajax入门案例

怎样实现Ajax异步交互：*实现Ajax的步骤：(1).创建XMLHttpRequest对象固定写法。不用记...假设面试问到。所以最好是背诵下来(2).注冊监听利用XMLHttpRequest对象的onreadystatechange属性：用来监听属性的状态利用XMLHttpRequest对象的readyState属性：获取server端的状态利用...
复制链接

扫一扫