xmlhttprequest 原生使用

最新推荐文章于 2022-04-20 22:09:42 发布

38度秋裤

最新推荐文章于 2022-04-20 22:09:42 发布

阅读量377

点赞数

本文介绍了一个使用AJAX实现客户端与服务器端交互的例子，具体展示了如何通过GET请求将数据从客户端发送到Servlet，并在服务器端处理这些数据后返回到客户端的过程。

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

package com.ajax.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ajax.dao.Dao;

public class ShwServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=gbk");
		PrintWriter out = response.getWriter();

		String uname = request.getParameter("uname");

		String name = new String(uname.getBytes("iso-8859-1"), "gbk");

		// Dao dao = new Dao();
		// List<String> list = dao.find(name);

		StringBuffer sf = new StringBuffer();

		for (String s : list) {
			sf.append("<div οnmοuseοver='over(this)' " +
					"οnclick='myclick(this)'  " +
					"οnmοuseοut='out(this)'>"+s+"</div>");
		}
		out.print(sf.toString());
		out.close();
	}

}

这是我的ajax脚本文件

var req =null; //声明ajax的核心对象，从是没有初始化


//响应jsp页面中的函数
function show(){
	
	
	//取到页面中的文本框控件
	var name = document.getElementById("name");
	//取到控件中的值
	
	var val = name.value;
	
	if(val==""){
		mydiv.innerHTML="";
		return;
	}else{
		//封装一个请求servlet路径的url地址，同时把参数以url重写的方式传递
		var url = "abc?uname="+val;
		sendRequest(url);	
	}
	
}


//编写方法，根据不同的浏览器创建核心对象 XMLHttpRequest，

function  createReq(){
	
	
	//非IE
	if(window.XMLHttpRequest){
		req = new XMLHttpRequest();
	}else if(window.ActiveXObject){
		try{
			req = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

}


//利用核心对象和后台交互
function sendRequest(url){
	
	
	//准备交互
	//1、调用方法初始化核心对象
	createReq();
	//2、准备建立异步请求
	//req.open(选择servlet的处理方式,地址,同步还是异步);
	req.open("GET",url,true);
	//3、编写委托，委托一个方法来处理请求的返回结果
	//req.onreadystatechange =被委托的函数名称
	req.onreadystatechange = process;
	//4、真正的发送请求到后台
	req.send(null);
}


//当返回值来了以后，由被委托的函数来处理
function process(){
	
	//首先判断异步是否成功与后台交互
	
	//req.readystate==4  表示，前台与后台，成功交互了一次
	if(req.readystate==4){
		//交互成功以后，还要判断请求是否成功处理
		if(req.status==200){
			//定制一个变量，获得后台的返回值
			var res = req.responseText;
			//req.responseText 它可以获得servlet中，流所输出的内容
			mydiv.innerHTML = res;
		}
	
	}

}

//处理悬停事件
function over(obj){
	obj.style.backgroundColor="lime";
}
function out(obj){
	obj.style.backgroundColor="white";
}

function myclick(obj){
	
	var val = obj.innerHTML;
	document.getElementById("name").value=val;
	mydiv.innerHTML="";
}

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
  <head>
  		<script type="text/javascript" src="js/script.js"></script>
  </head>
  
  <body>
  		<table>
  			<Tr>
  				<Td>
  					<input type="text" name="name" οnkeyup="show()"/>
  				</Td>
  			</Tr>
  			<Tr>
  				<Td>
  					<div id="mydiv" style="border-style: groove"></div>
  				</Td>
  			</Tr>
  		</table>	
  </body>
</html>