概述
Ajax原理及相关面试题总结
AJAX 是一种通过向服务器异步发送请求,获取数据,并在不需要重新刷新当前页面的情况下局部更新数据的web开发技术。 Ajax相当于是用户和服务器之间的中间层,它使得用户操作和服务器响应异步化。不是所有用户请求都需要向服务器提交,某些数据验证和 数据处理都交由服务器自己完成的,只有在需要获取新数据时才会由Ajax引擎代为向服务器发送请求。Ajax原理简单的来说就是,利用XMLHttpRequest对象来向服务器发送异步请求,从服务器获取数据,在由JavaScript操作 Dom来更新页面。
特点及优缺点
最大的特点:Ajax可以实现动态不刷新(局部刷新),就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
优势:
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
- 不需要插件的⽀持,原⽣ js 就可以使⽤
缺点:
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
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)) {
}
};
GET,POST两种请求方式的区别
代码上:
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是最好的选择)
XMLHttpRequest对象
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入,它是一种支持异步请求的技术。XmlHttpRequest使程序员可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。
属性:
readyState:XHR对象的状态
0:未初始化,对象已创建,但未调用open
1:open方法已经调用,但send方法还未调用
2:send方法已经调用,但还未接收数据
3:正在接收数据,HTTP响应头已经接收数据,但未接收完成
4:响应数据接收完成
onreadyStatechange:
请求状态改变的事件触发器(readyState改变时就会触发这个属性上的js函数)
responseTEXT
服务器响应的文本内容
responseXML
服务器响应的XML内容对应的Dom对象
stauts
服务器返回的http状态码:常见的有200:成功;404:未找到;500:表示服务器内部错误
stautsTEXT
服务器返回状态的文本信息
方法:
方法
open
指定和服务器间交互的方法,包含三个参数(提交方式,文件路径,异步传输)
send
向服务器发送请求,如果采用异步方式,就会立即返回。参数(content),content如果指定未null就表示不发送数据,其内容可以是dom对象也可以是输入流或字符串
setRequestHeader
设置http请求的指定头部的header的值为value。参数(header,value)该方法在open后调用,一般在post方式中使用
abort
停止http请求,会将XMLHttpRequest对象复位到未初始化的状态
最后
以上就是甜蜜星月为你收集整理的Ajax原理及相关面试题总结Ajax原理及相关面试题总结的全部内容,希望文章能够帮你解决Ajax原理及相关面试题总结Ajax原理及相关面试题总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复