Ajax学习_ajax正步-CSDN博客

本文链接：https://blog.csdn.net/w616358337/article/details/8041074

Ajax，异步javascript与xml,是使用客户端脚本与web服务器交互数据的web应用开发方法。俗称-----Ajax异步提交。

异步即相对于同步而言,同步就像是大家军训时走正步一样,大家要整齐划一,统一进行。而异步就是平时大家日常生活自己做自己的事一样,可以毫无关联,当然偶尔打声招呼，说声hello！也是必要的，那就是异步之间的通信了。闲话少说，步入正题。

使用Ajax,其中最主要的就是XMLHttpRequest这个对象。由它封装好客户端的请求信息，提交至服务器。然后带回服务器的返回数据（数据与内容大家区别一下,数据就是某个单纯的值，而内容夹杂了很多修饰信息,如html,css等等）。这还是web的请求响应模式，只是变成异步罢了。下面举几个例子。

一： helloworld

(1)新建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

var xmlrequest;//定义全局异步请求变量

function createxmlRequest() {
if (window.ActiveObject) {

xmlrequest = new ActiveXObject();
} else if (window.XMLHttpRequest) {

xmlrequest = new XMLHttpRequest();
}
}// 创建异步请求对象的函数(由于微软搞特殊所以要判断一下是IE还是其他浏览器)

function sendmessage() {

createxmlRequest();//创建异步对象
var url = "/Ajax/servlet/Test?text=helloworld";
xmlrequest.open("post", url, true);//建立一个请求,准备向服务器发送,true 表示异步发送(准备发送)

xmlrequest.send(null);//发送请求,该函数里的参数表示请求参数一般放到url即可(真正发送)

xmlrequest.onreadystatechange = function() {//onreadystatechange状态变化时的事件控制对象

if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {//readyState 发送请求的状态 4 表示服务器端已经传回所有信息 status服务器回应的HTTP状态码 200表示页面正确
document.getElementById("message").innerHTML = xmlrequest.responseText;
}
}

}(回调函数)
</script>
</head>

<body>
<input type="button" value="提交" οnclick="sendmessage()">
<div id="message"></div>
</body>
</html>

(2)新建名为Test的servlet

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test extends HttpServlet {

private static final long serialVersionUID = 1L;

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

this.doPost(request, response);
}

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

request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();
String t=request.getParameter("text");
out.println(t);

}

}

（3）配置web.xml

（4）完成

二：页面局部更新

（1）新建index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<script type="text/javascript">

var xmlrequest;

function createxmlRequest() {
if (window.ActiveObject) {

xmlrequest = new ActiveXObject();
} else if (window.XMLHttpRequest) {

xmlrequest = new XMLHttpRequest();
}
}

function sendmessage(url) {

createxmlRequest();
xmlrequest.open("post", url, true);
xmlrequest.send(null);
xmlrequest.onreadystatechange = function() {//onreadystatechange状态变化时的事件控制对象

if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {

document.getElementById('message').innerHTML = xmlrequest.responseText;

}
}

}
</script>
</head>

<body>
<div>
<a href="#" οnclick="sendmessage('text.jsp');return false;">word</a>
<a href="#" οnclick="sendmessage('img.jsp');return false;">img</a>
</div>
<br>
<div id="message" align="right"></div>
</body>
</html>

（2）新建 img.jsp ,text.jsp

1.text.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center"> hello!</div>
</body>

</html>

2.img.jsp

<img alt="" src="images/1top.jpg">//自己修改内容

3.完成