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

it2023-08-04  74

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 跨域实

最新回复(0)