前端技术之ajax篇

ajax篇

ajax：是在无需重新加载整个网页的情况下，能够实现 局部数据 实时更新 的技术。
1、 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
2、它不是新的编程语言，而是一种使用现有标准的新方法；
3、最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容；
4、它不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；

ajax的应用：

• 百度搜索关键字
• 股票、黄金、期货、基金、币圈市场数据实时更新
• 偷菜游戏，网页游戏
• 美团骑手、车来了、导航、新闻
• 翻页效果、懒加载(上拉，加载更多)，按需加载
• 地图：滚动滑轮放大缩小，地图的数据会发生变化
• 表单验证：第一层的：非空，第二层：正则，第三层：ajax正确性验证

ajax的优点：
1、增加速度，减轻服务器的负担，按需加载数据，最大程度的减少冗余请求
2、改善用户的体验，局部刷新页面，减少用户等待时间，带来更好的用户体验
3、页面和数据分离，前后端分离，操作更灵活，后期维护更方便；

传统方式和ajax方式：

https://www.w3cschool.cn/ajax/ajax-tutorial.html

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

XMLHttpRequest 是 AJAX 的基础。
　XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
　XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
　XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

它执行以下操作：

• 在后台从客户端发送数据
• 从服务器接收数据
• 更新网页而不重新加载。

1、创建 XMLHttpRequest 对象：用于和服务器交换数据

    //因个别游览器例外 比如IE5、IE6（不支持XMLHttpRequest 对象），所以要先检查当前浏览器是否支持 XMLHttpRequest 对象,
    //如支持，则创建 XMLHttpRequest 对象， 否则创建 ActiveXObject 对象，但又要包括所有游览器，所以如下：
    var xmlHttp;
    if (window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 等浏览器执行的代码如下
        xmlHttp=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行的代码如下
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

2、向服务器发送请求：


XMLHttpRequest 对象用于和服务器交换数据。
　 当页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。
　如需将请求发送到服务器，使用 XMLHttpRequest 对象的open()和send()方法：

xmlHttp.open("GET","ajax_info.txt",true);        
xmlHttp.send();

　GET 还是 POST？
　与POST相比，GET 更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，请使用POST请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST没有数据量限制）
• 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET请求具有以下的几个特点：

• GET请求可被缓存
• GET请求保留在浏览器历史记录中
• GET请求可被收藏为书签
• GET请求不应在处理敏感数据时使用
• GET请求有长度限制
• GET请求只应当用于取回数据

GET请求：

xmlhttp.open("GET","demot.html",true); 
xmlhttp.send();

之前有说过get请求会产生缓存，可能得到的是缓存的结果。为了避免这种情况，可以向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo.html?t=" + Math.random(),true); 
xmlhttp.send();

也可以通过GET方法发送信息，向 URL 添加信息：

xmlhttp.open("GET","demo.html?fname=fq&lname=niu",true); 
xmlhttp.send();

POST请求：
如果需要像 HTML 表单那样 POST 数据，使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定发送的数据

xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

提示：POST请求的特点如下：

• POST请求不会被缓存
• POST请求不会保留在浏览器历史记录中
• POST请求不能被收藏为书签
• POST请求对数据长度没有要求

3、服务器的响应：

由于 HTTP 响应是由服务端发出的，并且服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

  状态行 
  xhr.status状态码，如200，304，404等； 
  响应主体 
  xhr.responseText与xhr.responseXML都表示响应主体。

4、ajax—onreadystatechange 事件

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。
　当请求被发送到服务器时，我们需要执行一些基于响应的任务。
　每当readyState改变时，就会触发onreadystatechange事件。
　readyState属性存有 XMLHttpRequest 的状态信息。

readyState状态说明：
　0：请求未初始化
　此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。
　
　1：服务器连接已建立
　此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（method,url,true）完成对象状态的设置。并调用send()方法开始向服务端发送请求。
　值为1表示正在向服务端发送请求。
　
　2：请求已接收
　此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。
　值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。

3：请求处理中
　此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。
　状态3表示正在解析数据。
　
　4：请求已完成，且响应已就绪
　此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。
　值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。
　
　概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

1. 创建
2. 初始化请求
3. 发送请求
4. 接收数据
5. 解析数据
6. 完成

注意：onreadystatechange事件被触发 5 次（0 - 4），对应着readyState的每个变化。
　提示：XHR.readyState状态的变化如下：
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。

ajax部分代码的使用可看我之前的博客内容！！！
其中第一个借用狗哥的ajax博客，人很nice！！！
Ajax之发送请求
ajax封装函数
ajax–获取数据接口做渲染
ajax之点赞功能实现