Ajax常见面试问题

184 阅读7分钟

1:什么是ajax?ajax作用是什么?

异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互

2:原生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)) { 
    }
};

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

常用的post,get。

  • 代码上的区别
  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是最好的选择)

4:ajax常用参数?

  • url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址

  • type: 要求为String类型的参数,请求方式(post或get)默认为get。

  • async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

  • data: 要求为Object或String类型的参数,发送到服务器的数据

  • dataType: 要求为String类型的参数,预期服务器返回的数据类型

如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。

可用的类型如下:

  1. xml:返回XML文档,可用JQuery处理。
  2. html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
  3. script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
  4. json:返回JSON数据。
  5. jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
  6. text:返回纯文本字符串。
  • success: 要求为Function类型的参数,请求成功后调用的回调函数

有两个参数
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }

  • error: 要求为Function类型的参数,请求失败时被调用的函数

该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

ajax事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

5:什么情况造成跨域?

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

http://协议不同
www子域名不同
baidu.com端域名不同
8080端口号不同
www.baidu.comip地址和网址不同

6:跨域解决方案有哪些?

(一). jsonp 只能解决get跨域(问的最多)

  • 原理:动态创建一个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对象才可以使用。
}

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

(二). CORS:跨域资源共享

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上

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

www.ruanyifeng.com/blog/2016/0…

(三). 做代理

7:http常见状态码有哪些?

2开头状态码

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

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

3开头状态码

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

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

4开头状态码

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

1:400 (错误请求) 服务器不理解请求的语法。
 
2:403 (禁止) 服务器拒绝请求。

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

5开头状态码

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

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

501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。

502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。

504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

8:Ajax优缺点

优点

1.异步请求,不妨碍用户浏览页面或者其他操作。

2.局部刷新,无需重新刷新页面。

3.界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

4.基于标准被广泛支持。

5.前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。

缺点

1.back和History,对浏览器机制的破坏。

2.安全问题。易受到黑客攻击。

3.对搜索引擎支持较弱。

4.不能很好支持移动设备。

5.违背URL和资源定位的初衷。

文章网址 www.cnblogs.com/fuzitu/p/85…