Ajax 常用写法&原生代码

深碍√TFBOYSˉ_ 2022-02-14 18:44 309阅读 0赞

# 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);
    		}
    	
    	
    }