Ajax 常用写法&原生代码

最新推荐文章于 2021-03-25 16:25:13 发布

原创最新推荐文章于 2021-03-25 16:25:13 发布 · 499 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #常用格式

概念类同时被 3 个专栏收录

12 篇文章

订阅专栏

代码格式

5 篇文章

订阅专栏

介绍

3 篇文章

订阅专栏

这篇博客介绍了jQuery中的Ajax使用，包括$.get()和$.post()的基本语法，并强调了注意事项。同时，讲解了原生Ajax通过XMLHttpRequest对象实现的步骤，包括创建对象、设置请求、发送请求和处理响应。

jQuery ajax 介绍及基本语法

作为JavaScript一个类库，必然也会有响应的ajax的功能，jQuery认为原生ajax过于复杂，所以进行了一次封装（jQuery的二次封装）。

要求：
先到jQuery类库。也叫脚本文件。
语法：

$.ajax({
    url:””,
    data:{},
    type:””,
    dataType:””,
    success:function(){},
    error:function(){}
});

解析：
$.ajax 声明使用的jQuery ajax语法结构
url：请求的地址
data：需要发送的数据{} 里面书写json格式的数据 {名字：值,名字：值}
type：请求类型 get/post
dataType：声明返回数据（响应主体中）的类型/格式
success：执行成功之后调用的方法等同于 xhr.readyState = 4
error：执行不等于4 调用的方法。如果没有错误error可以省略

注意事项：
1、注意不要写错单词。
2、ajax严格区分大小写。
3、data为数据 date为日期不要写混。
4、冒号一定是英文的。
5、ajax中书写的每一项结尾都要跟随逗号，除最后一个
6、dataType T要大写。
7、$.ajax内的选项不区分顺序。

$.get();

语法结构:

$.get(
	”url”,
	{json数据},
	function(obj){},
	”返回数据格式”
);

特点：直接使用jQuery ajax中的get发送异步请求。虽然变得写法简单，但是没有error回调函数，出错调试比较考验功底。并且最重要的一条，顺序不能错。

第一个参数是url地址
第二个参数是发送的数据
第三个参数是成功回调的方法
第四个参数是返回值的类型

$.post();

$.post(
    ”url”,
    {json数据},
    function(obj){},
    ”返回数据格式”
);

特点：直接使用jQuery ajax中的post发送异步请求。虽然变得写法简单，但是没有error回调函数，出错调试比较考验功底。并且最重要的一条，顺序不能错。

原生AJAX需要借助 XMLHttpRequest 对象实现

原生ajax使用步骤：
1、创建一个XMLHttpRequest对象
2、调用open并传递请求方式、url、true
3、发送这个请求
4、定义获取返回状态的方法onreadystatechange
5、判断这个状态4为成功
6、从Response响应主体中获取返回的信息。

案例JSP代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点赞</title>

<script type="text/javascript">
	
	function point(){
		//第一步：定义XMLHttpRequest 对象
		var xhr = new XMLHttpRequest();
		//第二步：调用xhr的open方法为其传参数
		//第一个参数为请求类型,第二个参数URL地址
		xhr.open("get","PointServlet",true);
		//第三步：发送请求
		xhr.send();
		//第四步：定义获取请求状态的方法 01234 4为请求成功
		xhr.onreadystatechange = function(){
			//第五步：获取状态
			if(xhr.readyState==4){
				//第六步：获取后台返回的值
				var value = xhr.responseText;
				document.getElementById("msg").innerText = value;
			}
		}
	}

</script>

</head>
<body>
	
	<video src="avi/001.mp4" width="500px" 
autoplay="autoplay" controls="controls" ></video>
	<br>
	已遭到表扬：<span id="msg">0</span> 次。	
	<br>
	<input type="button" value="点赞" onclick="point()">
	
</body>
</html>

案例Java代码
/**
 * 实现点赞功能
 * @author IBM
 */
@WebServlet("/PointServlet")
public class PointServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;
	
	@Override
		protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			//ajax是在响应主体中获取数据的
			PrintWriter pw = response.getWriter();
			
			//将数据增加后存储到作用域中（服务器作用域）
			ServletContext context = this.getServletContext();
			int num = 0;
			//获取点赞的数量
			Object object = context.getAttribute("point");
			if(null == object) {
				//默认第一次点赞赋值为1
				context.setAttribute("point", 1);
				num = 1;
			}else {
				num =(int)object;
				//点赞+1
				num += 1;
				//将最新的值放在服务器的作用域中
				context.setAttribute("point", num);
			}
			System.out.println("被点赞的次数："+num);
			pw.print(num);
		}
	
	
}