java_web 快速入门之第二十章 ajax+json实现自动补全

一：Ajax的基本概念

           Ajax 是一种客户端技术，无论使用何种服务器技术都可以使用 Ajax；Ajax 是 XMLHttpRequest 对象和 Javascript、XML、CSS、DOM 等多种技术的组合。
           XMLHttpRequest 对象为新技术，是 Ajax 技术中的核心部分，是一个具有应用程序接口的 Javascript 对象，能使用 HTTP 连接服务器；由微软公司在 1999 年提出。
            XML 即 eXtensible Markup Language，翻译为中文为：可拓展标记语言，用于描述结构化数据，适用于不同应用程序之间的数据交换，因此 XMLHttpRequest 对象与服务器交互的数据采用该格式 

     是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验

同步与异步的区别：

        同步请求：当一个页面中的内容发生改变时，需要全部刷新。当一个请求发起时，其他的请求不能发起

异步请求，当一个页面中的内容发生改变时，可以局部刷新。当一个请求发起时，其他的请求也能发起作用局部刷新页面发起异步请求

二：ajax的诞生背景

       传统网站中存在大量问题，如

• 网速慢的情况下，页面加载时间长，用户只能等待
• 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

        传统项目前后端不分离，用户触发一个http请求服务器，然后服务器接收之后，在做出响应到用户，并且返回一个新的页面，也就是说交互都是通过页面刷新或页面跳转来实现。

    这样的方式对于用户体验来将其实并不友好，少量的数据更新也会引发整个页面重新请求，浪费了很大一部分资源。
    
    因此，我们希望有一种更好的方式，可以不用重新请求整个页面而达到更新部分数据的效果。
    
    2005年，AJAX（Asynchronous Javascript And XML）横空出世，给前端行业带来了巨大的变化与革新。

 

三：为什么需要使用AJAX技术？

      在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。
        性能会有所降低(一点内容，刷新整个页面)
        用户的操作页面会中断(整个页面被刷新了)
Ajax就是能够做到局部刷新！

四：ajax的特点

• 优点

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

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

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

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

• 缺点

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

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

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

四：ajax的应用场景

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

五：ajax的运行原理

       Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

六：jQuery的AJAX

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

   因为学习的是jQuery中Ajax方法，所以所说的结构即是$.ajax()的结构。
   $.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。

js格式的ajax实现语法：

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