ajax—初学第一课

最新推荐文章于 2022-04-13 09:23:22 发布

一曦的后花园

最新推荐文章于 2022-04-13 09:23:22 发布

阅读量146

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_38986609/article/details/82869495

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、基本理解：

1.什么是ajax?

2.request、session、application区别：

request:解决一次请求内的数据共享；

session:不同请求内的数据共享；

application:不同用户的不同请求的数据共享；

3.通过浏览器发送请求的方式：

① form表单

② a标签

③window.location.herf

4.ajax理解：

①ajax:需要把下一次的响应内容在当前的响应内容上直接显示出来，而不是刷新；

②不改变浏览器地址信息，相当于调用浏览器内部获取发请求的机制，直接给后台服务器发请求(XmlHttpRequest:ajax引擎对象
发送请求)，当浏览器接收到这样一个请求的响应内容时，会将该响应响应给当前正在执行的js，不会把整个页面重新刷新掉。

③ajax引擎对象：让我们在当前页面正在运行的js来发送请求，该请求就属于当前页面的一部分（因为js隶属于当前页面），当请求来的时候必须返还给发请求的js函数,js函数将拿到的结果再放在当前页面内。

④ajax:当前jsp页面的一个js函数来发送请求，接收到的响应内容也会隶属于当前的js，本质上就是js操作文档结构，只不过是数据是动态的。

⑤ajax这门技术的诞生是为了解决在当前页面内，显示其他的响应内容。而避免响应内容被重复的响应。

二、使用ajax

1. 使用ajax的基本内容

2. ajax的基本使用代码：

①first.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax first</title>
<script type="text/javascript">
	function getData(){
		//1.创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){//支持火狐
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){//支持低版本的IE
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		
		//2.复写onreadystatechange()函数
		ajax.onreadystatechange=function(){//函数声明，并非调用
			
			//2.1.判断ajax状态码
			if(ajax.readyState==4){
				
				//2.1.1.判断响应状态码
				if(ajax.status==200){
					
					//①获取响应内容
					var result=ajax.responseText;
					
					//②获取元素对象
					var showDiv=document.getElementById("show-div");
					showDiv.innerHTML=result;
				}else if(ajax.status==404){
					var showDiv=document.getElementById("show-div");
					showDiv.innerHTML="请求资源不存在";
				}else if(ajax.status==500){
					var showDiv=document.getElementById("show-div");
					showDiv.innerHTML="服务器繁忙";
				}	
			}else{
				/* 当响应结果还没有过来时，使用动态图片刷新界面来显示	 */			
				var showDiv=document.getElementById("show-div");
				showDiv.innerHTML="<img  src='img/refresh.gif' />";			
			}

		}
		
		//4.发送请求
		    /* 
			异步和同步：
			open()参数：get:访问方式；  ajax:访问路径，访问的相对路径为/ajax
			ajax.open("get","ajax"); --默认执行方式是异步
		    ajax.open("get","ajax",false);--同步
		    ajax.open("get","ajax",true);--异步
		    */
		    /* 
			get方式和post方式：
			   ①get请求
				ajax.open("get","ajax?name=一曦&pwd=123");--中文可能乱码	
				ajax.send(null);--get请求，请求参数在url后面，故参数为null
			   ②post请求
			    ajax.open("post","ajax");
				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				ajax.send("name=一曦&pwd=123");--post请求参数
				ajax.open("post","ajax");
		    */
		
		ajax.open("post","ajax");
		/*application/x-www-form-urlencoded：告诉服务器用form表单提，
		   提取方式是键值对，服务器可知道做什么怎么做的问题，
		   如果不加，则服务器会把post参数当成字符串，而不是键值对，
		   当post请求告诉服务器，请求头里面的内容是键值对时，服务器会按照键值对将参数切开 ；
		  如果不写，服务器就不会知道该如何去解析请求。
		 */
		ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		ajax.send("name=一曦&pwd=123");
		alert("判断同步or异步");
		
		
	}
</script>
<style>
	#show-div{
		border:1px solid;
		width:200px;
		height:100px;
	}
</style>
</head>
<body>
	<h3>欢迎来到一曦的后花园</h3>
	<hr>
	<input type="button" value="测试"  onclick="getData()">
	<div id="show-div">
	
	</div>
	<br><hr>
	
</body>
</html>

②servlet代码

package com.yixi.servlet;

import java.io.IOException;

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

//利用注解配置访问该servlet的路径
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res) throws IOException {
		//1.设置请求编码格式
		req.setCharacterEncoding("utf-8");

		//2.设置响应编码格式
		res.setCharacterEncoding("utf-8");
		res.setContentType("text/html;charset=utf-8");
		try {
		  /*控制响应请求的线程，休眠,因为是异步请求的愿意，
			故而响应操作和休眠操作不能在一起写，必须有前有后才能正确模拟休眠状态*/
			Thread.sleep(1000);
		} catch (InterruptedException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
		
		
		//3.获取请求信息
		String name=req.getParameter("name");
		String pwd=req.getParameter("pwd");
		System.out.println("name:"+name+"-pwd:"+pwd+"-method:"+req.getMethod());
		
		
		//4.处理请求信息
		
		//5.响应请求信息
		
		res.getWriter().write("春风十里，时光正好");

		
	}
}

③运行结果