Ajax的一些简单问题

Ajax 是什么？

全称：Asynchronous(异步) Javascript And Xml
前端经常需要使用后端提供的接口获取数据，怎么向服务器请求数据呢，就是使用ajax
AJAX的核心就是JS的XMLHttpRequest对象，且xhr是一种支持异步请求的对象。

创建一个Ajax？

//1.创建xmlhttprequest 对象
var xhr = null;
//兼容低版本IE5，6浏览器
if(window.ActiveXObject) {
     xhr = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();
}

//2. 打开链接   请求方式get  url（接口）
var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'
xhr.open('GET', url);

//3.发送
xhr.send(null);

//4.指定回调函数，请求成功（回调）调用这个函数
xhr.onload= function() {
	if(xhr.status == 200) {
    	//请求成功
	}
}

ajax 过程的简单描述。

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

同步和异步的区别?

同步：阻塞

浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞

浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：

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

如何解决跨域问题?

跨域的概念：协议、域名、端口都相同才同域，否则都是跨域。

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容。

所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

let sc = document.createElement('script')
sc.src = `https://www.hhh.com/wd=${value}&req=2&&cb=box&_=15679`

Ajax 的特点及优缺点

Ajax 最大的特点，可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；
Ajax 的优点：

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax 的缺点：

1. ajax不支持浏览器back按钮。
2. 安全问题 AJAX暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。