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。
- 代码上的区别
- get通过url传递参数
- post设置请求头 规定请求数据类型
- 使用上的区别
- post比get安全 (因为post参数在请求体中。get参数在url上面)
- get传输速度比post快 根据传参决定的。 (post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
- post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
- 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,并作为回调函数参数传递。
可用的类型如下:
- xml:返回XML文档,可用JQuery处理。
- html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
- script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
- json:返回JSON数据。
- jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
- 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.com | ip地址和网址不同 |
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和资源定位的初衷。