Ajax入门

最新推荐文章于 2023-05-27 16:06:06 发布
最新推荐文章于 2023-05-27 16:06:06 发布
阅读量299 收藏
点赞数
分类专栏： java EE javascript/jquery/bootstrap 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a974986042/article/details/84961612
版权

原生js使用ajax：
get和post两种方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function fn1(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
		//4、发送请求
		xmlHttp.send();
		
	}
	function fn2(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span2").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("POST","/WEB22/ajaxServlet",false);
		//4、发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=wangwu");
		
	}

	
</script>

</head>
<body>
	<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>

package com.itheima.ajax01;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//response.getWriter().write("zhangsan");
		
		/*try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}*/
		
		String parameter = request.getParameter("name");
		
		response.getWriter().write(Math.random()+parameter);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

jQuery方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">


	function fn1(){
		//get异步访问
		$.get(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"张三","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				//{\"name\":\"tom\",\"age\":21}
				alert(data.name);
			},
			"json"
		);
	}
	function fn2(){
		//post异步访问
		$.post(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"李四","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				alert(data.name);
			},
			"json"
		);
	}
	function fn3(){
		$.ajax({
			url:"/WEB22/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});
	}
</script>

</head>
<body>
	<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
	<br>
</body>
</html>

package com.itheima.ajax02;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet2 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		
		System.out.println(name+"  "+age);
		
		
		//java代码只能返回一个json格式的字符串
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}
三个和尚_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX入门
weixin_46065399的博客
07-09 628
简单入门AJAX
ajax 的入门案例
qq_52370789的博客
04-12 702
ajax，Asynchronous JavaScript And XML，异步的JavaScript和XML同步：伴随着页面的刷新或跳转，即全局刷新；同步请求会阻塞代码的执行，即同步请求会一个一个的执行异步：在不刷新页面的情况下与服务器进行交互，即局部刷新；异步请求不会阻塞代码的执行，ajax请求一旦发送，不会等服务器响应结果完毕，后面的代码就会继续执行ajax的核心对象XMLHttpRequest。
ajax入门学习（二）小案例Demo1
冷血之心的博客
02-19 3105
   （尊重劳动成果，转载请注明出处：http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客） ajax入门学习（一） ajax入门学习（二）小案例Demo1 ajax入门学习（三）小案例Demo2   1、准备工作 因为AJAX也需要请求服务器，异步请求也是请求服务器，所以我们需要先写好服务器端代码，即编写...
从零开始学习 AJAX：超详细！15 分钟搞定 AJAX 原理和使用方法
weixin_56242678的博客
05-27 1万+
本文将会介绍 AJAX 的原理和使用方法，并帮助你在短时间内掌握这一重要的前端技术。我们将从 AJAX 的基本概念入手，深入探讨 AJAX 的核心技术——XMLHttpRequest 对象以及常用的数据交互方式。通过本文的学习，你将能够轻松地了解 AJAX 的工作方式和应用场景，从而为你的 Web 应用程序添加更多的交互性和实时性。
ajax入门经典
05-03
对于基础比较弱的童鞋来说还是不错的一本参考资料
Ajax入门学习教程（一）
10-20
AJAX（Asynchronous JavaScript And XML）翻译成中文就是“异步Javascript和XML”。下面简单给大家介绍了ajax入门学习知识，需要的的朋友参考下吧
jquery $.ajax入门应用一
10-30
在本文中，我们将深入探讨jQuery中的$.ajax方法，这是一个核心的异步数据通信工具，用于在不刷新整个页面的情况下与服务器进行交互。首先，我们通过一个简单的实例来了解$.ajax的基本用法，然后讨论其各个参数和选项...
AJAX入门实例-简单易懂
04-14
一个AJAX的入门实例，用最简单的代码表现什么是AJAX，AJAX的原理。 这个是——异步请求请求一个url。 还有一个是本页请求，用于asp.net。
Ajax经典入门案例详解（入门中的经典，经典中的入门，适合初学者）
03-07
Ajax经典入门案例详解（入门中的经典 经典中的入门 适合初学者） 注：Ajax是异步JavaScript和XML（Asynchronous javascript and xml 的英文缩写
AJAX最基础的知识
02-09
ajaxjichu，ajax基础1
ajax 入门基础之 XMLHttpRequest对象总结
10-29
**Ajax入门基础之XMLHttpRequest对象总结** Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下更新部分网页的技术。在Ajax的核心中，XMLHttpRequest（XHR）对象扮演着至关重要的角色，它允许...
Ajax入门教材
06-01
**Ajax入门教材** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这种技术结合了JavaScript、XML、DOM、CSS以及 XMLHttpRequest对象，使得Web应用程序更具...
Ajax基础入门
weixin_67318211的博客
04-03 623
1.什么是Ajax技术？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的独立的 Web 应用程序的技术。 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。 2.为什么要采用Ajax技术（优缺点） 使用Ajax的最大优点，就是能在不更新整个页面的前提下和服务器进行数据交互。这使得W
ajax入门 不要畏惧 很简单 进了门一切都好学多了
lovejavalovejava的专栏
03-19 2960
   以前总是听别人说ajax是多么的好，然后自己就去借了本书看，哇塞感觉好难哦，什么介绍javascript,html,css，还有很多一些东西。看的那个难啊，然后就是硬着头皮把它给看完了，但是就是缺少了一步最关键的步骤，运行它。理解它的原理。了解它的机制。去感觉它，触摸它。    现在拿了一个实例自己去练习了一下，发现，嗯，可以感觉到它的存在了。可以触摸到了。好开心啊，还有那些很复杂的介绍
一个完整的ajax简单案例
热门推荐
qq_37447018的博客
04-23 2万+
ajax简单完整案例
python教程之ajax入门
最新发布
09-07
ajax基础学习、运行环境、获取服务器文件、eval使用、dom元素添加、封装库、数据类型、注册用户
ajax入门
05-27
以下是入门步骤： 1. 创建 XMLHttpRequest 对象（浏览器内置对象）： ```javascript var xmlhttp = new XMLHttpRequest(); ``` 2. 发送请求（使用 GET 或 POST 方法）： ```javascript xmlhttp.open("GET", "url...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值