前端技术——Ajax

Ajax

一、Ajax

(Asynchronous JavaScript and XML) 异步JavaScript和XML

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

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

作用：客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术。

优点：

1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

二、XMLHttpRequest

XMLHttpRequest对象是Ajax中最重要的一个对象。使用Ajax更多的是编写客户端代码，而不是服务端的代码。

原理：当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器，XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

常用方法：

open()：该方法创建http请求
- 第一个参数是指定提交方式(post、get)
- 第二个参数是指定要提交的地址是哪
- 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
- 第四和第五参数在http认证的时候会用到。是可选的
setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）
- xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send(content)：发送请求给服务器
- 如果是get方式，并不需要填写参数，或填写null
- 如果是post方式，把要提交的参数写上去

过程： 01234

三、第一个案例：

Ajax的实现流程是怎样的？

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

<input type="text" id="username">
<input type="button" onclick="checkUsername()" value="检测用户名是否合法">
<div id="result">

</div>

<script type="text/javascript">

    var httpRequest;
    function checkUsername() {

        if(window.XMLHttpRequest) {

            //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
            httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) {

            //在IE6以下的版本
            httpRequest = new ActiveXObject();
        }


        //创建http请求
        httpRequest.open("POST", "Servlet1", true);

        //因为我使用的是post方式，所以需要设置消息头
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //指定回调函数
        httpRequest.onreadystatechange = response22;

        //得到文本框的数据
        var name = document.getElementById("username").value;

        //发送http请求，把要检测的用户名传递进去
        httpRequest.send("username=" + name);

    }

    function response22() {

        //判断请求状态码是否是4【数据接收完成】
        if(httpRequest.readyState==4) {

            //再判断状态码是否为200【200是成功的】
            if(httpRequest.status==200) {

                //得到服务端返回的文本数据
                var text = httpRequest.responseText;

                //把服务端返回的数据写在div上
                var div = document.getElementById("result");
                div.innerText = text;
            }

        }
    }
</script>

四、应用：

1.XMLHttpRequest解决中文乱码

2.XMLHttpRequest解决缓存问题

3.XMLHttpRequest跨域访问

4.AJAX二级下拉联动案例【XML版】

5.AJAX二级下拉联动案例【JSON版】

五、AJAX跨域问题

1.当我们发送XMLHttpRequest请求的时候，如果请求的是别的域(主机域名、端口)不同时，那么就会产生跨域问题(客户端无法获取服务端返回的数据)

2.解决方法：

（a）JSONP解决跨域

1.JSONP是一种解决跨域问题的一种协议

（b）CORS解决跨域问题

（c）Spring框架解决

如果使用的是Spring框架的话，那就只需要一个注解就能够解决跨域的问题了：@CrossOrigin

六、总结

posted @ 2019-06-30 14:17 StingLon 阅读(839) 评论(0) 收藏举报

刷新页面返回顶部

StingLon