Ajax案例一共四种写法

最新推荐文章于 2024-07-15 22:52:27 发布

A小铁

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量306

点赞数 1

分类专栏：开发过程实际问题解决总结文章标签： Ajax

本文链接：https://blog.csdn.net/weixin_41345933/article/details/98073757

版权

本文详述了使用原生JavaScript和jQuery进行Ajax请求的四种方法，包括Js原生的创建XMLHttpRequest对象、打开请求、发送请求及接收数据的步骤，以及jQuery的$.ajax()的完整模式、简写模式和简易写法。提供了多个示例页面和后台代码以供参考。

摘要由CSDN通过智能技术生成

Js原生ajax

步骤
1、创建一个XMLHttpRequest;核心对象
2、通过这个核心对象打开请求open
3、通过这个核心对象发送请求
4、通过这个核心对象接收返回数据

01-Js-ajax.jsp

前台页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生ajax</title>
<script type="text/javascript">
	function findMsg(){
		//1、创建一个XMLHttpRequest;核心对象
		var xhr = new XMLHttpRequest();
		//2、通过这个核心对象打开请求open
		//第一个参数请求类型，第二个地址，第三个是否异步
		xhr.open("post","js-ajax",true);
		//3、通过这个核心对象发送请求
		xhr.send();
		//接收数据
		xhr.onreadystatechange = function(){
			if(xhr.status == 200 && xhr.readyState == 4 ){
			//xhr.readyState == 4  是表示后台处理完成了。
	    	//xhr.status == 200 是表示处理的结果是OK的。
				var text = xhr.responseText;
				document.getElementById("msg").innerHTML=text;
			}
		}
	}
</script>
</head>
<body>
	最近网上最火的一句话：<span id="msg"></span><br>
	<input type="button" value="点我有惊喜" onclick="findMsg()">
</body>
</html>

JsAjaxServlet.java

后台页面

package com.offcn.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

@SuppressWarnings("serial")
@WebServlet("/js-ajax")
public class JsAjaxServlet extends HttpServlet {

	@Override
	pro