黑马day17 ajax入门案例
怎样实现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.onload=function(){
//当点击button的时候就会触发以下的事件
document.getElementById("ok").onclick=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接收不到数据 * 该步骤不能够被省略
</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.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);
}
}
控制台：
