Ajax学习(一)

最新推荐文章于 2022-11-28 21:07:17 发布

啊困困困困

最新推荐文章于 2022-11-28 21:07:17 发布

阅读量116

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/weixin_43532918/article/details/88953477

版权

JAVA 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

XMLHttpRequest对象的5种状态：
0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1：请求已开始，open()方法已调用，但还没调用send()方法；
2：请求发送完成状态，send()方法已调用；
3：开始读取服务器响应；
4：读取服务器响应结束。

得到异步对象
```
 var xmlHttp = createXMLHttpRequest();
```
打开与服务器的连接
* 指定请求方式
* 指定请求的URL
* 指定是否为异步请求
```
 xmlHttp.open("GET", "/AjaxTest/AServlet", true);
```
发送请求
xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！

给异步对象的onreadystatechange事件注册监听器

 xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
 	// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
 	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 		// 获取服务器的响应结束
 		var text = xmlHttp.responseText;
 		// 获取h1元素
 		var h1 = document.getElementById("h1");
 		h1.innerHTML = text;

例：get请求、ajax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript">
	function createXMLHttpRequest(){
		try{
			return new XMLHttpRequest();
		} catch (e){
			try{
				return new ActvieXObject("Msxml2.XMLHTTP");//IE6.0
			} catch (e){
				try{
					return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本	
				} catch (e){
					alert("什么浏览器啊？");
					throw e;
			}
		}
	}
}
window.onload = function (){
	var b = document.getElementById("btn");
	b.onclick = function(){//监听
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("GET", "/AjaxTest/AServlet");
		xmlHttp.send();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				var text = xmlHttp.responseText;
				document.getElementById("h1").innerHTML = text;
			}	
		} ;
	};
};
</script>
  </head>
  
  <body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
  </body>
</html>

package lzk.servlet;

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

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

public class AServlet extends HttpServlet {

	/**
		 * The doGet method of the servlet. <br>
		 *
		 * This method is called when a form has its tag value method equals to get.
		 * 
		 * @param request the request send by the client to the server
		 * @param response the response send by the server to the client
		 * @throws ServletException if an error occurred
		 * @throws IOException if an error occurred
		 */
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html");
		System.out.println("Hello AJAX!");
		response.getWriter().print("Hello AJAX!!!");
	}

	/**
		 * The doPost method of the servlet. <br>
		 *
		 * This method is called when a form has its tag value method equals to post.
		 * 
		 * @param request the request send by the client to the server
		 * @param response the response send by the server to the client
		 * @throws ServletException if an error occurred
		 * @throws IOException if an error occurred
		 */
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the POST method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

}

啊困困困困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习(一)

ajaxAJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。得到异步...
复制链接

扫一扫