如何实现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);
}
}
控制台：
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-08-06 11:54:49