fail 原生ajax_原生Ajax使用

Ajax基础

Ajax(Asynchronous JavaScript And XML)概念：

通过XMLHttpRequest对象向服务器提出请求并处理响应，进行页面的局部更新。

AJAX都有哪些优点和缺点？

ajax的优点：

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

3、“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器和带宽的负担，节约空间和宽带租用成本。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

ajax就会面临两个不可避免的问题：

一是以何种格式来减缓数据；

二是如何解决跨域问题。ajax本身不支持跨域请求，需要在服务器端处理--JSONP(一种跨域数据交互协议)。

相关介绍：

现在 W3C 官方都不提倡 XHR 了，而是提倡 FetchAPI(虽然也不好用)

Ajax 指的是 XMLHttpRequest(XHR)，未来现在已被 Fetch 替代;

Fetch API 是基于 Promise 设计，有必要先学习一下 Promise

https://www.cnblogs.com/hsprout/p/5504053.html

https://blog.csdn.net/shendeguang/article/details/72818802

https://segmentfault.com/a/1190000003810652

Ajax请求过程

创建XMLHttpRequest、连接服务器、发送请求、服务器做出响应、接收响应数据

浏览器端

一：创建XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象(旧版IE除外，IE5和IE6使用new ActiveXObject()

由于不同浏览器的控件不同，所以为了兼容性，需要根据当前页面所在浏览器以不同方式获取到XMLHttpRequest对象：先检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject。

varxmlhttp;if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest//IE7+, Firefox, Chrome, Opera, Safari 浏览器支持XMLHttpRequest

xmlhttp=newXMLHttpRequest();

}else{//IE6, IE5 浏览器使用ActiveXObject

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

二：向服务器URL发出请求，传递参数

我们使用 XMLHttpRequest对象的open() 方法连接到服务器某url，设置回调函数监听返回结果、最后send() 并发出请求、传参。

方法

描述

open(method,url,async)

请求类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：处理请求的文件在服务器上的位置

async：true(异步)或 false(同步)

send(string)

将请求发送到服务器。

string：仅用于 POST 请求。如果上面open中设置请求方法为GET,则此处send(null)，若上面

为Post，则send("para1=val1 & para2=val2..."