Ajax 是什么?以及如何创建 Ajax?

Ajax 是什么?以及如何创建 Ajax?

Ajax主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新。
早期的浏览器并不能原生支持 ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对 ajax 的原生支持 .

原理

​ 通过XMLhttprequire对象来向服务器发异步请求，从服务器获取数据，然后用JavaScript来操作dom而更新页面 最关键的就是从服务器获取请求数据

创建ajax的步骤

​ 创建xmlhttprequire对象 创建一个异步调用对象

​ 创建一个新的 HTTP 请求，并指定该HTTP 的请求方法，url及验证信息

​ 设置响应HTTP请求状态变化的函数

​ 发送HTTP请求

​ 获取异步调用返回的数据

​ 使用JavaScript和 DOM 实现局部更新

代码部分

ar xhr = null;  //创建对象
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("方式", "地址", "标志位"); //初始化请求
xhr.setRequestHeader("", "");     //设置 http  头信息
xhr.onreadystatechange = function () { }//指定回调函数
xhr.send();//发送请求

ajax优缺点

​ 1.优点

页面局部刷新 用户体验好

异步通信 加快了响应能力

减少多余请求 减轻服务器的负担 节约宽带资源

不需要下载插件或者小程序

​ 2.缺点

ajax干掉了back按钮和加入收藏书签的功能 对浏览器后退机制的损坏

存在一定的安全问题 ajax暴露了与服务器交互的细节

对搜索引擎的支持比较弱

破坏了程序的异常机制

无法用url直接访问

ajax请求的时候 get 和post方式的区别

​ get请求会将参数跟在url后进行传递 而post的请求则是http信息的实体内容发送 给服务器

​ get请求有数据长度限制 （大约是 2 kb） 而post理论上没有呢

​ get方式请求的数据会被浏览器缓存起来 post不会

​ get在某些情况下会有安全问题 post相对于较好一点 （其实他也不安全 还要做加密处理）

​ 在客户端使用get请求时服务器端使用Request.QueryString来获取参数,而客户端使用post 请求时,服务器端使用Request.Form来获取参数。

何时使用 POST？
在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

解释 jsonp 的原理,以及为什么 jsonp 为什么不是真正的ajex

​ JSONP的原理：jsonp是用来解决跨域获取数据的一种解决方案

​ 1. ajsx和jsonp这两种的技术看起来很像 目的也一样 都是一个url 然后把服务器返回的数据进行处理

​ 2. 实际上ajax与jsonp有着 本质上的不同 ajax的核心是通过xmlhttprequire获取数据 而jsonp的核心则是动态添加《script》标签来调用服务器提供的js文件

​ 3. ajax与jsonp的区别也不再与是否跨域 Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据

​ 4. 总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点。

跨域产生的原因

同源策略

​ 不同协议 不同端口 不同域名以及ip地址的访问都会产生跨域

跨域解决的三种主流解决方案

​ 1.jsonp

​ 主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback参数，后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json

​ 优点： 浏览器兼容好

​ 缺点： 只支持get请求方式

​ 2.代理

​ 前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的

前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和

vue3.x 脚手架代理跨域实现原理是一样的

​ 3.CORS

​ CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

​ CORS 的原理：CORS 定义一种跨域访问的机制，可以让 AJAX 实现跨域访问。 CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可

​ 优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete 等）

​ 缺点：浏览器支持有版本要求，如下：

​ chrome:13+,firefox:3.5+,IE 11+,edge:12+

​ 注：现在主流框架都是用代理和 CORS 跨域实