Ajax总结

最新推荐文章于 2022-05-14 21:50:42 发布

Java中的战斗机

最新推荐文章于 2022-05-14 21:50:42 发布

阅读量89

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_44165280/article/details/110872342

版权

1.第一个简单的ajax程序

Ajax和 JSON

简介

Ajax 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。

C/S

增强B/S的体验性

B/S：未来的主流，并且会爆发式的持续增长;

产品链：H5+网页+客户端+手机端（安卓和ios）+小程序

1.首先创建一个html页面

<html>
 <head>
   <title>$ajax$</title>
  <!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
   </script>
 </head>
 <script src="../statics/js/jquery-3.4.1.js"></script>
 <body>
       <div id="app" οnclick="getAjax()">点击获得数据 懂？</div>
	        <div id="app" οnclick="getAjax2()">点击获得数据2</div>
	   
	   
 </body>
 <script type="text/javascript">
	  
	 function getAjax(){
		 var name = "name";
		 $.ajax({
		  		  type:"GET",
		  		  data:name,
		  		  url:`http://localhost:8086/ajax/a1/${name}`,
		  		  success:function(res){
		  			  debugger;
		  			   console.log(res);
					    window.alert(res);
			
		  		  }
		  		  
		  		
		 }) ;
	 }
	 
	 function getAjax2(){
	 		 let name = "name";
	 		 $.ajax({
				     
	 		  		  type:"GET",
					  url: "http://localhost:8086/ajax/a2?name="+name,
	 		  		   
	 		  		  
	 		  		  success:function(res){
	 		  			  debugger;
	 		  			   console.log(res);
	 					    window.alert(res);
	 			
	 		  		  }
	 		  		  
	 		  		
	 		 }) ;
	 }
 	 
 	 
 	 
 </script>
</html>
在这里插入代码片

2.编辑controller

package com.liang.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;

@Controller
@RequestMapping("/ajax")
@CrossOrigin
public class AjaxController {

    //第一种方式，服务器要返回一个字符串，直接使用response
    @GetMapping("/a1/{name}")
    @ResponseBody
    public String ajax1( @PathVariable  String name) throws IOException {
//        if ("admin".equals(name)){
//            response.getWriter().print("true");
//        }else{
//            response.getWriter().print("false");
//        }
        return  "ok  lwh";
    }

    //第一种方式，服务器要返回一个字符串，直接使用response
    @GetMapping("/a2")
    @ResponseBody
    public String ajax2(   String name) throws IOException {
//        if ("admin".equals(name)){
//            response.getWriter().print("true");
//        }else{
//            response.getWriter().print("false");
//        }
        return  "ok";
    }

}

在这里插入图片描述
3.伪造ajax小案例额

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪造ajax</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
    };

    function LoadPage(){
        var targetUrl =  document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>

<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

4 .最简单的api

package com.liang.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class IndexController {
    @RequestMapping("aaa")
    public String aaa(){
        return "获取成功";
    }
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪造ajax</title>
</head>
<body>

<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:function () {
         let url = "aaa";
         axios.get(url).
         then(function (res) {
             this.vue.msg = res.data;
         })
        }
    })

</script>

<div id="app">
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>

<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>