“Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。
1)创建对象
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; }
2）发送请求
//执行get请求 function get() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一： 请求类型 GET or POST 参数二： 请求的路径 参数三： 是否异步， true or false */ request.open("GET", "/day13Ajax/DemoServlet01", true); request.send(); }
如果发送请求的同时，还想获取数据，那么代码如下
//执行get请求 function get() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一： 请求类型 GET or POST 参数二： 请求的路径 参数三： 是否异步， true or false */ //request.open("GET", "/day13Ajax/DemoServlet01", true); request.open("GET", "/day13Ajax/DemoServlet01?name=aa&age=18", true); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法 request.onreadystatechange = function(){ //前半段表示 已经能够正常处理。 再判断状态码是否是200 if(request.readyState == 4 && request.status == 200){ //弹出响应的信息 alert(request.responseText); } } request.send();
package cn.jxufe.web; 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 DemoServlet01 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("收到了一个请求。。。"); String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println("收到了一个请求。。。" + name + "=" + age); response.setContentType("text/html;charset=utf-8"); response.getWriter().write("收到了请求..."); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("现在来了一个post请求，将要去走get的代码了。"); doGet(request, response); } }
如果不带数据
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; } //执行get请求 function post() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一： 请求类型 GET or POST 参数二： 请求的路径 参数三： 是否异步， true or false */ request.open("POST", "/day13Ajax/DemoServlet01", true); request.send(); }
带数据
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; } //执行get请求 function post() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一： 请求类型 GET or POST 参数二： 请求的路径 参数三： 是否异步， true or false */ request.open("POST", "/day13Ajax/DemoServlet01", true); //如果想带数据，就写下面的两行 //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //带数据过去 ， 在send方法里面写表单数据。 request.send("name=obama&age=19"); }
//执行get请求 function post() { //1. 创建xmlhttprequest 对象 var request = ajaxFunction(); //2. 发送请求。 /* 参数一： 请求类型 GET or POST 参数二： 请求的路径 参数三： 是否异步， true or false */ request.open("POST", "/day13Ajax/DemoServlet01", true); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变，那么就执行 = 号右边的方法 request.onreadystatechange = function() { //前半段表示 已经能够正常处理。 再判断状态码是否是200 if (request.readyState == 4 && request.status == 200) { //弹出响应的信息 alert(request.responseText); } } //如果想带数据，就写下面的两行 //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //带数据过去 ， 在send方法里面写表单数据。 request.send("name=obama&age=19"); }
javascript 的代码框架。
简化代码，提高效率。
write less do more , 写得更少，做的更多。
package cn.jxufe.web; 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 DemoServlet02 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("收到了请求。。。"); response.setContentType("text/html;charset=utf-8"); response.getWriter().write("给你一份数据"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP ‘01demo.jsp‘ starting page</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function load() { //$("#aaa").val("aaa"); //$("#aaa").html("9999999"); //$("#aaa").load("/day16/DemoServlet02"); //$("#text01") --- document.getElementById("text01"); $("#aaa").load("/day13Ajax/DemoServlet02", function(responseText, statusTXT, xhr) { //alert("jieguo:"+responseText); //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值 $("#aaa").val(responseText); }); } </script> </head> <body> <!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3> --> <h3> <input type="button" onclick="load()" value="使用JQuery执行load方法"> </h3> <input type="text" id="aaa"> </body> </html>
原文：https://www.cnblogs.com/xinmomoyan/p/11215896.html