Ajax和网络

简介: Ajax(异步JavaScript与XML)是一种实现网页局部刷新的技术,通过XMLHttpRequest对象实现客户端与服务器的异步通信,提升用户体验与性能。它支持GET/POST请求,常用于数据交互,结合JSON格式更高效。由于同源策略限制,跨域请求需采用JSONP、CORS等方式解决。Ajax虽不支持浏览器回退、对SEO不友好,但仍是前端开发的核心技术之一。

Ajax和网络
1、Ajax 是什么? 如何创建一个Ajax?
Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果
基本步骤:
js框架(jQuery/EXTJS等)提供的ajax API对原生的ajax进行了封装,熟悉了基础理论,再学习别的框架就会得心应手,好多都是换汤不换药的内容
2、同步和异步的区别?
同步:阻塞的
-张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两个人一块去吃饭
=浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面
异步:非阻塞的
-张三叫李四去吃饭,李四在忙,张三说了一声然后自己就去吃饭了,李四忙完后自己去吃
=浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新
3、如何解决跨域问题?
理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域
出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案
4、页面编码和被请求的资源编码如果不一致如何处理?
对于ajax请求传递的参数,如果是get请求方式,参数如果传递中文,在有些浏览器会乱码,不同的浏览器对参数编码的处理方式不同,所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理,后台开发语言都有相应的解码api。对于post请求不需要进行编码
5、简述ajax 的过程。
创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
6、阐述一下异步加载。
异步加载的方案: 动态插入 script 标签
通过 ajax 去获取 js 代码,然后通过 eval 执行
script 标签上添加 defer 或者 async 属性
创建并插入 iframe,让它异步执行 js
7、请解释一下 JavaScript 的同源策略。
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。
8、GET和POST的区别,何时使用POST?
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符,有的浏览器是8000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制
在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
通过异步模式,提升了用户体验
优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。
10、 Ajax的最大的特点是什么。
11、ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
12、ajax请求的时候get 和post方式的区别
get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。
post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。
13、解释jsonp的原理,以及为什么不是真正的ajax
  Jsonp并不是一种数据格式,而json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,具体是通过动态创建script标签,然后通过标签的src属性获取js文件中的js脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上使用的并不是ajax技术
14、什么是Ajax和JSON,它们的优缺点。
Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页面局部刷新。
优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验
缺点:对搜索引擎不友好;要实现ajax下的前后退功能成本较大;可能造成请求数的增加跨域问题限制;
JSON是一种轻量级的数据交换格式,ECMA的一个子集
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)
15、http常见的状态码有那些?分别代表是什么意思?
200 - 请求成功
301 - 资源(网页等)被永久转移到其它URL
404 - 请求的资源(网页等)不存在
500 - 内部服务器错误
16、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
分为4个步骤:
当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
此时,Web 服务器提供资源服务,客户端开始下载资源。
17、ajax请求的时候get 和post方式的区别
get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。
post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。
18、ajax请求时,如何解释json数据
使用eval() 或者JSON.parse() 鉴于安全性考虑,推荐使用JSON.parse()更靠谱,对数据的安全性更好。
19、.javascript的本地对象,内置对象和宿主对象
本地对象为独立于宿主环境的ECMAScript提供的对象,包括Array Object RegExp等可以new实例化的对象
内置对象为Gload,Math 等不可以实例化的(他们也是本地对象,内置对象是本地对象的一个子集)
宿主对象为所有的非本地对象,所有的BOM和DOM对象都是宿主对象,如浏览器自带的document,window 等对象
20、为什么利用多个域名来存储网站资源会更有效?
确保用户在不同地区能用最快的速度打开网站,其中某个域名崩溃用户也能通过其他郁闷访问网站,并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。
21、请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件,减少http请求
3、外部js、css文件放在最底下
4、减少dom操作,尽可能用变量替代不必要的dom操作
22、HTTP状态码都有那些。
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误,不能被服务器所理解
403 Forbidden //服务器收到请求,但是拒绝提供服务
404 Not Found //请求资源不存在,输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

相关文章
|
4天前
|
前端开发 JavaScript
CSS动画
CSS动画通过transition、keyframe和逐帧实现,支持平移、旋转、缩放等效果。关键帧动画控制更精细,无需状态变化;过渡动画依赖属性变化。性能良好,优于部分JS实现。文中的轮播图利用keyframes与left定位实现无缝切换,流畅且兼容性强。
|
4天前
|
SQL 安全 网络协议
常见的网络攻击
常见网络攻击包括恶意软件、网络钓鱼、中间人攻击、DDoS攻击、SQL注入、零日漏洞和DNS隧道等。攻击者利用漏洞或社会工程手段入侵系统,窃取数据、破坏服务或控制设备。防范需加强安全意识与技术防护。
|
4天前
|
Web App开发 前端开发 iOS开发
CSS布局
本文系统讲解CSS布局核心知识,涵盖两栏三栏布局、定位机制、层叠上下文、BFC原理、浮动清除、移动端适配、rem/em区别及水平垂直居中等常见问题,深入解析各布局方案的实现方式与适用场景,助力掌握现代前端布局关键技术。
|
4天前
|
存储 JavaScript 前端开发
XSS攻击
XSS攻击利用网站对用户输入过滤不足,将恶意脚本注入网页,用户访问时执行,可盗取cookie、数据或劫持操作。主要分反射型(通过URL注入)和存储型(存入数据库)。防御方法包括转义字符、白名单过滤富文本、使用CSP策略限制资源加载,有效降低风险。
|
3天前
|
SQL Java 数据库连接
持久层框架MyBatisPlus
MyBatisPlus是MyBatis的增强框架,简化单表CRUD操作,内置代码生成、分页插件、条件构造器等功能,支持自定义SQL与逻辑删除,提升开发效率,广泛应用于企业级Java项目中。
|
3天前
|
Java Spring
什么是WebFlux
WebFlux是Spring Framework 5引入的响应式Web框架,支持非阻塞、异步处理,适用于高并发场景。基于Reactor项目,提供注解式和函数式编程模型,可运行在Netty等响应式服务器上,实现高效能Web应用开发。
|
4天前
|
JSON 缓存 前端开发
什么是跨域
跨域是指浏览器出于安全考虑,限制不同源之间的资源访问。CORS(跨域资源共享)是W3C标准,通过服务器设置响应头,允许浏览器向跨源服务器发送XMLHttpRequest请求。它分为简单请求与非简单请求,后者需先发起OPTIONS预检。相比仅支持GET的JSONP,CORS支持所有HTTP方法,更灵活安全,是现代跨域解决方案的首选。(238字)
|
4天前
|
前端开发 iOS开发
CSS效果
本内容介绍CSS核心技巧:用div绘制三角形、实现不占空间边框(box-shadow/outline)、IOS圆角图标、背景图控制、0.5px边框(transform缩放)、元素平移缩放及3D旋转硬币效果,深入讲解box-sizing与transform等属性应用。
|
3天前
|
SQL NoSQL 前端开发
大厂如何解决订单幂等问题
大厂通过唯一标识+DB唯一约束实现创建幂等,版本号机制解决更新ABA问题。结合Redis与事务控制,确保分布式环境下订单操作的幂等性,避免重复下单与数据错乱,方案通用可复用。
|
3天前
|
存储 缓存 Java
自定义注解
本文介绍如何通过自定义注解结合Spring AOP实现日志、权限控制等功能,涵盖注解定义(@Target、@Retention)、AOP拦截及过滤器应用,如登录验证,提升代码可读性与复用性。