Ajax详解！！！

其他 2020-02-13 12:12:02 阅读次数: 0

  

  今天说点有意思的，之前jquery没有在提到，不过会发一个jquery文档让大家学习的，里面就有关于今天的主角Ajax的方法使用了，比原生的Ajax好用的多。大家用过Ajax吗？就比如说买东西的购物车数量的加减？不过没关系，今天就带大家认识一下Ajax。

1.那么什么是AJAX?

  AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
  AJAX的实际意义是，不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。
  AJAX也可以简单的理解为通过JS向服务器发送请求。
  AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。

同步处理与异步处理:
同步处理：

  AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

异步处理：

  而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

  

2.Ajax的常用API

2.1 请求对象

  向服务器发送请求，毫无疑问需要使用Http协议，也就是我们需要通过JS来向服务器发送一个请求报文。这里我们来回顾一下请求报文的格式：

  • 请求首行
  • 请求头
  • 空行
  • 请求体

  这是一个请求报文的格式，那我们如果手动的创建这么一个报文格式来发送给服务器想必是非常麻烦呢，于是浏览器为我们提供了一个XMLHttpRequest对象。

  

2.2 XMLHttpRequest

  XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。

  XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

  这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

  获取XMLHttpRequest对象：由于浏览器之间的差异，不同浏览器中获取XMLHttpRequest的方式不同，但总的来说一共有三种方式：

  • 方式一：var xhr = new XMLHttpRequest()：目前主流浏览器都支持
  • 方式二：var xhr = new ActiveXObject(“Msxml2.XMLHTTP”)：IE6支持的方式
  • 方式三：var xhr = new ActiveXObject(“Microsoft.XMLHTTP”)：IE5.5以下支持的方式

根据三种不同的方式编写通用方法来获取XMLHttpRequest对象：

//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
	var xhr;
	try{
		//大部分浏览器都支持
		xhr = new XMLHttpRequest();
	}catch(e){
		try{
			//如果不支持，在这里捕获异常并且采用IE6支持的方式
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			//如果还不支持，在这里捕获异常并采用IE5支持的方式
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xhr;
}

​​ 
XMLHttpRequest对象的方法：

open(method,url,async)：用于设置请求的基本信息，接收三个参数。

  • 参数一：method

    接收一个字符串，表明请求的方法：get或post。

  • 参数二：url

    请求的地址，接收一个字符串。

  • 参数三：Assync

    发送的请求是否为异步请求，接收一个布尔值。① true 是异步请求 ② false 不是异步请求（同步请求）

send(string)：用于将请求发送给服务器，可以接收一个参数。

  • string参数

    该参数只在发送post请求时需要。用于设置请求体。

setRequestHeader(header,value)：用于设置请求头。

  • 参数一：header参数

    字符串类型，要设置的请求头的名字。

  • 参数二：value参数

    字符串类型，要设置的请求头的值。

  
XMLHttpRequest对象的属性：

readyState：描述XMLHttpRequest的状态。
一共有五种状态分别对应了五个数字：

  • 0 ：请求尚未初始化，open()尚未被调用
  • 1 ：服务器连接已建立，send()尚未被调用
  • 2 ：请求已接收，服务器尚未响应
  • 3 ：请求已处理，正在接收服务器发送的响应
  • 4 ：请求已处理完毕，且响应已就绪。

status：

请求的响应码：

  • 200 响应成功
  • 404 页面为找到
  • 500 服务器内部错误
    … … … …

onreadystatechange：

  • 该属性需要指向一个函数
  • 该函数会在readyState属性发生改变时被调用

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。
  

示例代码：

使用AJAX发送GET请求:

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
	if(xhr.readyState == 4){
		//且状态码为200时
		if(xhr.status == 200){
			//接收响应信息（文本形式）
			var text = xhr.responseText;
			//弹出消息
	      alert(text);
		}
	};
};

这是一个最简单的AJAX代码，向AjaxServlet发送了一个get请求，并且在页面中输出响应的内容。

使用AJAX发送POST请求：

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){
	//且状态码为200时
	if(xhr.status == 200){
		//接收响应信息（文本形式）
		var text = xhr.responseText;
		//弹出消息
		alert(text);
	}
};

  

3.先看一下javaScript原生Ajax请求

原生的Ajax请求，包括如下的步骤：

  1. 我们首先要创建XMLHttpRequest 对象

  2. 调用open方法设置请求参数

  3. 调用send方法发送请求

  4. 在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

具体操作：

创建一个html页面，发起请求。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
				var xhr = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
				xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xhr.onreadystatechange = function() {
					// 判断请求完成，并且成功
					if (xhr.readyState == 4 && xhr.status == 200) {
						document.getElementById("div01").innerHTML = xhr.responseText;
					} 
				}
// 				3、调用send方法发送请求
				xhr.send();
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

创建一个AjaxServlet程序接收请求：

import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;

	protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("ajax请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// Person类id使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}

}

BaseServlet类：

import java.io.IOException;
import java.lang.reflect.Method;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BaseServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		//1、获取请求参数
		String type = request.getParameter("action");
		//2、获取类
		Class<? extends BaseServlet> clazz = this.getClass();
		try {
			//获取对象方法
			Method method = this.getClass().getDeclaredMethod(type, HttpServletRequest.class,HttpServletResponse.class);
			//调用对象方法
			method.invoke(this,request,response);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req,resp);
	}
}

在web.xml文件中的配置：

 <servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.javaWeb.servlet.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/ajaxServlet</url-pattern>
  </servlet-mapping>

测试效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-faaB9aYb-1575204220029)(尚硅谷_张春胜_Ajax与JSON.assets/1558933706621.png)]
  通过上面的代码我们发现。编写原生的JavaScript我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。那我们工作之后。怎么处理Ajax请求呢。就比如Jquery框架。它就有很好的Ajax解决方案。

  

4.使用JQuery的Ajax请求

四个Ajax请求方法：

  • $.ajax方法
  • $.get方法
  • $.post方法
  • $.getJSON方法

一个表单序列化方法：serialize()表单序列化方法。

如何使用上面的五个方法：在JQuery中和Ajax请求有关的方法有四个，具体如下：

方法一： $.ajax请求参数

​  url： 请求的地址

​​  type : 请求的方式 get或post

​ ​ data : 请求的参数 string或json

​ ​ success: 成功的回调函数

​​  dataType: 返回的数据类型 常用json或text
  

注意： 下面的方法必须遵守参数的顺序

方法二、三：$.get请求和$.post请求

​​​  url:请求的URL地址

​ ​​ data:待发送 Key/value 参数。

​ ​​ callback:载入成功时回调函数。

​ ​​ type:返回内容格式，xml, html, script, json, text。

  
方法四：Jquery的$.getJSON

​​​  url:待载入页面的URL地址

​​​  data:待发送 Key/value 参数。

​​​  callback:载入成功时回调函数。

  
表单的序列化：

  • serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接，省去我们很多不必要的工作。

由于$.get、$.post和$.getJSON这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

Jquery_Ajax_request.html的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url : "ajaxServlet", // 请求地址
						error:function(){   // 请求失败回调
							alert("请求失败");
						},
						success:function(data){ // 请求成功回调
							alert( data );
						},
						type:"POST",				// 请求的方式
						dataType:"json",			// 返回的数据类型为json对象
						data:{						// 请求的参数
							action:"jqueryAjax",
							a:10,
							date: new Date()
						}
					});
				});

				// ajax--get请求
				$("#getBtn").click(function(){
					$.get(
						"ajaxServlet",{
							action:"jqueryGet",
							a:11,
							date:new Date()
						},function(data){alert(data);},"json"
					);
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.post(
						"ajaxServlet", // 请求路径
						{				// 请求参数
							action:"jqueryPost",
							a:12,
							date:new Date()
						},
						function(data){ alert( data ) },  // 成功的回调函数
						"text"							// 返回的数据类型
					);
				});

				// ajax--getJson请求
				$("#getJsonBtn").click(function(){
					// 调用
					$.getJSON(
						"ajaxServlet", 		// 请求路径
						{					// 请求参数
							action:"jqueryGetJSON",
							a:13,
							date:new Date()
						}, 
						function(data){ alert( data ) }  // 成功的回调函数		
					);
				});

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					var data = $("#form01").serialize();
					alert(data);
				});
				
			});
		</script>
	</head>
	<body>
		<div>
			<button id="ajaxBtn">$.ajax请求</button>
			<button id="getBtn">$.get请求</button>
			<button id="postBtn">$.post请求</button>
			<button id="getJsonBtn">$.getJSON请求</button>
		</div>
		<br/><br/>
		<form id="form01" >
			用户名：<input name="username" type="text" /><br/>
			密码：<input name="password" type="password" /><br/>
			下拉单选：<select name="single">
			  	<option value="Single">Single</option>
			  	<option value="Single2">Single2</option>
			</select><br/>
		  	下拉多选：
		  	<select name="multiple" multiple="multiple">
		    	<option selected="selected" value="Multiple">Multiple</option>
		    	<option value="Multiple2">Multiple2</option>
		    	<option selected="selected" value="Multiple3">Multiple3</option>
		  	</select><br/>
		  	复选：
		 	<input type="checkbox" name="check" value="check1"/> check1
		 	<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
		 	单选：
		 	<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
		 	<input type="radio" name="radio" value="radio2"/> radio2<br/>
		 	<input id="submit" type="submit" />
		</form>			
	</body>
</html>

AjaxServlet的代码如下：

import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;

	protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("ajax请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}
	
	protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("jqueryAjax请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}
	
	protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("jqueryGet请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}
	
	protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("jqueryPost请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}
	
	protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("jqueryGetJSON请求过来了 a--" + request.getParameter("a"));
		Random random = new Random(System.currentTimeMillis());
		// 使用随机数，可以让客户端看到变化
		response.getWriter().write(
				new Gson().toJson(new Person(random.nextInt(100), "jack")));
	}

}

请求结果如下：
在这里插入图片描述
以及后台的输出以及获取的参数结果如下：
在这里插入图片描述

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接：
在这里插入图片描述

斗 鹰
发布了166 篇原创文章 · 获赞 585 · 访问量 6万+
私信 关注

猜你喜欢

转载自blog.csdn.net/zxdspaopao/article/details/103339211
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022