前后端分离之Ajax入门

Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。

传统传统的Web应用模式和 ajax方式的比较：

传统的web应用：请求提交的时候,提交的是整个表单，服务端返回的时候，也是返回整个页面（刷新）
ajax方式：提交请求的时候只把某些数据提交（可以不用表单），服务端也只返回特定的数据
Ajax 应用的特点
- 不刷新整个页面,在页面内与服务端通迅
- 使用异步方式和服务端通迅
- 大部分交互都在页面内完成
Ajax 技术组成

XMLHttpRequest：用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，发送和获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容，所有的现代浏览器都支持这个对象。

javascript：一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现的不再是简单的静态信息，而是实时的内容更新。

HTML：超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言。

json(曾经使用XML)：将结构化数据表示为 JavaScript 对象的标准格式，是一种轻量级数据交换格式，而XML较为复杂

二、XMLHttpRequest 实现ajax

准备好服务端程序（tomcat）

@WebServlet("/UserServlet")
	public class UserServlet extends HttpServlet {
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");//设置结果集
		response.getWriter().print("这是服务端的数据:"+LocalDateTime.now());//向浏览器发送数据
	}	
}

客户端程序

创建 XMLHttpRequest对象, 直接new就可以
要指定回调函数
调用它的open方法,指明提交方式,提交地址,及数据
调用它的send方法,发送请求
在回调函数中进行相应的处理

<script src="js/jquery-1.8.0.js"></script>
<script>
    var xmlhttp;
    function test(){		
        //创建 XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();

        //要指定回调函数
        xmlhttp.onreadystatechange=mystatechange;

        //调用open方法
        xmlhttp.open("get","UserServlet",null);

        //调用send
        xmlhttp.send(null);	
    }

    function mystatechange(){
        //alert(xmlhttp.readyState);	   
        if(xmlhttp.readyState==4){
            if(xmlhttp.status==200){
                // alert(xmlhttp.responseText);
                document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
        	}
    	}
    }

</script>
<body>
    <button onclick="test()">测试</button>
	<label id="lbl_msg"></label>
</body>

三、使用jQuery实现ajax

四种实现方式：

load()方法
$.get()方法
$.post()方法
$.ajax()方法 - 常用

load()：请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。

<script src="js/jquery-1.8.0.js"></script>
<script>
    //load(url,data,callback)
    /*
        url：异步请求的地址
        data：异步请求的数据
        如果省略请求数据的话，当前的请求方式为GET
        如果发送请求数据的话，当前的请求方式为POST
        callback - 异步请求成功后的回调函数
    */
    $(function(){
        function mystatechange(){
            alert('异步请求成功')
        }

        function test(){
            $('button').load('UserServlet',mystatechange())
        }
	})

</script>

<body>
    <button onclick="test()">测试</button>
</body>

$.get()：使用get方式向服务器端发送异步请求


<script src="js/jquery-1.8.0.js"></script>

<script>
    //get(url,data,callback,type)
    /*
        url：异步请求的地址
        data：异步请求的数据
        callback：异步请求成功后的回调函数
        type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
    */
    $(function(){
        $("button").click(function(){
            $.get("UserServlet",{userName:"admin",password:"123"}, function(data){
            	alert('异步请求成功');
            });  	
        });  	   
    });	
</script>

<body>
    <button>测试</button>
</body>

$.post()：使用POST方式向服务器端发送异步请求

<script src="js/jquery-1.8.0.js"></script>

<script>
        //post(url,data,callback,type)
        /*
            url：异步请求的地址
            data：异步请求的数据
            callback：异步请求成功后的回调函数
            type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
        */	
    $(function(){
        $("button").click(function(){
            $.post("UserServlet",{userName:"admin",password:"123"}, function(data){
            	alert('异步请求成功');
            });  	
        });  	   
    });	
</script>

<body>
    <button>测试</button>
</body>

$.ajax()：是jQuery中最为底层的Ajax方法

<script>
    $(function(){
        $("button").click(function(){
         	$.ajax({
                 type:"post",
                 url:"UserServlet",
                 data:{userName:"admin",password:"123"},
                 success: function(data){
                     alert('异步请求成功');
                 }
         	});  	
        });   
	});
</script>
<body>
    <button>测试</button>
</body>

四、$.ajax([options]) 详解

$(function(){
    $("button").click(function(){
        $.ajax({
            type:"post",   //请求的提交方式,可以是post和get, 大小写不敏感
            url:"UserServlet",  //请求的地址
            data:{userName:"admin",password:"123"},  //提交的数据,前面的key可以用双引号引起来也可以不引
            success: function(data){   //回调函数,data 代表服务端返回的数据,data这个名字不是固定的,叫什么都可以
            	alert(data);
            }
        });
    });
});

注：当以post方式提交请求的时候,放在url后面的参数,是可以用的

比如下面的表单:

<form action="UserServlet?flag=add"  method="post">
    <input name="userName">
    <input name="password">
    <submit >
</form>

请求提交以后,服务端能收到 flag, userName,password

但当请求以get的方式提交的时候,放在url后面的参数会被表单中其他的数据覆盖

$.ajax() 其他参数：

async
cache
dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
contentType //发给服务端的数据,是什么格式

async 是否启用异步,默认是true

$(function(){
    $("button").click(function(){
        alert("a");

        $.ajax({
            type:"post",
            url:"UserServlet",
            data:{userName:"admin",password:"123"},
            success: function(data){
            	alert("b");
            }
        });

        alert("c");
    });
});
/*
	以上代码的执行顺序有可能是a, b, c；也有可能是a, c, b
	原因：默认情况下，async的取值是true，即使用异步的方式提交
	想要同步执行，需要设置：async : false
*/

cache 是否缓存

默认值：true，当dataType为script时，默认为false，设置为false将不会从浏览器缓存中加载请求信息

当cache 为true时，浏览器会优先从缓存中取数据，若缓存中存在则直接取出，若不存在会向服务端发送请求。

优点：从缓存中取数据，减少了服务器端的压力

缺点：无法实时更新。如需要获得请求服务器的次数时，客户端完成获取次数，服务器段完成更新次数，会从缓存中直接取数据，不会请求服务器执行增加次数操作
dataType 服务端传回来的数据,是什么类型
- xml：返回XML文档。
- html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
- script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
- json：返回JSON数据。
- jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
- text：返回纯文本字符串。
contentType 发给服务端的数据,是什么格式

默认值：application/x-www-form-urlencoded。这种格式的特点：name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如：url?name=zhangsan&password=123

注：这种形式是没有办法将复杂的 JSON 组织成键值对形式。

success 成功以后调用
error 出错的时候调用

complete 不管成功,失败,都调用

$(function(){
    $("button").click(function(){
        $.ajax({
            type:"post",
            url:"UserServlet?flag=visit",
            success:function(data){
            	alert("success调用了");
            },
            error:function(e){
            	alert("error 调用了"+e);
            },
            complete:function(){
            	alert("complete 调用了");
            }
		/*
            总结
                success 在服务端正确返回的情况下调用
                complete 总要调用
                error 在出错的时候会调用
                    (1) 客户端请求写错了,会引起error的调用
                    (2) 服务端出错了,也会引起error的调用
		*/
        });
    });
});
<body>
	<button>测试</button>
</body

前后端分离之Ajax入门 - 烫烫烫烫烫烫烫

前后端分离之Ajax入门

传统传统的Web应用模式和 ajax方式的比较：

Ajax 应用的特点

Ajax 技术组成

二、XMLHttpRequest 实现ajax

三、使用jQuery实现ajax

四、$.ajax([options]) 详解

Recommend

风控规则引擎（一）：Java 动态脚本 - 双鬼带单

苹果公司增加在华投资深圳新设应用研究实验室

Chicago battles measles with calls for vaccination—in contrast with Florida

华硕升级 Expertbook B9 OLED 商务本：搭载英特尔 Series 1 芯片

The Ottawa Senators Logo History, Colors, Font, And Meaning

巨头玩家大混战，AI搜索迎来全面变革

中科国生再获近亿元融资

Tether's USDT Debuts on Celo Blockchain - FinTech Ranking

浦创智能完成数千万元融资

超千款AWE科技新品天猫首发可折叠电视、挥掌即开智能锁都来了-品玩

About Joyk