一：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情
况下。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
//Get方式提交：
xmlhttp.open("GET","testServlet?name="+userName,true);
xmlhttp.send(null);
//Post方式请求的代码
xmlhttp.open("POST","testServlet",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name="+userName);
二：代码演示(配置好相应的环境，比如c3p0-config-xml...)
A：get请求：
Ajax1servlet:
package com.pp.web;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajax")
public class Ajax1servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("姓名"+username);
}
}
get.jsp
page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" value="点我试试看" onclick="btnclick()">
<script>
function btnclick() {
//创建核心对象
xmlhttp=null;
if(window.XMLHttpRequest){
//只针对于ie7，谷歌，firefox,
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange=function () {
alert(xmlhttp.readyState)//状态码
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//xmlhttp.readyState==4 这个指的是xmlhttp的交互状态.为4就是交互完成.
//xmlhttp.status==200 这个是你xmlhttp与后台交互时返回的一个状态码.关于HTTP状态码
alert("准备好了吗")
alert(xmlhttp.responseText);
}
}
xmlhttp.open("get","/ajax?username=王芝洋");
xmlhttp.send();
}
</script>
</body>
</html>
B：post请求：
Ajax2servlet:
package com.pp.web;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajax2")
public class Ajax2servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("pas");
System.out.println(username);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("姓名"+username);//相应
}
}
post.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/1/25
Time: 16:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" value="点我试试看" onclick="btnclick()">
<script>
function btnclick() {
//创建核心对象
xmlhttp=null;
if(window.XMLHttpRequest){
//只针对于ie7，谷歌，firefox,
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange=function () {
alert(xmlhttp.readyState);//状态码
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//xmlhttp.readyState==4 这个指的是xmlhttp的交互状态.为4就是交互完成.
//xmlhttp.status==200 这个是你xmlhttp与后台交互时返回的一个状态码.关于HTTP状态码
alert("准备好了吗");
alert(xmlhttp.responseText);
}
}
xmlhttp.open("post","/ajax2");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("pas=root");
}
</script>
</body>
</html>
网友评论