欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

（2020-09-11）AJAX后台数据异步交互和跨域操作

程序员文章站 2022-06-15 13:42:10
...

跨域后台java平台处理代码示例：
   

<!--配置跨域请求处理的过滤器  -->
<filter>
           <filter-name>AllowOriginFilter</filter-name>
           <filter-class>com.wangxing.filter.AllowOriginFilter</filter-class>
   </filter>
   <filter-mapping>
           <filter-name>AllowOriginFilter</filter-name>
           <url-pattern>/*</url-pattern>
   </filter-mapping>

AJAX后台数据异步交互代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function quancha(){
				//1.创建HttpRequest
				var xmlhttprequest
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentall",true);
				xmlhttprequest.send();
				//3.请求发送以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并响应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是字符串，我们需要转换成json对象
						var jsonobj=eval("("+info+")");
						//定义行变量
						var rows="";
						for(i=0;i<jsonobj.length;i++){
							rows=rows+"<tr><td>"+jsonobj[i].stuid+
									  "</td><td>"+jsonobj[i].stuname+
									  "</td><td>"+jsonobj[i].stuage+
									  "</td><td>"+jsonobj[i].stuaddress+
									  "</td></tr>";
						}
						document.getElementById("main1").innerHTML=rows;
					}
				}
			}
			//根据id和name一起全查
			function getStuidAndStuname(id,name){
				//1.创建HttpRequest
				var xmlhttprequest
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid="+id+"&stuname="+name,true);
				xmlhttprequest.send();
				//3.请求发送以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并响应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是字符串，我们需要转换成json对象
						var jsonobj=eval("("+info+")");
						//alert(jsonobj);
						var rows="";
						if(jsonobj==null){
							//alert("空对象");
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
								  "</td><td>"+jsonobj.stuname+
									  "</td><td>"+jsonobj.stuage+
									  "</td><td>"+jsonobj.stuaddress+
									  "</td></tr>";
						}
						document.getElementById("main1").innerHTML=rows;
					}
				}
			}
			//根据id查
			function getStuid(id){
				//1.创建HttpRequest
				var xmlhttprequest
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuid?stuid="+id,true);
				xmlhttprequest.send();
				//3.请求发送以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并响应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是字符串，我们需要转换成json对象
						var jsonobj=eval("("+info+")");
						//alert(jsonobj);
						var rows="";
						if(jsonobj==null){
							//alert("空对象");
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
								  "</td><td>"+jsonobj.stuname+
									  "</td><td>"+jsonobj.stuage+
									  "</td><td>"+jsonobj.stuaddress+
									  "</td></tr>";
						}
						document.getElementById("main1").innerHTML=rows;
					}
				}
			}
			//根据name查
			function getStuname(name){
				//1.创建HttpRequest
				var xmlhttprequest
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuname?stuname="+name,true);
				xmlhttprequest.send();
				//3.请求发送以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并响应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是字符串，我们需要转换成json对象
						var jsonobj=eval("("+info+")");
						//alert(jsonobj);
						var rows="";
						if(jsonobj==null){
							//alert("空对象");
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
								  "</td><td>"+jsonobj.stuname+
									  "</td><td>"+jsonobj.stuage+
									  "</td><td>"+jsonobj.stuaddress+
									  "</td></tr>";
						}
						document.getElementById("main1").innerHTML=rows;
					}
				}
			}
			window.onload=function(){
			//无条件全部查询
			quancha();
			//为按钮添加点击事件
			document.getElementById("queranniu").onclick=function(){
				//得到文本框输入的值
				var stuidval=document.getElementById("inputid").value;
				var stunameval=document.getElementById("inputname").value;
				if(stuidval!="" && stunameval!=""){
					//alert("stuidval--stunameval都不为空");
					getStuidAndStuname(stuidval,stunameval);
				}
				if(stuidval=="" && stunameval==""){
					//alert("stuidval--stunameval都为空");
					quancha();
				}
				if(stuidval!="" && stunameval==""){
					//alert("stuidval不为空--stunameval为空");
					getStuid(stuidval);
				}
				if(stuidval=="" && stunameval!=""){
					//alert("stuidval为空--stunameval不为空");
					getStuname(stunameval);
				}
			}
			}
		</script>
	</head>
	<body>
		<center>
			stuid:<input id="inputid" type="text" />
			stuname:<input id="inputname" type="text" />
			<input id="queranniu" type="button" value="百度一下"/><br>
			<hr>
			<table id="main1" border="1px" width="500px"></table>
		</center>
	</body>
</html>

完成交互操作后台java代码示例：

1.webcontent（网络内容）webxml代码示例：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
   xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
   id="WebApp_ID" version="3.1">
   <!--配置跨域请求处理的过滤器  -->
   <filter>
   		<filter-name>AllowOriginFilter</filter-name>
   		<filter-class>com.wangxing.filter.AllowOriginFilter</filter-class>
   </filter>
   <filter-mapping>
   		<filter-name>AllowOriginFilter</filter-name>
   		<url-pattern>/*</url-pattern>
   </filter-mapping>
  <!--全局查询  -->
  <servlet>
  	<servlet-name>studentall</servlet-name>
  	<servlet-class>com.wangxing.servlet.StudentAllServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>studentall</servlet-name>
  	<url-pattern>/studentall</url-pattern>
  </servlet-mapping>
   <!--根据id和name查询  -->
  <servlet>
  	<servlet-name>studentstuidstuname</servlet-name>
  	<servlet-class>com.wangxing.servlet.StudentStuidStunameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>studentstuidstuname</servlet-name>
  	<url-pattern>/studentstuidstuname</url-pattern>
  </servlet-mapping>
   <!--根据id查询  -->
  <servlet>
  	<servlet-name>studentstuid</servlet-name>
  	<servlet-class>com.wangxing.servlet.StudentStuidServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>studentstuid</servlet-name>
  	<url-pattern>/studentstuid</url-pattern>
  </servlet-mapping>
   <!--根据name查询  -->
  <servlet>
  	<servlet-name>studentstuname</servlet-name>
  	<servlet-class>com.wangxing.servlet.StudentStunameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>studentstuname</servlet-name>
  	<url-pattern>/studentstuname</url-pattern>
  </servlet-mapping>
</web-app>

2.数据包代码示例：

package com.wangxing.servlet;

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.google.gson.Gson;
import com.wangxing.bean.Student;
import com.wangxing.data.studentData;

public class StudentAllServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req,resp);
		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		List<Student> stulist=studentData.getStudentList();
		Gson gson=new Gson();
		String stringjson=gson.toJson(stulist);
		PrintWriter out=resp.getWriter();
		out.println(stringjson);
		out.close();
	}

}

 

相关标签： 进阶 javascript

上一篇： 如何实现边框内圆角

下一篇： Rafy 框架 - 使用 SqlTree 查询

推荐阅读