JavaWeb-AJAX

最新推荐文章于 2024-07-20 16:33:27 发布

Csdn-Cuco

最新推荐文章于 2024-07-20 16:33:27 发布

阅读量99

点赞数

分类专栏： Java 文章标签： mysql eclipse java

本文链接：https://blog.csdn.net/yangyiyun199863/article/details/104557985

版权

Java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ajax（Asynchronous Javascript And Xml）:异步交互的 Javascript和XML

异步交互和同步交互：

>同步交互则是当发送一个请求时，需要等待服务器响应结束以后才能继续发送一个请求。

（当点击页面中的某个事件时会整个页面都刷新）

>异步交互则是发送一个请求时，无需等待服务器响应就可以继续发送另一个请求。

（使用Javascript语言与服务器进行异步交互，传输的数据为XML)

❤和服务器异步交互，浏览器页面局部刷新

Ajax发送异步请求：

>得到XMLHttpRequest

创建XMLHttpRequest

function createXMLHttpRequest(){

    try{

    return new XMLHttpRequest();
    }catch(e){

        try{

        return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
    
            try{
            return new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){
                throw e
            }
          }
        }
    }

>打开与服务器的连接

xmlHttp.open():打开和服务器的连接，并且需要三个参数

请求方式：GET /POST

请求的URL：指定服务器端资源

请求是否为异步：如果为ture则发送异步请求

>发送请求

xmlHttp.send(null):如果不写null则可能会造成部分浏览器不发送请求。

send中的参数是请求体内容，GET请求中没有请求体，因此传入null；

>在xmlHttp对象的一个事件上注册监听器：onreadystatechange

xmlHttp对象中总共有五个状态：

0：创建xmlHttpRequest对象，但并未连接（open）

1：连接，但未发送请求（send）

2: 调用send结束

3：服务器已经响应，但并不代表结束

4：服务器响应结束

得到xmlHttp对象的状态：var state = xmlHttp.readyState;

得到服务器响应的状态码: var status = xmlHttp.status;

得到服务器响应的内容

>var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容

>var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，也就是Document对象

一发送GET请求示例

package cn.itcast.web.servlet;

import java.io.IOException;

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

public class Aservlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("Hello AJAX!");
		response.getWriter().print("Hello 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>My JSP 'ajax1.jsp' starting page</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">

<script type="text/javascript">
	function createXMLHttpRequest(){
		// 适用于大多数浏览器，以及IE7和IE更高版本
		try{
			return  new XMLHttpRequest();
		} catch (e) {
			// 适用于IE6
			try {
				return  new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				// 适用于IE5.5，以及IE更早版本
				try{
				return  new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e){
					throw e;
				}
			}
		}			

	}
	
	window.onload = function(){//文档加载完毕后执行
		var btn = document.getElementById("btn");
		btn.onclick = function(){//给按钮的点击事件注册监听
			/*
			ajax的四步操作，得到服务器的响应
			将相应结果显示到h1元素中
			*/
			var xmlHttp = createXMLHttpRequest();
		    xmlHttp.open("GET","<c:url value='/Aservlet'/>",true);
		    xmlHttp.send(null);
		    xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
		    	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		    		//获取服务器响应结果
		    		var text = xmlHttp.responseText;
		    		
		    		var h1 = document.getElementById("h1");
		    		h1.innerHTML = text;
		    	}
		    	
		    };
		};
	};
	

</script>
  </head>
  
  <body>
   <button id="btn">点击这里</button>
   <h1 id="h1"></h1>
  </body>
</html>

二发送POST请求示例

>xmlHttp.open()中需要改为参数POST

>设置ContentType：xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

>发送请求时指定请求体：xmlHttp.send();

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println(request.getParameter("b"));
		System.out.println("Hello AJAX!");
		response.getWriter().print("Hello AJAX!");
	}

<script type="text/javascript">
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多数浏览器
	} catch (e) {
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
}

function send() {
	var xmlHttp = createXMLHttpRequest();
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			var div = document.getElementById("div1");
			div.innerHTML = xmlHttp.responseText;
		}
	};
	xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send("b=B");
}
</script>
<h1>AJAX2</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>

❤示例：省市联动

Csdn-Cuco

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-AJAX

Ajax（Asynchronous Javascript And Xml）:异步交互的 Javascript和XML异步交互和同步交互：>同步交互则是当发送一个请求时，需要等待服务器响应结束以后才能继续发送一个请求。（当点击页面中的某个事件时会整个页面都刷新）>异步交互则是发送一个请求时，无需等待服务器响应就可以继续发送另一个请求。（使用Javascript语...
复制链接

扫一扫