web-22

什么是AJAX
概述:Ajax全名: Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
Ajax实际上是下面这几种技术的融合:

(1)XHTML和CSS的基于标准的表示技术

(2)DOM进行动态显示和交互

(3)XML和XSLT进行数据交换和处理

(4)XMLHttpRequest进行异步数据检索

(5)Javascript将以上技术融合在一起

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

性能会有所降低(一点内容,刷新整个页面!)

用户的操作页面会中断(整个页面被刷新了)

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

优缺点
优点

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

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

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

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

缺点

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

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

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

 在哪里可以用到?
页面上拉加载更多数据

列表数据无刷新分页

表单项离开焦点数据验证

搜索框提示文字下拉列表

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 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。
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();

————————————————
版权声明:本文为CSDN博主「阿菜酱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_65208075/article/details/124578121

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值