首页 > 其他分享> > Ajax简介与用法

Ajax简介与用法

2021-11-17 20:30:24 作者：互联网

Ajax简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），Ajax可以实现异步请求。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

Ajax语法介绍

学习使用Ajax主要就是学习XMLHttpRequest对象的方法和属性

第一个Ajax

<%@ 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>Insert title here</title>
</head>
<!-- ajax
ajax可以实现异步请求
学习使用ajax主要就是学习XMLHttpRequset对象的方法和属性
 -->
<body>
<!-- 第一个ajax -->
<script type="text/javascript">

//xmlHttp不能定义到外面，要把它设为全局变量。
var xmlHttp;
	function fun(){
		//1.创建XMLHttpRequest对象
		
		try { //Firefox, Opera 8.0+, Safari
			//谷歌、火狐浏览器支持
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			try { //Internet Explorer
				//IE6浏览器支持，不支持IE6以上的
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					//支持IE6以上的
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("不支持Ajax！");
				}
			}
		}
		//2.建立与服务器的连接
		//为什么获取当前时间，因为让它发送多次请求，不被认为是一次请求
		//get方式传值
		xmlHttp.open("GET","${pageContext.request.contextPath}/AjaxDemo?name=haoren&password=123&time="+new Date().getTime());
		//3.向服务器发送数据
		xmlHttp.send(null);
		//4.设置回调函数,接受服务器返回的数据
		//注意：readState的状态变化都会触发onreadstatechange
		xmlHttp.onreadystatechange = showInfo;
	}
	
//回调函数
	function showInfo(){
		//xmlHttp.readyState	4表示已完成
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200 || xmlHttp.status == 304){//304表示服务器的内容没有变化、200表示请求成功
				document.getElementById("div1").innerHTML = xmlHttp.responseText;
			}
		}
	}
</script>

<a href="#" onclick="fun()">点击</a>
<div style="width:100px;height:100px;border:1px solid blue;" id="div1"></div>
</body>
</html>

servlet代码：

package com.test.ajax;

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;

import com.sun.xml.internal.fastinfoset.stax.events.ProcessingInstructionEvent;

/**
 * ajax请求
 * 接受ajax请求，返回字符串
 */
@WebServlet("/AjaxDemo")
public class AjaxDemo extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String name = request.getParameter("name");
		String password = request.getParameter("password");
		System.out.println(name+";"+password);
		response.getWriter().print("小日本不是人");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

传值

1.get方式传值

xmlHttp.open("get","${pageContext.request.contextPath}/servlet/TestServlet?name=haoren							&password=123&time="+ new Date().getTime());	
xmlHttp.send(null);

2.post方式传值

xmlHttp.open("post","${pageContext.request.contextPath}/servlet/TestServlet?time="+ new Date().getTime());	
//post方式是通过send把参数发送给服务器端，所以一定要指定发的类型，					
//"content-type","application/x-www-form-urlencoded"为普通的表单类型，表单默认就是这个	型
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=好人&password=123");

标签：xmlHttp,简介,request,用法,Ajax,import,password,servlet
来源： https://blog.csdn.net/bakelFF/article/details/121386858