您现在的位置是：网站首页> 编程资料编程资料
Ajax详解及其案例分析_AJAX相关_
2023-05-25
195人已围观
简介 Ajax详解及其案例分析_AJAX相关_
1 获得Ajax对象
1.1 问题
如何获得XmlHttpRequest对象。
1.2 方案
区分浏览器，使用不同的获取方式。
1.3 步骤
步骤一： 新建ajax01.html页面
新建一个Web工程，在WebRoot下新建ajax01.html页面。在
步骤二： 部署项目访问ajax01.html页面
访问页面如图-2所示。
图 – 2
点击链接：
图 - 3
使用IE测试结果如图-4所示。
图 – 4
注意：本次测试使用的是IE11，但IE的早期5.5，6.0版本创建的都是ActiveXObject类型的。从IE7开始支持创建XMLHttpRequest的方式来获取Ajax对象。
1.4 完整代码
ajax01.html文件代码如下：
ajax01.html 获取Ajax对象
2 使用Ajax对象发送GET请求
2.1 问题
使用Ajax对象发送GET类型的请求，从服务器端获取一小段文本。
2.2 方案
遵循创建Ajax对象，创建请求，设置回调函数，发送请求的步骤来完成一次异步请求。
2.3 步骤
步骤一： 新建ajax02.html页面
步骤二： 添加getText()方法，并补充超链接对该方法的调用
ajax02.html 获取文本
步骤三： 编写ActionServlet类
package web; 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 ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); //获取请求资源路径 String uri = request.getRequestURI(); String path = uri.substring( uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(path.equals("/get_text")){//get请求 out.println("get请求-服务器返回的数据"); } out.close(); } }步骤四： 部署、运行，查看结果
点击链接：
2.4 完整代码
ajax02.html页面代码：
ajax02.html 获取文本
ActionServlet.java页面代码：
package web; 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 ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); //获取请求资源路径 String uri = request.getRequestURI(); String path = uri.substring( uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(path.equals("/get_text")){//get请求 out.println("来自星星的你"); } out.close(); } }web.xml文件代码：
ActionServlet web.ActionServlet ActionServlet *.do
3 使用Ajax对象发送POST请求
3.1 问题
使用Ajax对象发送POST类型的请求，并向服务器提交一小段文本，显示从服务器端返回的文本。
3.2 方案
遵循GET请求方式的4步基础上，多增加一个设定，设定请求头中的content-type属性的值为application/x-www-form-urlencoded
3.3 步骤
步骤一： 新建my.js文件
在WebRoot节点下，新增一个文件夹“js”。在该文件夹中新增一个文件，名为my.js。将获取XMLHttpRequest对象的方法拷贝到该文件中，便于更多页面重用该方法。
my.js 代码：
function getXhr() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }步骤二： 新建ajax03.html页面
步骤三： 编写getText（）方法
ajax03.html
步骤四： 修改ActionServlet
package web; 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 ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //获取请求资源路径 String uri = request.getRequestURI(); String path = uri.substring( uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(path.equals("/get_text")){//get请求 out.println("get请求-服务器返回的数据"); }else if(path.equals("/post_text")){//post请求 String name = request.getParameter("uname"); System.out.println(name); out.println("又来了一次的" + name); } out.close(); } }步骤五： 运行，查看结果
3.4 完整代码
ajax03.html文件代码如下：
ajax03.html
ActionServlet.java文件代码如下：
package web; 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 ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); // 获取请求资源路径 String uri = request.getRequestURI(); String path = uri.substring(uri.lastIndexOf("/")
