Ajax技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40084390/article/details/94021493

Ajax介绍

1.Ajax被认为是(Asynchronous JavaScript and XML的缩写）。
2.现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax
.eg:谷歌浏览器搜索关键字时,随着关键字输入的增多,搜索内容在变化,而界面并没有刷新.—谷歌地图,个人信息注册的验证
3.最早使用Ajax的是XHR(XMLHttpRequest).
XHR 是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API,是一个浏览器的接口。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求（从后台服务器访问数据）。该 API 是大多数 Ajax 交互的核心，也是现代 Web 开发的一项基本技术。
4.Ajax与XHR关系
一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

Ajax优缺点

Ajax应用程序的优势在于：
1.通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
Ajax的缺陷
1.由 Javascript 和 AJAX 引擎导致的浏览器的兼容问题
2.页面局部刷新，导致后退等功能失效。
3.对流媒体的支持没有FLASH、Java Applet好。
4.一些手持设备（如手机、PDA等）支持性差

Ajax与传统web模型对比

1.在Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复
2.而在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面,只是局部的刷新.因此出现了

Ajax为什么不是一项新技术:它由多种技术融合而来

1.Ajax与服务器端语言无关,只是负责发送和相应请求而已.服务器端语言：服务器需要具备向浏览器发送特定信息的能力。
2.XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择,已经被淘汰了. 首选数据格式：JSON
3.XHTML（eXtended Hypertext Markup Language,扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；
4.DOM（Document Object Model,文档对象模型）实现动态显示和交互；
5.使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
6.使用JavaScript绑定和处理所有数据

Ajax的使用流程

1.XMLHTTPReqeust对象的创建
2.打开与服务器的连接,并设置连接信息
当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：
open(method, url, async)：
method：请求方式，通常为GET或POST；
url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
async：这个参数可以不给，默认值为true，表示异步请求；
3.发送数据
send(data)：
open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
data：将要传递给服务器的字符串。
若选用的是 GET 请求，则不会发送任何数据，给 send 方法传递 null 即可：request.send(null);
当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
一定在发送请求 send() 之前注册 readystatechange （不管同步或者异步）
通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

4.接收响应数据
5.写服务器端的响应

使用的代码

    //根据所使用的电脑版本,创建正确的XHR
      function createXMLHttpRequest() {
        var xmlreq = false;
        if(window.ActiveXObject) {
          /*for IE6, IE5*/
          xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
        } else if(window.XMLHttpRequest) {
          /*for IE7+, Firefox, Chrome, Opera, Safari*/
          xmlreq = new XMLHttpRequest();
        }
        return xmlreq;
      }
      //创建
      var xhr = createXMLHttpRequest();
      //打开连接信息
      xhr.open("get","/ajax.do?id=1");
      //发送信息
      xhr.send(null);
//接收响应的函数
    function sendReq() {
            if (xhr.readyState == 4){
              if(xhr.status == 200){
                document.getElementById("d").innerHTML = "<h1>"+xhr.responseText+"</h1>";
              }
            }
          }

显示的body界面

</div>

<a href="/ajax.do">request</a>

使用的servlet
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        out.print("hello ajax");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}