1、介绍
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2、创建一个简单的实例、由于ajax为数据交互技术、所以首先需要有一个被调用的后台接口或是可以远程调用的接口、这里我们自己创建一个简单的实例
package myajax; import java.io.IOException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.liferay.portal.kernel.json.JSONObject; public class MyServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; public void init(){}; public void doGet(HttpServletRequest request, HttpServletResponse response) { this.doPost(request, response); }; public void doPost(HttpServletRequest request, HttpServletResponse response){ response.setContentType("text/html;utf-8"); response.setCharacterEncoding("utf-8"); String out = ""; String type = request.getParameter("type"); if("ajax".equals(type)){ out=myAjax(); } try { response.getWriter().write(out); response.getWriter().flush(); response.getWriter().close(); } catch (IOException e) { e.printStackTrace(); } } private String myAjax() { String str = "ajax调用小例子QAQ"; return str ; }; }
这里提供了一个供调用的url :http://127.0.0.1:8080/we/myservlet?type=ajax
2、页面ajax
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> function sentGet(){ //创建ajax对象 var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //发送请求 xmlhttp.open("GET","http://127.0.0.1:8080/we/myservlet?type=ajax",true); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } }; </script> </head> <body> <button onclick="sentGet();" >发送AJAX请求</button> <div id="myDiv"></div> </body> </html>
这里 、我们发送ajax请求、并实现局部刷新！ 到此整个ajax的简单流程结束.