Ajax(发送请求的不同方式)

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值