AJAX

5/8/2020 ajax

# 1、什么是 ajax?ajax 作用是什么?

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.

# 2、为什么要用 ajax:

Ajax 应用程序的优势在于:

  1. 通过异步模式,提升了用户体验

  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

  3. Ajax 引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

# 3.AJAX 最大的特点是什么。

Ajax 可以实现动态不刷新(局部刷新) 就是能在不更新整个页面的前提下维护数据。这使得 Web 应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

# 4、请介绍一下 XMLHttprequest 对象。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。通过 XMLHttpRequest 对象,Web 开发人员可以在页面加载以后进行页面的局部更新。

# 5、AJAX 技术体系的组成部分有哪些。

HTML,css,dom,xml,xmlHttpRequest,javascript

# 6:原生 js ajax 请求有几个步骤?分别是什么

//创建 XMLHttpRequest 对象 var ajax = new XMLHttpRequest(); //规定请求的类型、URL 以及是否异步处理请求。 ajax.open('GET',url,true); //发送信息至服务器时内容编码类型 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求 ajax.send(null);
//接受服务器响应数据 ajax.onreadystatechange = function () { if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { } };

# 7:json 字符串转换集 json 对象、json 对象转换 json 字符串

//字符串转对象

JSON.parse(json)

eval('(' + jsonstr + ')')

// 对象转字符串

JSON.stringify(json)

Eval() json.parse()区别????

第一种方式:eval();

var data='{"student":[{"name":"张三","age":"11"},{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’;

eval(’(“+data+”)’);

第二种方式:JSON.parse();

var data='{"student":[{"name":"张三","age":"11"},{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’;

JSON.parse(data);

区别:eval 方法不会去检查给的字符串时候符合 json 的格式~同时如果给的字符串中存在 js 代码 eval 也会一并执行~比如:

var data='{"student":[{"name":"张三","age":"11"},{"name":"李四","age":"alert(11)"},{"name":"王五","age":"11"}]}’;

此时执行 eval 方法后会先弹出一个提示框输出 11 的字符串;

这时候使用 JSON.parse()就会报错,显示错误信息为当前字符串不符合 json 格式;即 JSON.parse()方法会检查需要转换的字符串是否符合 json 格式.

相比而言 eval 方法是很不安全,特别是当涉及到第三方时我们需要确保传给 eval 的参数是我们可以控制的,不然里面插入比如 window.location~指向一个恶意的连接

总的来说,还是推荐使用 JSON.parse 来实现 json 格式字符串的解析。

# 8.什么是 JSON?

JSON 是一种轻量级的数据交换格式。

# 9:ajax 几种请求方式?他们的优缺点?

常用的 post,get,delete put

###代码上的区别 1:get 通过 url 传递参数 2:post 设置请求头 规定请求数据类型 ###使用上的区别 1:post 比 get 安全 (因为 post 参数在请求体中。get 参数在 url 上面) 2:get 传输速度比 post 快 根据传参决定的。 (post 通过请求体传参,后台通过数据流接收。速度稍微慢一些。而 get 通过 url 传参可以直接获取) 3:post 传输文件大理论没有限制 get 传输文件小大概 7-8k ie4k 左右 4:get 获取数据 post 上传数据 (上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post 是最好的选择)

# 10.什么情况造成跨域?

同源策略限制 不同源会造成跨域。以下任意一种情况不同,都是不同源。

同源:协议 域名 端口号全部相同 只要有一个不相同就是非同源策略

# 11.跨域解决方案有哪些?

原理:动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。

步骤:

  1. 去创建一个 script 标签

  2. script 的 src 属性设置接口地址

  3. 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

  4. 通过定义函数名去接收后台返回数据

//去创建一个 script 标签 var script = document.createElement("script"); //script 的 src 属性设置接口地址 并带一个 callback 回调函数名称 script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback"; //插入到页面 document.head.appendChild(script); //通过定义函数名去接收后台返回数据 function jsonpCallback(data){ //注意 jsonp 返回的数据是 json 对象可以直接使用 //ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。 }

# 12. CORS:跨域资源共享

原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求

限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上

需要后台设置 Access-Control-Allow-Origin: * //允许所有域名访问,或者 Access-Control-Allow-Origin: http://a.com //只允许所有域名访问 3.反向代理

4.window+iframe

# 14.http 常见状态码有哪些?

一: 2 开头状态码

2xx (成功)表示成功处理了请求的状态代码

200 (成功) 服务器已成功处理了请求。 通常。

二: 3 开头状态码

3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。

三: 4 开头状态码

4xx(请求错误) 这些状态代码表示请求可能出错,妨碍了服务器的处理

1:400 (错误请求) 服务器不理解请求的语法。

2:403 (禁止) 服务器拒绝请求。

3:404 (未找到) 服务器找不到请求的网页。

四: 5 开头状态码

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错

500 (服务器内部错误) 服务器遇到错误,无法完成请求

# 15 介绍一下 XMLHttpRequest 对象的常用方法和属性

open(“method”,”URL”) 建立对服务器的调用,第一个参数是 HTTP 请求 方式可以为 GET,POST 或任何服务器所支持的您想调用的方式。 第二个参数是请求页面的 URL。 send()方法,发送具体请求 abort()方法,停止当前请求 readyState 属性 请求的状态 有 5 个可取值 0=未初始化 ,1=正在加载 2=以加载,3=交互中,4=完成 responseText 属性 服务器的响应,表示为一个串 reponseXML 属性 服务器的响应,表示为 XML status 服务器的 HTTP 状态码,200 对应 ok 400 对应 not found

# 16 什么是 XML

XML 是扩展标记语言,能够用一系列简单的标记描述数据

# 17.AJAX 都有哪些优点和缺点?

1、最大的一点是页面无刷新,用户的体验非常好。 2、使用异步方式与服务器通信,具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax 的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

ajax 的缺点 1、ajax 不支持浏览器 back 按钮。 2、安全问题 AJAX 暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试。

Last Updated: 4/20/2021, 6:23:22 PM