Ajax（发送请求的不同方式）

可儿可爱

已于 2022-01-20 19:13:57 修改

阅读量2.2k

点赞数 4

文章标签： ajax json jquery

于 2022-01-20 19:04:49 首次发布

本文链接：https://blog.csdn.net/weixin_62520626/article/details/122600535

版权

1.Ajax异步请求

概念： ASynchronous JavaScript And XML   异步的JavaScript 和 XML
   1. 异步和同步：客户端和服务器端相互通信的基础上
       * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
       * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

       Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
       通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
       传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

       提升用户的体验

2.原生的Ajax之get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="sendAjax()">发送Get请求</button>
		
		<h1>每日一笑</h1>
		<ul id="myul">
			
		</ul>
	</body>
	<script type="text/javascript">
		function sendAjax() {
			//创建对象
			var xmlhttp = new XMLHttpRequest();
			//发送请求
			xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
			xmlhttp.send();
			//接收服务器的响应
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//接收后台响应的json字符串
					 var jsonStr=xmlhttp.responseText;
					 console.log(jsonStr);
					var jsonObj= JSON.parse(jsonStr);
					var ul= document.getElementById("myul");
					var arr=jsonObj.jokes;
					for(let i=0;i<arr.length;i++){
						ul.innerHTML+="<li>"+arr[i]+"</li>";
					}
				}
			}
		}
	</script>
</html>

3.原生的Ajax之post请求

1.需要设置请求头：
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2.发送时使用send()方法，把请求参数放到send方法中
xmlHttp.send('name=value&age=12'); //请求体body，用&分隔。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="sendAjax()">发送POST请求</button>
	</body>
	<script type="text/javascript">
		function sendAjax() {
			//创建对象
			var xmlhttp = new XMLHttpRequest();
			//发送请求
			xmlhttp.open("POST", "http://localhost:8080/login", true);
			
			//3.设置请求头信息
			 xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
			//post请求，参数写在send()方法里面
			xmlhttp.send("username=zhangsan&password=123456");
			//接收服务器的响应
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//接收后台响应的json字符串
					 var jsonStr=xmlhttp.responseText;
					 console.log(jsonStr);
					 var obj=JSON.parse(jsonStr);
					 alert(obj.msg);
					
				}
			}
		}
	</script>
</html>

4.jQuery发送Ajax之get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax请求</button>
	</body>
	<script type="text/javascript">
		$('button').click(function(){
			 $.ajax({
	                url:"https://autumnfish.cn/api/joke/list?num=10" , // 请求路径
	                type:"GET" , //请求方式
					//请求成功之后的回调
	                success:function (data) {
						//data后台返回的json数据，已经帮你转换成JSON对象
	                    alert(data.msg);
						//操作DOM ,把返回的数据解析出来，展示到页面上
						
						
	                },//响应成功后的回调函数
					//表示如果请求响应出现错误，会执行的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },
	                dataType:"json"//设置接受到的响应数据的格式 text 普通的文本字符串
	            });			
		})
	</script>
</html>

5.jQuery发送Ajax之post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax请求</button>
	</body>
	<script type="text/javascript">
		$('button').click(function() {
			$.ajax({
				url: "http://localhost:8080/login", // 请求路径
				type: "POST", //请求方式
				//请求参数  也可以这样写 data: "username=jack&age=23",
				//data: "username=jack&age=23",
				data: {
					"username": "zhangsan",
					"password": "123456"
				},
				//请求成功之后的回调
				success: function(data) {
					//data后台返回的json数据，已经帮你转换成JSON对象
					alert(data.msg);
					//操作DOM ,把返回的数据解析出来，展示到页面上

				}, //响应成功后的回调函数
				//表示如果请求响应出现错误，会执行的回调函数
				error: function() {
					alert("出错啦...")
				},
				dataType: "json" //设置接受到的响应数据的格式 text 普通的文本字符串
			});

		})
	</script>
</html>

6.JQuery简化的get和post方法

1.$.get()：发送get请求
           * 语法：$.get(url, [data], [callback], [type])
               * 参数：
                   * url：请求路径
                   * data：请求参数
                   * callback：回调函数
                   * type：响应结果的类型

2.. $.post()：发送post请求
           * 语法：$.post(url, [data], [callback], [type])
               * 参数：
                   * url：请求路径
                   * data：请求参数
                   * callback：回调函数
                   * type：响应结果的类型

3..直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
                   * url：请求路径
                   * data：请求参数
                   * callback：回调函数
       $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
                   alert("JSON Data: " + json.users[3].name);
       });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送Ajax GET请求</button>
		<button type="button">发送Ajax请求后台就是返回json数据</button>
		<button type="button">发送Ajax POST请求</button>
	</body>
	<script type="text/javascript">
		$('button').first().click(function() {
			/* * 语法：$.get(url, [data], [callback], [type])
			 * 参数：
			 * url：请求路径
			 * data：请求参数
			 * callback：回调函数
			 * type：响应结果的类型 */

			$.get('https://autumnfish.cn/api/joke/list', {
				"num": "10"
			}, function(data) {
				alert(data.msg);
			}, "json");
		})


		$('button').last().click(function() {
			/* * 语法：$.post(url, [data], [callback], [type])
			 * 参数：
			 * url：请求路径
			 * data：请求参数
			 * callback：回调函数
			 * type：响应结果的类型 */

			$.post('http://localhost:8080/login', {
				"username": "zhangsan",
				"password": "123456"
			}, function(data) {
				alert(data.msg);
			}, "json");
		})


		$('button').eq(1).click(function() {
			$.getJSON('http://localhost:8080/login', {
				"username": "zhangsan",
				"password": "123456"
			}, function(data) {
				alert(data.msg);
			});
		})
	</script>
</html>

后台：

package org.westos.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @Author: ShenMouMou
 * @Company: 西部开源教育科技有限公司
 * @Description: 简简单单，只为教育。
 * @Date: 2021/3/13 9:22
 */
@WebServlet(value = "/login", name = "LoginServlet")
public class LoginServlet extends HttpServlet {
    //处理post请求
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //* 后台信任来自任意服务器的请求，告诉浏览器你不要拦截
        //http://127.0.0.1:8848
        response.setHeader("Access-Control-Allow-Origin", "*");
        //获取前台提交的用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //查询数据库去比对
        //{"status":200,"msg":"ok","username":"张三"}
        //{"status":500,"msg":"no"}
        response.setContentType("application/json;charset=utf-8");
        if (username.equals("zhangsan") && password.equals("123456")) {
            response.getWriter().write("{\"status\":200,\"msg\":\"ok\",\"username\":\"张三\"}");
        } else {
            response.getWriter().write("{\"status\":500,\"msg\":\"no\"}");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

可儿可爱

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Ajax（发送请求的不同方式）

1.Ajax异步请求概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术通过在后台...
复制链接

扫一扫