javaScript中ajax入门

最新推荐文章于 2025-03-21 10:41:12 发布

程宇寒

最新推荐文章于 2025-03-21 10:41:12 发布

阅读量760

点赞数

文章标签： javaScript js ajax XMLHttpRequest 前端开发

本文链接：https://blog.youkuaiyun.com/czh500/article/details/108106535

版权

本文深入讲解了AJAX的本质，即通过JS中的XMLHttpRequest对象进行HTTP请求。提供了详细的代码示例，包括如何创建请求、处理响应以及与服务器交互的过程。同时，介绍了如何验证用户名是否存在和提交表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做！

ajax中，最关键的一句话就是var xhr = new XMLHttpRequest();

ajax01.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax知识</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>ajax知识</h1>
<h3>ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做</h3>
用户名<input type="text" name="uName" id="uName" /><br />
<input type="button" value="向服务端发送请求(验证用户名是否存在)" onclick="sendRequest();" />
<span id="message"></span>
<form action="">
	<p>
		用户名<input type="text" name="username" id="username" />
	</p>
	<p>
		邮箱<input type="text" name="email" id="email" />
	</p>
	<p>
		<input type="submit" value="向服务端发送请求" />
	</p>
</form>	
</body>
<script type="text/javascript">
function sendRequest(){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200){
			console.log('服务端返回的内容：' + this.responseText);
			if (this.responseText == 'true') {
					var message1 = '<font color="red">用户名已存在</font>'
					document.getElementById('message').innerHTML = message1;
				}
			else {
				var message2 = '<font color="green">用户名可用</font>'
				document.getElementById('message').innerHTML = message2;
				}
			}
		}
	var uName = document.getElementById('uName').value;
	var url = '/ajax/UserNameExist?userName=' + uName;
	xhr.open('get', url, true);
	xhr.send(null);
}
	
document.getElementsByTagName('form')[0].onsubmit = function() {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200){
			console.log('服务端返回的内容：' + this.responseText);
			}
		}
	var url = '/ajax/ajaxData';
	xhr.open('post', url, true);
	var username = document.getElementById('username');
	var email = document.getElementById('email');
	var data = 'username=' + username.value + '&email=' + email.value;
	console.log(data);
	xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
	xhr.send(data);
	return false;
}
</script>
</html>

package com.jiongmeng.ajax;

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

import javax.servlet.ServletConfig;
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检测用户名是否存在
 */
@WebServlet("/UserNameExist")
public class UserNameExist extends HttpServlet {
	private static final long serialVersionUID = 1L;

	List<String> userNames;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		String userName = request.getParameter("userName");
		boolean exist = userNames.contains(userName);
		request.setAttribute("exist", exist);
		System.out.println("userName = " + userName);
		try {
			// 模拟网络慢的情况
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
//		String webUrl = request.getContextPath();
//		 request.getRequestDispatcher("/userNameExist.jsp").forward(request, response);
		// response.sendRedirect(webUrl + "/userNameExist.jsp");
//		pw.write(exist + "");
		pw.print(exist);
		pw.flush();
		pw.close();
	}

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

	@Override
	public void init(ServletConfig config) throws ServletException {
		userNames = new Vector<String>();
		userNames.add("zhangsan");
		userNames.add("lisi");
		userNames.add("wangwu");
		userNames.add("zhaoliu");
	}

}

package com.jiongmeng.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

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

/**
 * 获取客户端提交的数据
 */
@WebServlet("/ajaxData")
public class AjaxData extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		Enumeration<String> parameterNames = request.getParameterNames();
		StringBuffer sb = new StringBuffer();
		while(parameterNames.hasMoreElements()){
			String parameterName = parameterNames.nextElement();
			String parameterValue = request.getParameter(parameterName);
			System.out.println(parameterName + "=" + parameterValue);
			sb.append(parameterName + "=" + parameterValue + ";");
		}
		try {
			// 模拟网络慢的情况
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		System.out.println(sb.toString());
		pw.print(sb.toString());
		pw.flush();
		pw.close();
	}

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

	@Override
	public void init(ServletConfig config) throws ServletException {

	}

}

完！