AJAX中XMLHttpRequest的简单应用

最新推荐文章于 2022-09-12 17:09:29 发布

wangyoucao2003

最新推荐文章于 2022-09-12 17:09:29 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： xmlhttprequest ajax servlet firefox import 浏览器

本文链接：https://blog.youkuaiyun.com/wangyoucao2003/article/details/1033039

本文通过一个简单的示例介绍了如何使用Ajax发起GET请求来从服务器获取信息，并展示了不同浏览器下创建XMLHttpRequest对象的方法及处理响应的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（本文例子参考了Ajax修炼之道中的例子，只为说明问题，如引用，请注明程序出处）

从客户端建立一个XMLHttpRequest对象，然后用这个对象请求一个URL。本文使用的URL是”/MyTest/message“

，如下是整个页面的代码。功能很简单，在页面上有一个按钮，单击按钮后可以从服务器获取一个信息（URL，即本文的/MyTest/message），然后可以从对象xhr.responseText获得这个值（注意：这里不同的浏览器有不同的做法。如：IE中xhr的属性可以是responseTEXT也可以是responseText。但在Firefox中则只能使用后者）。另外如下列代码可知，在不同的浏览器中，创建XMLHttpRequest对象的方法也有所不同。程序中只给出了主流的浏览器IE和Firefox中创建的情况，其他的浏览器没有提供，可能会出现问题。
用户页面：
<html>

<head>

<title>Your title here</title>

<!-- Hide from older browsers;

var xhr ;

function modify(){

try{

xhr = new ActiveXObject("Msxm12.XMLHTTP");

}catch(E){

try{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){

xhr = false ;

}

if(!xhr && typeof(XMLHttpRequest)!='undefined'){

xhr = new XMLHttpRequest();

alert("Firefox");

}

xhr.open("GET" , "/MyTest/message");

xhr.onreadystatechange=function(){

if(xhr.readyState!=4)return ;

document.getElementById("message").innerHTML =xhr.responseText;

}

xhr.send(null);

}

// end hide -->

</script>

</head>

<body>

<button onclick="modify()">Click Here</button>

</body>

</html>

服务器处理：
使用Servlet技术，如下是Servlet代码：

import javax.servlet.*;

import javax.servlet.http.*;

import java.io.*;

import java.util.*;

public class message extends HttpServlet {

private static final String CONTENT_TYPE = "text/html; charset=GBK";

//Initialize global variables

public void init() throws ServletException {

}

//Process the HTTP Get request

public void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

response.setContentType(CONTENT_TYPE);

PrintWriter out = response.getWriter();

out.println("<html>");

out.println("<head><title>message</title></head>");

out.println("<body bgcolor="#ffffff">");

out.println("<p>The servlet has received a GET. This is the reply.</p>");

out.println("</body>");

out.println("</html>");

out.close();

}

//Clean up resources

public void destroy() {

}

请读者注意路径问题，我使用的Servlet是放在了虚拟路径的ROOT目录（如：http;//localhost;8080/MyTest/message）。如果您创建的Servlet不在ROOT下，那么自行更改xhr.open()方法中的路径。
如执行正确，那么在按钮的上边会出现“The servlet has received a GET. This is the reply.”字符串。

我刚刚接触AJAX，很多地方不明白。不当之处，请各位高手指正。