ajax实例1

最新推荐文章于 2024-08-14 19:24:14 发布
最新推荐文章于 2024-08-14 19:24:14 发布
阅读量380 收藏
点赞数
分类专栏： AJAX 文章标签： ajax xmlhttprequest function 服务器 html button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_wanglong/article/details/7960693
版权

1GET：

//test.js

/*
 * AJAX建立和服务器的连接请求，处理服务器返回的数据
 * 步骤：
 * 1创建XMLHttpRequest对象
 * 2打开服务器的连接
 * 3发送数据
 * 4接受服务器的响应
 */
//创建对象
function ajaxFunction(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){

}
}
}

return xmlHttp;
}


window.onload = function(){
document.getElementById("ok").οnclick=function(){
//1
var xmlReq = ajaxFunction();
//4
xmlReq.onreadystatechange=function(){
//alert(xmlReq.readyState);
//alert(xmlReq.status);
if(xmlReq.readyState==4){
if(xmlReq.status==200||xmlReq.status==304){
//alert("success");
//接受服务器端的数据
var data = xmlReq.responseText;
alert(data);
}
}
}
//2
xmlReq.open("get","../TestServlet?time="+new Date().getTime(),true);
//3
xmlReq.send(null);


}
}


//testGet.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>


<form action="" enctype="application/x-www-form-urlencoded">
<input type="button" name="ok" id="ok" value="测试连接">
</form>


</body>
</html>


///ajaxTest/src/com/wanglong/web/TestServlet.java

package com.wanglong.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 TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public TestServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print("服务器端的数据data");
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String a = request.getParameter("a");
		String b = request.getParameter("b");
		String c = request.getParameter("c");
		PrintWriter out = response.getWriter();
		out.print("服务器端的数据postData:"+"a="+a +";b="+b+";c="+c);
	}

}

2POST 

/*
 * AJAX建立和服务器的连接请求，处理服务器返回的数据
 * 步骤：
 * 1创建XMLHttpRequest对象
 * 2打开服务器的连接
 * 3发送数据
 * 4接受服务器的响应
 */
//创建对象
function ajaxFunction()
{
	var xmlHttp;
	try{// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
    }catch(e){// Internet Explorer
    	try{
    		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e){
    	  try{
    		  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
        	 alert("您的浏览器不支持AJAX！");
        	 return false;
         }
      }
    }
    return xmlHttp;
 }


window.onload = function(){
	document.getElementById("ok").οnclick=function(){
		//1
		var xmlReq = ajaxFunction();
		//4
		xmlReq.onreadystatechange=function(){
			//alert(xmlReq.readyState);
			//alert(xmlReq.status);
			if(xmlReq.readyState==4){
				if(xmlReq.status==200||xmlReq.status==304){
					//alert("success");
					//接受服务器端的数据
					var data = xmlReq.responseText;
					alert(data);
				}
			}
		}
		//2
		xmlReq.open("post","../TestServlet?time="+new Date().getTime()+"&a=123",true);
		xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded");//该方法必须放在open方法后面
		//3
		xmlReq.send("b=45&c=asd");
	}
}

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TestPost</title>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>

	<form action="" enctype="application/x-www-form-urlencoded">
		<input type="button" name="ok" id="ok" value="测试连接">
	</form>

</body>
</html>


RegisterDemo

function ajaxFunction()
{
	var xmlHttp;
	try{// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
    }catch(e){// Internet Explorer
    	try{
    		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e){
    	  try{
    		  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
        	 alert("您的浏览器不支持AJAX！");
        	 return false;
         }
      }
    }
    return xmlHttp;
 }

window.onload = function(){
	document.getElementById("checkusername").οnclick=function(){
		var username = document.getElementById("username").value;
		//alert(username);
		var xmlReq = ajaxFunction();
		
		xmlReq.onreadystatechange=function(){
			if(xmlReq.readyState==4){
				if(xmlReq.status==200||xmlReq.staus==304){
					var data = xmlReq.responseText;
					document.getElementById("divcheck").innerHTML=data;
				}
			}
		}
		
		xmlReq.open("post","../RegisterServlet", true);
		
		xmlReq.setRequestHeader("content-Type","application/x-www-form-urlencoded");
		
		xmlReq.send("username="+username);
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testRegister</title>
<script type="text/javascript" src="./register.js"></script>
</head>
<body>

<form action="" method="post" enctype="application/x-www-form-urlencoded">
	<input type="text" name="username" value="" id="username">
	<div id="divcheck"></div>
	<input type="button" name="checkusername" value="查看用户名" id="checkusername">
</form>

</body>
</html>

package com.wanglong.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 RegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public RegisterServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String username = request.getParameter("username");
		PrintWriter out = response.getWriter();
		if("wanglong".equals(username)){
			out.println("用户名已经存在");
		}else{
			out.println("用户名可以使用");
		}
	}

}


JAVA

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json Test</title>
<script type="text/javascript">
	function ajaxFunction(){
		var xmlHttp;
		try{
			xmlHttp = new XMLHttpRequest();
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e){
					
				}
			}
		}
		
		return xmlHttp;
	}
	window.οnlοad=function(){
		document.getElementById("check").οnclick=function(){
			var xmlReq = ajaxFunction();
			xmlReq.onreadystatechange = function(){
				if(xmlReq.readyState==4){
					if(xmlReq.status==200||xmlReq.status==304){
						var data = xmlReq.responseText;
						alert(data);
						var dataObj = eval("("+data+")");
						alert(dataObj);
						alert(dataObj[1].name);
					}
				}
			}
			
			xmlReq.open("post", "../JsonServlet?time="+new Date().getTime(), true);
			xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xmlReq.send(null);
		}
	}
</script>
</head>
<body>
	<form action="" method="post" enctype="application/x-www-form-urlencoded">
		<input type="button" name="check" value="check" id="check">
	</form>
</body>
</html>


package com.wanglong.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 JsonServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String a = request.getParameter("a");
		String b = request.getParameter("b");
		String c = request.getParameter("c");
		PrintWriter out = response.getWriter();
		out.print("[{pid:1,name:'wang'},{pid:2,name:'long'}]");
	}

}

LIST to JSON

package com.wanglong.web;

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

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

import net.sf.json.JSONArray;

public class JsonServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String a = request.getParameter("a");
		String b = request.getParameter("b");
		String c = request.getParameter("c");
		PrintWriter out = response.getWriter();
		out.print("[{pid:1,name:'wang'},{pid:2,name:'long'}]");
		Person p1 = new Person();
		Person p2 = new Person("wang",28);
		Person p3 = new Person("hah",99);
		List<Person> list = new ArrayList<Person>();
		list.add(p1);
		list.add(p2);
		list.add(p3);
		
		JSONArray jsonArr = JSONArray.fromObject(list);
		System.out.println(jsonArr.toString());
	}
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

}


china_wanglong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax常用案例,AJAX实例
weixin_34649252的博客
08-05 2037
AJAX实例用户页面发起一个请求， 使用servlet输出数据到jsp练习使用HttpServletResposne输出。pint使用servlet输出一个字符串响应ajax请求根据省份id查询省份名称需求：用户在文本框架输入省份的编号id，在其他文本框显示省份名称● 项目环境准备：数据库：springdb数据表：● 省份信息表：CREATE TABLE `province` (`id` int(...
Ajax技术 实例篇
weixin_47044904的博客
06-09 1129
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
Ajax实例
qq_41281571的博客
08-02 656
Ajax实例 Ajax，最好的方便之处就是不用页面跳转来实现数据传输，直接js脚本，向处理页面提交异步请求，有点像多线程的感觉，用一个分支线程来进行数据分析，而不用整个页面跳转，用户体验非常好。 var name=document.getElementById(“name”); name.innerHTML=要改变的值，占位。 in_array(值，数组)：检测值是否在数组里面 onbl...
Ajax介绍以及实例
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-20 1150
Ajax实例讲解
原生js的Ajax实例
Yuan_mingyu的博客
08-12 1523
与jQuery不同，原生js的ajax的实现相比来说复杂一些，因为jquery中的$.ajax()方法已经把js的实现封装起来，使用起来更加方便。但是，原生js的实现过程，对于理解ajax，好像更清晰一些。 之前写过的jQuery的ajax实现：jQuery的Ajax实例（附完整代码） 这次使用原生js实现 实现过程（文末有完整代码） 以此实例为例： 1.创建XMLHttpRequest对象 这...
ajax html例子,AJAX实例
weixin_28727943的博客
08-05 719
AJAX实例实例一：一个简单的AJAX实例创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据实例functionloadXMLDoc(){varxmlhttp;if(window.XMLHttpRequest){//IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码xmlhttp=newXMLHttpRequest();}els...
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
jQuery Ajax 实例
Keep Moving~
07-05 1211
Jquery在异步提交方面封装的很好，直接用AJAX非常麻烦，Jquery大大简化了我们的操作，不用考虑浏览器的诧异了。 推荐一篇不错的jQuery Ajax 实例文章，忘记了可以去看看， 地址为：http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery
angluar ajax实例,angular实例
weixin_29114331的博客
08-05 1068
1.ng-app指令标记了AngularJS脚本的作用域，在中添加ng-app属性即说明整个都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如，则AngularJS脚本仅在该中运行。2.这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标...
Ajax请求完整实例
m0_51560322的博客
12-31 3117
AJAX实例 原数`在这里插入代码片`据 ``
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
ajax实例入门代码
10-30
想学习ajax的朋友，如果刚开始接触可以查看脚本之家的ajax栏目，之前的一些文章。
AJAX 实例
12-13
AJAX 实例 为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序: 实例 使用 AJAX 修改该文本内容 修改内容 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和一个按钮。 div 部分用于显示来自...
基于JQuery框架的AJAX实例代码
10-29
**基于JQuery框架的AJAX实例详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容，极大地提升了用户体验。而JQuery是一个强大的...
Ajax-03.Axios-案例
最新发布
程小白的博客
08-14 141
【代码】Ajax-03.Axios-案例。
spark--练习1
很开心你能来~
08-07 389
sparksql练习
Ajax-02.Axios
程小白的博客
08-14 201
【代码】Ajax-02.Axios。
Ajax-01.原生方式
程小白的博客
08-12 149
【代码】Ajax-01.原生方式。
AJAX实例入门：异步交互与UI设计
AJAX（Asynchronous JavaScript and XML）是一种用于创建更快、更交互...这个AJAX实例入门教程旨在帮助初学者理解并掌握AJAX的核心概念和技术应用，从而在实际项目中有效地利用这种技术来改善Web应用的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值