原生ajax

原生ajax  Async Javascript And XML（可扩展标记语言）

ajax是在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染

http事务是 一个请求加上一个相关的响应就是一个完整的http事务

http是一个无状态的（在服务器与客户端通讯的过程中，服务器不知道客户端是谁）

通过token的方式 还有cookie和session的方式来解决

1.如何创建一个原生的ajax

ajax 核心对象  XMLHttpRequest

1.创建xhr 核心对象

var xhr=new XMLHttpRequest();

2.调用open 准备发送

参数一：请求方式

参数二: 请求地址

参数三：true异步，false 同步

xhr.open('post','http://www.baidu.com/api/search',true)

3.如果是post请求，必须设置请求头。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

4.调用send 发送请求 （如果不需要参数，就写null）

xhr.send('user=tom&age=10&sex=女')

5.监听异步回调 onreadystatechange

判断readyState 为4 表示请求完成

判断status 状态码 为 200 表示接口请求成功

responeseText 为相应数据。字符串类型。

xhr.onreadystatechange=function(){

	if(xhr.readyState==4){ 

		if(xhr.status==200){

              console.log(xhr.responseText);

              var res=JSON.parse(xhr.responseText);

              console.log(res);

              if(res.code==1){

                modal.modal('hide');

                location.reload();
              }

            }

2.如果是post请求，想要传json格式数据

1.xhr.setRequestHeader('Content-Type', 'application/json')

open发送数据

2.xhr.open({_id:xxx,user:xxxx,age:xxxx})

3.jsonp的原理

ajax 请求受同源策略影响，不允许进行请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：

1.动态创建<script></script>(document.createElement('script'))

2.设置src 属性，(src中要包含参数callback=fn)进行跨域请求

3.将 <script></script>添加到页面中执行 （body.appendChild('script')）

4.页面要提前定义好callback。

5.后端会返回回调函数执行并包裹参数callback(data)

备注：

服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:'tom',age:18}），在src中进行了调用，这样实现了跨域。

4.ajax的优缺点

 ajax的最大特点:页面局部刷新

 ajax的缺点:

1、ajax不支持浏览器back按钮(要实现ajax下的前后退功能成本较大)。

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

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

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

5.同源策略

url(http://www.baidu.com:80)

协议:http       

域名 :  www.baidu.com         

端口号:80

协议/域名/端口号都相同同源 (接口地址 和 本地项目)

协议/域名/端口号只要有一个不相同 就会跨域

6.跨域

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

跨域就是指浏览器不允许当前页面的所在源，去请求另一个源的数据

1. 在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的，通过在devServer中的proxy来配置跨域的前缀

2. Jsonp是解决跨域的一种解决方案，实现原理主要是利用动态创建 script 标签，设置src属性，页面要提前定义好callback。后端会返回回调函数执行，并包裹参数callback(data)

callback 中的参数就是 json

cors是一种跨域解决方案，它使用额外的 HTTP 头来告诉浏览器让运行在一个origin 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

 

7.状态码

http状态码分类：

100-199 提示信息 – 表示请求正在处
200-299 成功 – 表示请求正常处理完毕
300-399 重定向 – 要完成请求必须进行更进一步的处理
400-499 客户端错误 – 请求有语法错误或请求无法实现
500-599 服务器端错误 – 服务器处理请求出错

常见的状态码有哪些？

200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；

404：(客户端问题)请求的资源没有找到

400: 语义有误，当前请求无法被服务器理解。

401: 当前请求需要用户验证

403: 服务器已经理解请求，但是拒绝执行它。

500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；

301/302/303：(网站搬家了，跳转)重定向