Ajax学习

认识 Ajax

什么是 Ajax

Ajax 是一种异步请求数据的 web 开发技术，对于改善用户的体验和页面性能很有帮助。
刚好回顾下什么是异步同步，大部分的请求是同步的，就是说我必须等待后台请求给我返回结果了才能往下操作。通俗讲的话，我要去烧水、水热了后去洗碗、扫地。同步来做的话就是依次等待水烧热后我再去洗碗，洗了碗后我再去扫地。异步做的话我把水壶接通电源（发送请求）、接着水壶它烧它的，我去扫地了，可能扫完地后水热了，再用水壶的水来洗碗。
还可以说我今天一天没有逛朋友圈，晚上终于有空翻朋友圈，好不容易翻到了上午的朋友圈，突然觉得某个动态有意思我想评论一下或者点赞，如果页面上有刷新，那我点赞后直接就刷新了朋友圈，我又得从新翻很久才能回到刚才的动态页面。如果是不会刷新，即点赞后马上就显示了点赞记录。这就是无刷新技术通过Dom操作来实现的效果。所以Ajax通常会结合Dom一起操作。
简单地说，在不需要重新刷新整个页面的情况下，Ajax 通过异步请求加载后台数据，能在网页的局部更新数据。
常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。
Ajax 的目的是提高用户体验，较少网络数据的传输量。同时，由于 AJAX 请求获取的是数据而不是 HTML 文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。
AJAX=Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
Ajax 不是一门编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术

• 传统的网页(即不用 ajax 技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
• 使用 ajax 技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
• 使用 Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的 Web 用户界面。
• 增加 B/S 体验性 （B/S 未来的主流，持续增长）

---

Ajax 原理是什么

在解释 Ajax 原理之前，我们不妨先举个 “领导想找小李汇报一下工作” 例子，领导想找小李问点事，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。

Ajax 请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象，它扮演的角色相当于秘书，使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。浏览器接着做其他事情，等收到 XHR 返回来的数据再渲染页面。

理解了 Ajax 的工作原理后，接下来我们探讨下如何使用 Ajax

---

利用 AJAX 可以做：

注册时，输入用户名自动检测用户已经存在
登陆时，提示用户密码错误
删除数据时，将行 ID 发送到后台，后台在数据库中删除，数据库删除成功后，在页面 DOM 中将数据行也删除
我们可以使用前端的一个标签来伪造一个 ajax 的样子。iframe 标签

<!-- iframe 元素会创建包含另外一个文档的内联框架（即行内框架） -->

    <div>
        <p>请输入要加载的地址：<span id="currentTime"></span></p>
        <p>
            <input id="url" type="text" value="https://www.baidu.com/" />
            <input type="button" value="提交" onclick="LoadPage()">
        </p>
    </div>
    <div>
        <h3>加载页面位置：</h3>
        <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var myDate = new Date(); //获取当前时间 并传递给p标签里的span
            document.getElementById('currentTime').innerText = myDate.getTime();
        };

        function LoadPage() {
            var targetUrl = document.getElementById('url').value; //获取input框的网址
            console.log(targetUrl);
            document.getElementById("iframePosition").src = targetUrl; //把网址传给内联标签iframe标签的src属性
        }

    </script>

这里简单的制造了一个在当前页面打开其他页面不刷新整体页面的场景，ajax 可以实现更多更高级的类似功能

---

Ajax 的使用

原生Ajax 的使用

1.创建 Ajax 核心对象 XMLHttpRequest(记得考虑兼容性)

var xhr=null;
if (window.XMLHttpRequest) {
    // 兼容 IE7+, Firefox, Chrome, Opera, Safari
    xhr=new XMLHttpRequest();
} else {
  // 兼容 IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

xhr.open(method,url,async);  
send(string);//post请求时才使用字符串参数，否则不用带参数。

。。。太麻烦了 后期再学原生吧

jQuery.ajax 的使用

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery Ajax 本质就是 XMLHttpRequest，对他进行了封装，方便调用！
纯 JS 原生实现 Ajax 暂时不去了解了，直接使用 jquery 提供的，方便学习和使用，避免重复造轮子，有空再去了解下 JS 原生 的XMLHttpRequest把···
Ajax 的核心是XMLHttpRequest对象(XHR)。XHR 为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。

使用 jQuery 需要先从官网下载jQuery.js并导入到文件
就可以使用$符号，它是jquery中代表jquery对象的引用,“jQuery”是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。$ <==> jQuery

通过 jQuery AJAX 方法，能够从远程服务器上请求文本、HTML、XML 或 JSON – 同时能够把这些外部数据直接载入网页的被选元素中。

jQuery 中发起 Ajax 请求最常用的三个方法如下：
$.get()
$.post()
$.ajax()

$.get()函数的语法

• jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求

• 将服务器上的资源请求到客户端来进行使用。

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

  参数名	参数类型	是否必选	说明
  url	string	是	要请求的资源地址
  data	object	否	请求资源期间要携带的参数
  callback	function	否	请求成功时的回调函数

• $.get()发起不带参数的请求
  使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：

  $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
      console.log(res) // 这里的 res 是服务器返回的数据
  })

• $.get()发起带参数的请求
  使用 $.get() 函数发起带参数的请求时，示例代码如下：

  $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
      console.log(res)
  })

$.post()函数的语法

• jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.post() 函数的语法如下：

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

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

使用 $post() 向服务器提交数据的示例代码如下：

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)

$.ajax()函数的语法

• 相比于$.get()和$.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数
• 它允许我们对 Ajax 请求进行更详细的配置

$.ajax() 函数的基本语法如下：

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

使用$.ajax()发起GET请求
使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 ‘GET’ 即可：

$.ajax({
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data: { id: 1 },// 这次请求要携带的数据
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

使用$.ajax()发起POST请求
使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 ‘POST’ 即可：

$.ajax({
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data: { // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    },
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

jQuery.ajax(…)
部分参数：
url：请求地址（待载入页面的URL地址）
data：要发送的数据（待发送给后台的值key/value参数）
success：载入成功之后执行的回调函数(全局)
type：请求方式，GET、POST（1.9.0之后用method）
// 下边的了解下不常用
headers：请求头
contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
“xml”: 将服务器端返回的内容转换成xml格式
“text”: 将服务器端返回的内容转换成普通文本格式
“html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
“script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
“json”: 将服务器端返回的内容转换成相应的JavaScript对象
“jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

---

接口相关知识

• 接口的概念

  • 使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
    例如：
    www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
    www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

• 分析接口的请求过程

通过GET方式请求接口的过程

通过POST方式请求接口的过程

Ajax的优缺点

优点

1.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
2.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
3.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
4.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
5.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点

1.AjAX干掉了Back和加入收藏书签功能，即对浏览器机制的破坏。
2.AJAX的安全问题。
3.因为网络延迟需要给用户提供必要提示