JavaWEB-22（AJAX快速入门）

最新推荐文章于 2023-07-17 15:01:55 发布

huangᴸ

最新推荐文章于 2023-07-17 15:01:55 发布

阅读量442

点赞数

分类专栏： java web 文章标签： java web

本文链接：https://blog.csdn.net/m0_63579794/article/details/124450978

版权

java 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

web

22 篇文章 1 订阅

订阅专栏

一.什么是Ajax

1.1 概述:Ajax全名: Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML

Ajax实际上是下面这几种技术的融合:

(1)XHTML和CSS的基于标准的表示技术
(2)DOM进行动态显示和交互
(3)XML和XSLT进行数据交换和处理
(4)XMLHttpRequest进行异步数据检索
(5)Javascript将以上技术融合在一起

1.2 为什么需要使用Ajax技术?

在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。

性能会有所降低(一点内容，刷新整个页面！)
用户的操作页面会中断(整个页面被刷新了)

Ajax就是能够做到局部刷新！

1.3 特点

优点

（1）不需要插件支持（一般浏览器且默认开启JavaScript即可）

（2）用户体验极佳（不刷新页面即可获取可更新的数据）

（3）提升WEB程序的性能（在传递数据方面做到按需发送，不必整体提交）

（4）减轻服务器和带宽的负担（将服务器的一些操作转移到移动客户端）

缺点

（1）前进、后退的功能被破坏（因为AJAX永远在当前页，不会记录前后页面）

（2）搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）

（3）不同版本的浏览器对XMLHttpRequest对象支持度不足（比如IE5之前）

1.4 在哪里可以用到

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

二.jQuery的Ajax

原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求
后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些

$.ajax({          
         url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});

<1> url 默认为当前页地址
<2> dataType 可用类型：
（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）
    xml：返回XML文档，可用JQuery处理。
    html：返回纯文本HTML信息。
    script：返回纯文本JavaScript代码。
    json：返回json数据。
    jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
    text：返回纯文本字符串。
    说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道jsonp可以跨域读取数据，有待进一步学习~
<3> type 可用类型主要为post和get两种（默认为get）
    get：从指定的资源请求数据（从服务器读取数据）
    post：向指定的资源提交要被处理的数据（向服务器提交数据）
<4> async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。
    异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。
    同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

    说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式
<5> data 请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(res)显示数据情况。
<6> success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。

jQuery之Ajax方法的属性大全

post方式 格式

$.post(url, [data], [callback], [type]);

参数1：url，请求路径
参数2：data，请求参数
参数3：callback，回调函数
参数4：type，返回内容格式，默认的是text,xml, html, script, json, text, _default。

get方式 格式

$.get(url, [data], [callback], [type]);

第一个参数：请求的路径 如：
    ${pageContext.request.contextPath}/Servlet1
第二个参数：请求的参数 格式：// JSON数据格式
    {key1:value1,key2:value2}
第三个参数：回调函数 格式：
    function(data){
        alert(data);    
    }
第四个参数：返回内容 格式：xml, html, script, json, text, _default。

服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象
服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。
$.get() 以get请求方式发送ajax除了请求方式不同，使用方式与$.post()完全一致。
.get()和.get()和.post()两种方式书写格式一模一样，只需要修改.get()为.get()为.post()，其余地方不需要改动！
它们的请求方式不同$.get()为get请求，$.post()为post请求。这两种请求方式在处理编码方式上不一样，建议优先使用$.post()请求方式。

三.案例

【案例1】用户注册  失去焦点时，判断是否成功。
1.编写html代码
<input type = "text" id = "sname" onblur = "myf(this.value);" /><span id = "sid"></span><br/>
<input type = "text" id = "spwd" />
2.引入jQuery库，编写js代码
function myf(sname){
        //alert(sname);
        
        $.ajax({
            type:"post",
            dataType:"text",
            url:"hello",
            data:"sname="+sname,
            success:function(data){
                $("#sid").html(data);
            }
        });
        
    }
3.编写servlet
request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        
        String sname = request.getParameter("sname");
        
        String str ="ok";
        if("admin".equals(sname)) {
            str = "no";
        }
        
        PrintWriter out = response.getWriter();
        out.print(str);
        out.flush();
        out.close();