ajax 前后端交互

原生js的ajax请求

传统方法的缺点:

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是Ajax

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。。

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

步骤流程

var xmlhttp=new XMLHttpRequest(); //创建
XMLHttpRequest对象
xmlhttp.open("GET","ajax_info.txt",true); //设置
请求方式和地址
xmlhttp.send(); //发送请求
xmlhttp.responseText() # //响应数据

但是~~~

传统 Ajax 的XMLHttpRequest（XHR）， 未来 现在已被Fetch 替代。

最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch，上线一个多月以来运行非常稳定。结果证明，对于IE8+ 以上浏览器，在生产环境使用 Fetch 是可行的。

XMLHttpRequest 与 Fetch

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of
Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的
Promise，generator/yield，async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

使用 XHR 发送一个 json 请求一般是这样：

// 发送ajax 请求 需要 五步

// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();

// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', 'http://www.httpbin.org/get');

// （3）发送请求
ajaxObj.send();


// readyState  
//  0 － （未初始化）还没有调用send()方法
//  1 － （载入）已调用send()方法，正在发送请求
//  2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
//  3 － （交互）正在解析响应内容
//  4 － （完成）响应内容解析完成，可以在客户端调用了

// status http协议中的状态码

//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
    // 为了保证 数据 完整返回，我们一般会判断 两个值
    if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
        // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
        // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
        console.log('数据返回成功');
        // 数据是保存在 异步对象的 属性中
        console.log(ajaxObj.responseText);
        document.write(ajaxObj.responseText);
    }
}

使用 Fetch 后，顿时看起来好一点

fetch (url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
});

各位看官留个赞再走吧！哈哈哈哈