原生js实现Ajax请求

最新推荐文章于 2022-12-26 14:12:25 发布

神韵499

最新推荐文章于 2022-12-26 14:12:25 发布

阅读量196

点赞数

分类专栏： Ajax/JSON 模块文章标签：原生js实现Ajax请求 Ajax

本文链接：https://blog.csdn.net/qq_41055045/article/details/100516462

版权

Ajax/JSON 模块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

可以参考w3c https://www.w3school.com.cn/ 下的Ajax教程

1、创建一个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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax底层实现</title>
<script type="text/javascript" src="js/ajax2.js"></script>
</head>
<!-- 原生js -->
<body>
	<button onclick="fun();">ajax技术 get请求</button>
	<hr />
	<span id='span'></span>
</body>
</html>

2、创建一个ajax2.js文件，编写fun() js函数

function fun() {
//	1、建立对象
	var xmlhttp;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	
//	2、打开连接（GET请求）
	xmlhttp.open("GET","AjaxServlet2?username=zhangsan",true);
	
//	3、发送信息
	xmlhttp.send();
	
//	4、处理信息
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    document.getElementById("span").innerHTML=xmlhttp.responseText;
	    }
	  }
	
}

如果是POST的请求（跟我这里没关，我是GET请求）

function fun() {
//	1、建立对象
	var xmlhttp;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	
//	2、打开连接
	xmlhttp.open("POST","AjaxServlet2",true);
	
//	3、设置请求头
	xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

//	4、发送信息
	xmlhttp.send("username=zhangsan");
	
//	5、处理信息
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    document.getElementById("span").innerHTML=xmlhttp.responseText;
	    }
	  }
	
}

3、根据连接地址，创建Servlet

package com.demo.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 功能：ajax底层实现
 * 时间：2018-12-9
 * @author 
 *
 */
@WebServlet("/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求信息
		String username = request.getParameter("username");
		//响应请求信息
		response.getWriter().write("username:"+username);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

4、测试

部署、运行、测试

输入url运行

点击Ajax请求获得响应结果

神韵499

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现Ajax请求

可以参考w3chttps://www.w3school.com.cn/下的Ajax教程1、创建一个jsp文件<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4....
复制链接

扫一扫

专栏目录