1.什么是ajax

ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网友内容

解释：在没有ajax之前，更新网页需要重新加载整个页面，比如一个不好的地方就是填写表单，提交时如果失败了，需要重新填写整个表单。

2.发送ajax请求的过程

2.1创建异步ajax请求对象

        // 1.创建ajax请求
        var xhr = new XMLHttpRequest()

2.2设置请求的主要参数

请求方法get或post
请求地址
true（异步）或false（同步）

        //get请求传递参数可以拼接到url后面，地址和参数用 ? 分隔，参数和参数之间用 & 分隔
        var url = 自己需要的请求地址 
        xhr.open('get', url, true)

2.3发送请求

 //如果是post请求，需要加上下面这段，因为post请求的参数是放在发送请求中的，
 //下面操作相当于，告知该如何解析请求中的post参数
 //  Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset=UTF-8');
 //get请求不用传参，post请求需要把自己需要传递的参数传进去
 xhr.send()

2.4绑定事件及获取返回数据

        // 注册绑定事件
        xhr.onreadystatechange = function () {
            // readyState为4,代表已经跟服务器连接上了
            // status为200, 代表服务器返回了成功的数据
            if(xhr.readyState === 4 && xhr.status === 200){
                // responseText是服务器给前端返回的数据
                console.log(typeof xhr.responseText);
                console.log(xhr.responseText);
                // 将json字符串转为数组或者对象
                var list = JSON.parse(xhr.responseText)
                console.log(list);
            }
        }

3.get请求和post区别

用途不一样

get请求一般用于获取数据：数据事先存在服务器，通过get请求去获取

```
post请求一般用于发送数据：比如用户注册填好表单后通过post把数据传给服务器，服务器再将数据传入数据库
```
ps: 实际项目中, 也并非一定要这么做, 具体情况根据公司实际情况处理, 后台一般会提供接口文档, 指定请求方法

传递参数的方式不一样

get请求传递参数默认是将参数拼接到url后面的，然后发送给服务器，get请求传递参数大小是有限制的，是浏览器的地址栏大小限制

post请求传递参数，需要把参数放到请求体中，发送给服务器，理论上对请求参数大小没有要求，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。

安全性问题

get安全性相对较低，因为其参数拼接在请求url后面

```
post安全性相对较高
```

ps: 安全性是相对而言的, 网页的安全性其实不管用那种方式, 安全性都很难很高, 因为别人甚至可以绕过浏览器去请求数据, 所以在实际项目中, 一般前端要校验数据, 后端也要校验数据

浏览器缓存

get请求一般会走缓存，为了防止走缓存，可以给url后面每次拼接的参数不同，一般用个时间戳

```
post请求不会走缓存
```

4.http状态码

xhr.readyState (了解)

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。

XHR.readyState 请求就绪状态（0，1，2，3，4），而且状态也是不可逆的：

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

xhr.status 就是http状态码了

重点几个:

200 请求成功。一般用于GET与POST请求

301 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。301和302都叫地址重定向, 一个是永久重定向, 一个是临时重定向

304 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

403 服务器理解请求客户端的请求，但是拒绝执行此请求

404 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 客户端请求中的方法被禁止

500 服务器内部错误，无法完成请求

5.跨域请求

跨域请求相关知识
- 因为浏览器有同源策略，只有当 ‘协议’，‘域名’，‘端口号’都相同时，才能称之为同源，其中有一个就叫跨域
- 同源策略限制了从同一个源加载的文档或脚本与另一个源的资源进行交互，但这也是隔离潜在的恶意文件的重要安全机制。
- 我们为什么要跨域呢？一是前端和服务器分开部署，接口需要跨域，二是我们可能会加载其他网站的页面为iframe内嵌。 跨域的方法有哪些？
jsonp跨域
cors跨域

jsonp 只能支持 get 请求，cors 可以支持多种请求。cors是在服务器端设置, cors 并不需要前端做什么工作。
proxy(代理)跨域
- nginx 反向代理(运营或后台)
- webpack设置proxy跨域(前端)
websocket跨域
postMessage
其它方式跨域
- window.name+ iframe
- location.hash + iframe
- document.domain

6.jsonp跨域

jsonp的核心是动态添加script标签调用服务器的js脚本，jsonp只支持get请求。
jsonp跨域原理是<script>标签的src属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。jsonp通过插入script标签的方式来实现跨域，参数只能通过url传入，仅能支持get请求。

        function getData(data) {
            console.log(data);
        }
        // 动态生成script标签
        var scr = document.createElement('script')
        scr.src = 自己需要请求的地址
        document.body.appendChild(scr)

发送ajax请求，需知的基础知识